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

[frankandrobot]

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