prevent loading global style entry css file

We now have styles inlined in the page (https://github.com/nuxt/framework/pull/7160), and we’ve switched the global CSS file to a non-blocking prefetch. However, the vite preloader does still add these styles to the page, and we can probably avoid this (or have an option to avoid this).

Note: this may be unfeasible as entry.css may include more CSS than is inlined in the page, and be necessary for subsequent navigation. See https://github.com/nuxt/framework/issues/7623 for example.

[Anoesj]

@danielroe below are two URLs.

Old URL (without our hook) and this new URL (with our hook). Both URLs have exact same code except the hook above.

The way entry.css is added is still a blocking request (at least in Chrome). <link rel="prefetch stylesheet" href="/_nuxt/entry.c5c3adc4.css">

We may modify it as follows (source) <link rel="stylesheet" href="/_nuxt/entry.c5c3adc4.css" media="print" onload="this.media='all'; this.onload=null;">

I can’t find source but I have read somewhere that above might interfere with Content Security Policy (CSP). I am not sure about proper solution for this but if the css continues to be blocking, inline css is useless. Alternately, we might try adding css to early hints.

This change depends on JavaScript to load styles. Therefore, generated builds don’t load this CSS file and styling breaks when JS is disabled. Can you take another look at another possible solution that doesn’t require JavaScript to be enabled to make sites look like they should? 😄

Also, when JavaScript is enabled, there’s a flash of unstyled elements with this solution. It doesn’t look nor feel right!

[jgupta]

@danielroe below are two URLs.

Old URL (without our hook) and this new URL (with our hook). Both URLs have exact same code except the hook above.

The way entry.css is added is still a blocking request (at least in Chrome). <link rel="prefetch stylesheet" href="/_nuxt/entry.c5c3adc4.css">

We may modify it as follows (source) <link rel="stylesheet" href="/_nuxt/entry.c5c3adc4.css" media="print" onload="this.media='all'; this.onload=null;">

I can’t find source but I have read somewhere that above might interfere with Content Security Policy (CSP). I am not sure about proper solution for this but if the css continues to be blocking, inline css is useless. Alternately, we might try adding css to early hints.