docs: update migration documentation for inlineStyles

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 `<link>` 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

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