feat: css-in-js integration for styled-jsx and styled-components

[huozhi]

Changes

• Adding header component build with styled-components 💅
• Adding footer component build with styled-jsx with existing tailwind styling 💅

Preview

[leerob]

Can we build this into Next.js somehow? I would love to prevent the world where folks need this in userland.

[huozhi]

This is intended that to let users to create their own custom styles registry for any css-in-js, so that we can keep the bundle as minimal as possible on client side. Even styled-jsx we removed the built-in support for layouts. This approach was brought up by @sebmarkbage

What users need to do is:

• Wrap the content under a client component
• use useFlushEffects API in that client component to consume flushed style content for each streaming render

[sebmarkbage]

Part of this story is that we discourage using either of these approaches since this approach doesn't work well inside Server Components since you have to resend them, and the client runtime overhead is not worth it compared to .css file generating solutions. If we were encouraging their usage then maybe the tradeoff of having them built-in would make more sense, but now it's a benefit that it's an opt-in to a solution we're not recommending.

This approach works well with existing mechanisms that these libraries use and it doesn't require useFlushEffects to be built-in to React.

That said, we might add something to React to make it easier to have this work out of the box. Not because we encourage it but because it's so heavily used for legacy purposes and it'll conflict with some other new features too. That would require heavy refactoring to these libraries anyway so it's not as useful in the short term anyway.