Better "plain" CSS support.

🚀 Feature Proposal

Improve streaming render support to “eject” used scripts and css once they are detected, not after the whole render.

Motivation

Improve TTFB. Remove FOUC.

Example

• styled-components SSR interleave styles with rendering content, next hoisting them to the head before hydration (https://github.com/styled-components/styled-components/blob/c3eedbeb79621acd668e15ed2d63107528ed81c3/packages/styled-components/src/models/ServerStyleSheet.js#L58)
• used-styles are doing the same for plain CSS on “used-classes” basic.

Pitch

Right now streaming support is not quite “streaming”. It would add used styles and links only at the end, leading to a Flash Of Unstyled Content. It should be doable to emit all known chunks using a transform stream, as soon as they got discovered.

[gregberge]

Hello @7rulnik, I am open for a better support. On my side, I will not do it, I don’t use CSS modules, so I don’t need this in the library. Feel free to work on it, I am open to it!

[7rulnik]

@neoziro I prefer to use css-in-js solutions as you said, but many people still use css-modules. I’m sure you already saw this tweet. I think it would be cool if we could extract styles with loadable-components.

You mentioned Suspense: do you expect some breaking changes? If no, so why we can’t implement interleave extracting of CSS?