SSR flickering in Vite Dev mode

[chin2km]

Description

In Vite Dev mode for react server-side rendered application the critical CSS needed for styling the application only loads after a while after the vite runtime is loaded and the application is finished hydration.

This results in very bad flickering of UI in big applications since time to load the Vite runtime and hydration can take few seconds.

This is only an issue in dev mode of the plugin, in production mode it works perfectly where it extracts the css to a file and is inlined in the out html.

Reproducible Demo

https://github.com/chin2km/linaria-vite-dev-ssr-issue

goes to the below state after some time

Environment

Node: 20 Bundler: Vite 5 Linaria Version: 6.1.0 OS: macOS

Expectation

The linaria styles are extracted to css file and is either:

• inlined in html with a html transformation
• the css is extracted and written to a file during dev so that it can extracted and injected as critical css during react ssr

[chin2km]

Also created an issue in https://github.com/callstack/linaria repo since I was not sure where this should be solved. https://github.com/callstack/linaria/issues/1404