fix(nuxt): do not inline global styles in HTML response

[danielroe]

🔗 Linked issue

nuxt/nuxt#14953

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This reverts #7386. Rather than attempt to lazy load the entry CSS, it's safer to rely on browser fetching it in the previous (blocking) manner. We still experience the benefit of inlining SFC styles and we can reconsider entry CSS inlining in future.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	c9ba8bc
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6363faea34c9fa00080aee3a

[daguitosama]

Hi there guys, the experimental inlineSSRStyles is still present in rc-13nuxt-config-schema, even says it's true by default on hover, but it does not do the inline at all. This is way confusing.

I think the inline is a really nice feature, and can be leaved here on the toolset as an opt-in feature.
I mean, if you have pretty much < 15 kb css in every page with Tailwindcss, why to block the render of the page awaiting the stylesheet it's fetch, when all that tiny css can be "easily" inlined in the Document Head.

[danielroe]

@daguitosama At the moment, we do not inline global CSS but CSS associated with individual Vue SFCs.

[stuible]

@daguitosama At the moment, we do not inline global CSS but CSS associated with individual Vue SFCs.

Is this expected to change? Some of the most critical CSS to a site (resets, grid systems, etc) is global CSS.

[danielroe]

@stuible The global CSS is still loaded synchronously, so there will be no flash when your page loads.

[Plinpod]

Hi there guys, the experimental inlineSSRStyles is still present in rc-13nuxt-config-schema, even says it's true by default on hover, but it does not do the inline at all. This is way confusing.

I think the inline is a really nice feature, and can be leaved here on the toolset as an opt-in feature. I mean, if you have pretty much < 15 kb css in every page with Tailwindcss, why to block the render of the page awaiting the stylesheet it's fetch, when all that tiny css can be "easily" inlined in the Document Head.

I agree in some cases, it still makes sense to inline the global CSS. Is there a way to force this to happen in the current configuration?