diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md index 00504c21bc..4f8620f72c 100644 --- a/docs/1.getting-started/12.upgrade.md +++ b/docs/1.getting-started/12.upgrade.md @@ -85,6 +85,9 @@ export default defineNuxtConfig({ // } // } // }, + // features: { + // inlineStyles: true + // }, // unhead: { // renderSSRHeadOptions: { // omitLineBreaks: false @@ -281,6 +284,28 @@ export default defineNuxtConfig({ }) ``` +#### More Granular Inline Styles + +🚦 **Impact Level**: Moderate + +Nuxt will now only inline styles for Vue components, not global CSS. + +##### What Changed + +Previously, Nuxt would inline all CSS, including global styles, and remove `` elements to separate CSS files. Now, Nuxt will only do this for Vue components (which previously produced separate chunks of CSS). We think this is a better balance of reducing separate network requests (just as before, there will not be separate requests for individual `.css` files per-page or per-component on the initial load), as well as allowing caching of a single global CSS file and reducing the document download size of the initial request. + +##### Migration Steps + +This feature is fully configurable and you can revert to the previous behavior by setting `inlineStyles: true` to inline global CSS as well as per-component CSS. + +```ts twoslash [nuxt.config.ts] +export default defineNuxtConfig({ + features: { + inlineStyles: true + } +}) +``` + #### Scan Page Meta After Resolution 🚦 **Impact Level**: Minimal diff --git a/docs/2.guide/3.going-further/1.features.md b/docs/2.guide/3.going-further/1.features.md index 28342b2725..c02f9fb8df 100644 --- a/docs/2.guide/3.going-further/1.features.md +++ b/docs/2.guide/3.going-further/1.features.md @@ -16,7 +16,7 @@ You can also pass a function that receives the path of a Vue component and retur ```ts [nuxt.config.ts] export default defineNuxtConfig({ features: { - inlineStyles: true // or a function to determine inlining + inlineStyles: false // or a function to determine inlining } }) ``` @@ -74,6 +74,9 @@ export default defineNuxtConfig({ } } }, + features: { + inlineStyles: true + }, unhead: { renderSSRHeadOptions: { omitLineBreaks: false