inline critical css

[lili21]

For SSR project, css is the critical resource that's blocking the rendering. Remix knows all the css resources for any route. is there anyway I can get the information and do the inline by myself?

[GuyoST]

I would also need that, maybe the new V2 meta function could allow {tagName: "style", content: "raw css..."} ?

[GuyoST]

Actually It's possible to inline critical css at the beginning of tag if you know what is the critical css from the data loader, but your server code must calculate what is critical and must be inline and what what must be included in <link rel="stylesheet"... />, it's what i'm doing for a project, and it's working relatively well, the most difficult part is to find what is critical.

Of course if remix could determine automatically what is critical and not critical from all different static and dynamic css sources... that would be a dream 😁

[lili21]

you also need to unmount the inline style after navigate, I guess.

[peterbe]

What if you don't even care about it being critical or not.

For example, I I'd rather have

<style type="text/css">CSSHERE</style>

rather than

<link rel="stylesheet" href="/build/_assets/global-O3CXK3FI.css"/>

and that CSSHERE would be the contents of /build/_assets/global-O3CXK3FI.css.

[vladinator1000]

I have a dark theme. Right now when I follow these docs https://remix.run/docs/en/main/styling/css, my site flashes white before it loads the critical CSS.