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,67 @@ export class FlightManifestPlugin {
         if (!ssrNamedModuleId.startsWith('.'))
           ssrNamedModuleId = `./${ssrNamedModuleId}`
 
+        if (
+          mod.request &&
+          /(?<!\.module)\.css$/.test(mod.request) &&
+          (dev
+            ? mod.loaders.some((item: any) =>
+                item.loader.includes('next-style-loader/index.js')
+              )
+            : mod.loaders.some((item: any) =>
+                item.loader.includes('mini-css-extract-plugin/loader.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 +186,36 @@ export class FlightManifestPlugin {
           )
           .filter((name) => name !== null)
 
-        // Get all CSS files imported in that chunk.
-        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)
-            }
+        // Get all CSS files imported from the module's dependencies.
+        const visitedModule = new Set()
+        const cssChunks: Set<string> = new Set()
+
+        function collectClientImportedCss(module: any) {
+          if (!module) return
+
+          const modRequest = module.userRequest
+          if (visitedModule.has(modRequest)) return
+          visitedModule.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.add(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 = []
@@ -167,7 +241,7 @@ export class FlightManifestPlugin {
             moduleExports[name] = {
               id,
               name,
-              chunks: requiredChunks.concat(cssChunks),
+              chunks: requiredChunks.concat([...cssChunks]),
             }
           }
           if (!moduleIdMapping[id][name]) {

packages/next/client/app-index.tsx

@@ -30,8 +30,7 @@ __webpack_require__.u = (chunkId: any) => {
 self.__next_require__ = __webpack_require__
 
 // eslint-disable-next-line no-undef
-// @ts-expect-error TODO: fix type
-self.__next_chunk_load__ = (chunk) => {
+;(self as any).__next_chunk_load__ = (chunk: string) => {
   if (chunk.endsWith('.css')) {
     const link = document.createElement('link')
     link.rel = 'stylesheet'
@@ -153,7 +152,52 @@ 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)
+      })
+    )
+    // In development mode, import css in dev when it's wrapped by style loader.
+    // In production mode, css are standalone chunk that doesn't need to be imported.
+    if (data.id) {
+      ;(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)
+      }
+      if (!data.startsWith('CSS:')) {
+        controller.enqueue(chunk)
+      }
+    },
+    flush() {
+      loadCssFromStreamData(buffer)
+    },
+  })
+
+  const newResponse = createFromReadableStream(
+    readable.pipeThrough(loadCssFromFlight)
+  )
 
   rscCache.set(cacheKey, newResponse)
   return newResponse