Enable css import in rsc server side

packages/next/build/webpack/config/blocks/css/index.ts

@@ -360,7 +360,11 @@ export const css = curry(async function css(
               sideEffects: true,
               test: regexCssGlobal,
               issuer: {
-                and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/],
+                or: [
+                  { and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/] },
+                  // Also match the virtual client entry which doesn't have file path
+                  (filePath) => !filePath,
+                ],
               },
               use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
             }),

packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts

@@ -6,13 +6,15 @@ export default async function transformSource(this: any): Promise<string> {
     modules = modules ? [modules] : []
   }
 
-  return (
-    modules
-      .map(
-        (request: string) => `import(/* webpackMode: "eager" */ '${request}')`
-      )
-      .join(';') +
+  const requests = modules as string[]
+  const code =
+    requests
+      .map((request) => `import(/* webpackMode: "eager" */ '${request}')`)
+      .join(';\n') +
     `
+    export const __next_rsc_css__ = ${JSON.stringify(
+      requests.filter((request) => request.endsWith('.css'))
+    )};
     export const __next_rsc__ = {
       server: false,
       __webpack_require__
@@ -25,5 +27,6 @@ export default async function transformSource(this: any): Promise<string> {
       : ssr
       ? `export const __N_SSP = true;`
       : `export const __N_SSG = true;`)
-  )
+
+  return code
 }

packages/next/build/webpack/plugins/client-entry-plugin.ts

@@ -22,6 +22,7 @@ type Options = {
 const PLUGIN_NAME = 'ClientEntryPlugin'
 
 export const injectedClientEntries = new Map()
+const regexCssGlobal = /(?<!\.module)\.css$/
 
 export class ClientEntryPlugin {
   dev: boolean = false
@@ -77,11 +78,15 @@ export class ClientEntryPlugin {
           const module = compilation.moduleGraph.getResolvedModule(dependency)
           if (!module) return
 
-          if (visited.has(module.userRequest)) return
-          visited.add(module.userRequest)
+          const modRequest = module.userRequest
+          if (visited.has(modRequest)) return
+          visited.add(modRequest)
 
-          if (clientComponentRegex.test(module.userRequest)) {
-            clientComponentImports.push(module.userRequest)
+          if (
+            clientComponentRegex.test(modRequest) ||
+            regexCssGlobal.test(modRequest)
+          ) {
+            clientComponentImports.push(modRequest)
           }
 
           compilation.moduleGraph
@@ -149,13 +154,12 @@ export class ClientEntryPlugin {
           )
         }
 
-        // Inject the entry to the server compiler.
+        // Inject the entry to the server compiler (__sc_client__).
         const clientComponentEntryDep = (
           webpack as any
-        ).EntryPlugin.createDependency(
-          clientLoader,
-          name + NEXT_CLIENT_SSR_ENTRY_SUFFIX
-        )
+        ).EntryPlugin.createDependency(clientLoader, {
+          name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
+        })
         promises.push(
           new Promise<void>((res, rej) => {
             compilation.addEntry(

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -9,7 +9,6 @@ import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 import { FLIGHT_MANIFEST } from '../../../shared/lib/constants'
 import { clientComponentRegex } from '../loaders/utils'
 import { relative } from 'path'
-import { getEntrypointFiles } from './build-manifest-plugin'
 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
 
 // This is the module that will be used to anchor all client references to.
@@ -79,13 +78,7 @@ export class FlightManifestPlugin {
         mod: any
       ) {
         const resource: string = mod.resource
-
-        // TODO: Hook into deps instead of the target module.
-        // That way we know by the type of dep whether to include.
-        // It also resolves conflicts when the same module is in multiple chunks.
-        if (!resource || !clientComponentRegex.test(resource)) {
-          return
-        }
+        if (!resource) return
 
         const moduleExports: any = manifest[resource] || {}
         const moduleIdMapping: any = manifest.__ssr_module_mapping__ || {}
@@ -98,6 +91,66 @@ export class FlightManifestPlugin {
         if (!ssrNamedModuleId.startsWith('.'))
           ssrNamedModuleId = `./${ssrNamedModuleId}`
 
+        if (
+          mod.request &&
+          /(?<!\.module)\.css$/.test(mod.request) &&
+          ((dev &&
+            mod.request.includes(
+              'webpack/loaders/next-style-loader/index.js'
+            )) ||
+            (!dev &&
+              mod.request.includes('webpack/loaders/css-loader/src/index.js')))
+        ) {
+          if (!manifest[resource]) {
+            if (dev) {
+              const chunkIdNameMapping = (chunk.ids || []).map((chunkId) => {
+                return (
+                  chunkId +
+                  ':' +
+                  (chunk.name || chunk.id) +
+                  (dev ? '' : '-' + chunk.hash)
+                )
+              })
+              manifest[resource] = {
+                default: {
+                  id,
+                  name: 'default',
+                  chunks: chunkIdNameMapping,
+                },
+              }
+              moduleIdMapping[id]['default'] = {
+                id: ssrNamedModuleId,
+                name: 'default',
+                chunks: chunkIdNameMapping,
+              }
+              manifest.__ssr_module_mapping__ = moduleIdMapping
+            } else {
+              const chunks = [...chunk.files].filter((f) => f.endsWith('.css'))
+              manifest[resource] = {
+                default: {
+                  id,
+                  name: 'default',
+                  chunks,
+                },
+              }
+              moduleIdMapping[id]['default'] = {
+                id: ssrNamedModuleId,
+                name: 'default',
+                chunks,
+              }
+              manifest.__ssr_module_mapping__ = moduleIdMapping
+            }
+          }
+          return
+        }
+
+        // TODO: Hook into deps instead of the target module.
+        // That way we know by the type of dep whether to include.
+        // It also resolves conflicts when the same module is in multiple chunks.
+        if (!clientComponentRegex.test(resource)) {
+          return
+        }
+
         const exportsInfo = compilation.moduleGraph.getExportsInfo(mod)
         const cjsExports = [
           ...new Set(
@@ -132,16 +185,36 @@ export class FlightManifestPlugin {
           )
           .filter((name) => name !== null)
 
-        // Get all CSS files imported in that chunk.
+        // Get all CSS files imported from the module's dependencies.
+        const visitedCss = new Set()
         const cssChunks: string[] = []
-        for (const entrypoint of chunk.groupsIterable) {
-          const files = getEntrypointFiles(entrypoint)
-          for (const file of files) {
-            if (file.endsWith('.css')) {
-              cssChunks.push(file)
-            }
+
+        function collectClientImportedCss(module: any) {
+          if (!module) return
+
+          const modRequest = module.userRequest
+          if (visitedCss.has(modRequest)) return
+          visitedCss.add(modRequest)
+
+          if (/\.css$/.test(modRequest)) {
+            // collect relative imported css chunks
+            compilation.chunkGraph.getModuleChunks(module).forEach((c) => {
+              ;[...c.files]
+                .filter((file) => file.endsWith('.css'))
+                .forEach((file) => cssChunks.push(file))
+            })
           }
+
+          const connections = Array.from(
+            compilation.moduleGraph.getOutgoingConnections(module)
+          )
+          connections.forEach((connection) => {
+            collectClientImportedCss(
+              compilation.moduleGraph.getResolvedModule(connection.dependency!)
+            )
+          })
         }
+        collectClientImportedCss(mod)
 
         moduleExportedKeys.forEach((name) => {
           let requiredChunks = []

packages/next/client/app-index.tsx

@@ -113,7 +113,49 @@ function useInitialServerResponse(cacheKey: string) {
       nextServerDataRegisterWriter(controller)
     },
   })
-  const newResponse = createFromReadableStream(readable)
+
+  async function loadCss(cssChunkInfoJson: string) {
+    const data = JSON.parse(cssChunkInfoJson)
+    await Promise.all(
+      data.chunks.map((chunkId: string) => {
+        // load css related chunks
+        return (self as any).__next_chunk_load__(chunkId)
+      })
+    )
+    // import css in dev when it's wrapped by style loader
+    if (process.env.NODE_ENV === 'development') {
+      ;(self as any).__next_require__(data.id)
+    }
+  }
+
+  const loadCssFromStreamData = (data: string) => {
+    const seg = data.split(':')
+    if (seg[0] === 'CSS') {
+      loadCss(seg.slice(1).join(':'))
+    }
+  }
+
+  let buffer = ''
+  const loadCssFromFlight = new TransformStream({
+    transform(chunk, controller) {
+      const data = new TextDecoder().decode(chunk)
+      buffer += data
+      let index
+      while ((index = buffer.indexOf('\n')) !== -1) {
+        const line = buffer.slice(0, index)
+        buffer = buffer.slice(index + 1)
+        loadCssFromStreamData(line)
+      }
+      controller.enqueue(chunk)
+    },
+    flush() {
+      loadCssFromStreamData(buffer)
+    },
+  })
+
+  const newResponse = createFromReadableStream(
+    readable.pipeThrough(loadCssFromFlight)
+  )
 
   rscCache.set(cacheKey, newResponse)
   return newResponse

packages/next/server/app-render.tsx

@@ -16,6 +16,7 @@ import {
   renderToInitialStream,
   createBufferedTransformStream,
   continueFromInitialStream,
+  createSuffixStream,
 } from './node-web-streams-helper'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { tryGetPreviewData } from './api-utils/node'
@@ -217,8 +218,9 @@ function createServerComponentRenderer(
     globalThis.__next_chunk_load__ = () => Promise.resolve()
   }
 
-  let RSCStream: ReadableStream<Uint8Array>
+  const cssFlight = getCssFlight(ComponentMod, serverComponentManifest)
 
+  let RSCStream: ReadableStream<Uint8Array>
   const createRSCStream = () => {
     if (!RSCStream) {
       RSCStream = renderToReadableStream(
@@ -227,7 +229,7 @@ function createServerComponentRenderer(
         {
           context: serverContexts,
         }
-      )
+      ).pipeThrough(createSuffixStream(cssFlight))
     }
     return RSCStream
   }
@@ -327,6 +329,30 @@ function getSegmentParam(segment: string): {
   return null
 }
 
+function getCssFlight(ComponentMod: any, serverComponentManifest: any) {
+  const importedServerCSSFiles: string[] =
+    ComponentMod.__client__?.__next_rsc_css__ || []
+
+  const cssFiles = importedServerCSSFiles.map(
+    (css) => serverComponentManifest[css].default
+  )
+  if (process.env.NODE_ENV === 'development') {
+    return cssFiles.map((css) => `CSS:${JSON.stringify(css)}`).join('\n')
+  }
+
+  const cssSet = cssFiles.reduce((res, css) => {
+    res.add(...css.chunks)
+    return res
+  }, new Set())
+
+  const cssFlight = Array.from(cssSet)
+    .map(
+      (css) => `CSS:${JSON.stringify({ id: 'css', name: '', chunks: [css] })}`
+    )
+    .join('\n')
+  return cssFlight
+}
+
 export async function renderToHTML(
   req: IncomingMessage,
   res: ServerResponse,
@@ -730,6 +756,7 @@ export async function renderToHTML(
       return [actualSegment]
     }
 
+    const cssFlight = getCssFlight(ComponentMod, serverComponentManifest)
     const flightData: FlightData = [
       // TODO: change walk to output without ''
       walkTreeWithFlightRouterState(tree, {}, providedFlightRouterState).slice(
@@ -738,9 +765,9 @@ export async function renderToHTML(
     ]
 
     return new RenderResult(
-      renderToReadableStream(flightData, serverComponentManifest).pipeThrough(
-        createBufferedTransformStream()
-      )
+      renderToReadableStream(flightData, serverComponentManifest)
+        .pipeThrough(createSuffixStream(cssFlight))
+        .pipeThrough(createBufferedTransformStream())
     )
   }
 

packages/next/server/load-components.ts

@@ -125,12 +125,13 @@ export async function loadComponents(
   if (hasServerComponents) {
     try {
       // Make sure to also load the client entry in cache.
-      await requirePage(
+      const __client__ = await requirePage(
         normalizePagePath(pathname) + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
         distDir,
         serverless,
         appDirEnabled
       )
+      ComponentMod.__client__ = __client__
     } catch (_) {
       // This page might not be a server component page, so there is no
       // client entry to load.

test/e2e/app-dir/app/app/dashboard/global.css

@@ -0,0 +1,3 @@
+.dangerous-text {
+  color: red;
+}

test/e2e/app-dir/app/app/dashboard/layout.server.js

@@ -1,8 +1,11 @@
+import './style.css'
+import './global.css'
+
 export default function DashboardLayout(props) {
   return (
-    <>
-      <h1>Dashboard</h1>
+    <div className="dangerous-text">
+      <h1 className="green">Dashboard</h1>
       {props.children}
-    </>
+    </div>
   )
 }

test/e2e/app-dir/app/app/dashboard/page.server.js

@@ -2,6 +2,7 @@ export default function DashboardPage(props) {
   return (
     <>
       <p>hello from app/dashboard</p>
+      <p className='green'>this is green</p>
     </>
   )
 }

test/e2e/app-dir/app/app/dashboard/style.css

@@ -0,0 +1,3 @@
+.green {
+  color: green;
+}