fix(nuxt): always inline styles for server/island components (#20599)

packages/nuxt/src/core/nitro.ts

@@ -202,7 +202,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
     }
   }
 
-  if (!nuxt.options.experimental.inlineSSRStyles) {
+  if (nuxt.options.builder === '@nuxt/webpack-builder' || nuxt.options.dev) {
     nitroConfig.virtual!['#build/dist/server/styles.mjs'] = 'export default {}'
     // In case a non-normalized absolute path is called for on Windows
     if (process.platform === 'win32') {

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -284,7 +284,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
   const renderedMeta = await ssrContext.renderMeta?.() ?? {}
 
   // Render inline styles
-  const inlinedStyles = process.env.NUXT_INLINE_STYLES
+  const inlinedStyles = (process.env.NUXT_INLINE_STYLES || Boolean(islandContext))
     ? await renderInlineStyles(ssrContext.modules ?? ssrContext._registeredComponents ?? [])
     : ''
 

packages/vite/src/plugins/ssr-styles.ts

@@ -5,11 +5,13 @@ import { dirname, relative } from 'pathe'
 import { genObjectFromRawEntries } from 'knitwork'
 import { filename } from 'pathe/utils'
 import { parseQuery, parseURL } from 'ufo'
+import type { Component } from '@nuxt/schema'
 
 interface SSRStylePluginOptions {
   srcDir: string
   chunksWithInlinedCSS: Set<string>
-  shouldInline?: (id?: string) => boolean
+  shouldInline?: ((id?: string) => boolean) | boolean
+  components: Component[]
 }
 
 export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
@@ -19,6 +21,11 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
   const relativeToSrcDir = (path: string) => relative(options.srcDir, path)
 
   const warnCache = new Set<string>()
+  const islands = options.components.filter(component =>
+    component.island ||
+    // .server components without a corresponding .client component will need to be rendered as an island
+    (component.mode === 'server' && !options.components.some(c => c.pascalName === component.pascalName && c.mode === 'client'))
+  )
 
   return {
     name: 'ssr-styles',
@@ -93,8 +100,12 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
     async transform (code, id) {
       const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
       const query = parseQuery(search)
+
       if (!pathname.match(/\.(vue|((c|m)?j|t)sx?)$/g) || query.macro || query.nuxt_component) { return }
-      if (options.shouldInline && !options.shouldInline(id)) { return }
+
+      if (!islands.some(c => c.filePath === pathname)) {
+        if (options.shouldInline === false || (typeof options.shouldInline === 'function' && !options.shouldInline(id))) { return }
+      }
 
       const relativeId = relativeToSrcDir(id)
       cssMap[relativeId] = cssMap[relativeId] || { files: [] }

packages/vite/src/server.ts

@@ -119,14 +119,13 @@ export async function buildServer (ctx: ViteBuildContext) {
 
   serverConfig.customLogger = createViteLogger(serverConfig)
 
-  if (ctx.nuxt.options.experimental.inlineSSRStyles) {
+  if (!ctx.nuxt.options.dev) {
     const chunksWithInlinedCSS = new Set<string>()
     serverConfig.plugins!.push(ssrStylesPlugin({
       srcDir: ctx.nuxt.options.srcDir,
       chunksWithInlinedCSS,
-      shouldInline: typeof ctx.nuxt.options.experimental.inlineSSRStyles === 'function'
+      shouldInline: ctx.nuxt.options.experimental.inlineSSRStyles,
-        ? ctx.nuxt.options.experimental.inlineSSRStyles
+      components: ctx.nuxt.apps.default.components
-        : undefined
     }))
 
     // Remove CSS entries for files that will have inlined styles