callstack / callstack/linaria

Inject initial CSS into HTML (Next.js@12)

Open
#1,146 0 comments 0 reactions 0 assignees View on GitHub
feature: proposal 💬 platform: next.js 🛠️ platform: ssr 🛠️
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Describe the feature

- Was able to get Next.js@12 working using `next-linaria` as an example.
- However, wen using `@lineria/core`, it does not inject the initial CSS styles into the HTML (like style-components). This can cause bad layout shift since the CSS is loaded in parallel.
- Possibly worse behavior when using `@linearia/react` since in addition to waiting for a CSS file to load, the JS runtime also needs to load as well.

- Without injection of initial CSS into HTML, this prevents linaria from being effectively used in Next.js@12
- (Since the whole point of Next.js is to minimize layout shift)
- And so something like ServerStyleSheet from styled-components is needed: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/ServerStyleSheet.tsx

## Motivation

- See above

## Possible implementations

- https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/ServerStyleSheet.tsx

## Related Issues

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.