Enable css in server components

vercel · Jul 9, 2022 · c798a53 · c798a53
1 parent 8282c81
commit c798a53
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 10 deletions.
diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/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),
             }),

diff --git a/packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts b/packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts
@@ -6,12 +6,12 @@ export default async function transformSource(this: any): Promise<string> {
     modules = modules ? [modules] : []
   }
 
-  return (
+  const code = (
     modules
       .map(
-        (request: string) => `import(/* webpackMode: "eager" */ '${request}')`
+        (request: string) =>  `import(/* webpackMode: "eager" */ '${request}')`
       )
-      .join(';') +
+      .join(';\n') +
     `
     export const __next_rsc__ = {
       server: false,
@@ -26,4 +26,6 @@ export default async function transformSource(this: any): Promise<string> {
       ? `export const __N_SSP = true;`
       : `export const __N_SSG = true;`)
   )
+
+  return code
 }
diff --git a/packages/next/build/webpack/plugins/client-entry-plugin.ts b/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,12 @@ export class ClientEntryPlugin {
           const module = compilation.moduleGraph.getResolvedModule(dependency)
           if (!module) return
 
-          if (visited.has(module.userRequest)) return
-          visited.add(module.userRequest)
+          const request = module.userRequest
+          if (visited.has(request)) return
+          visited.add(request)
 
-          if (clientComponentRegex.test(module.userRequest)) {
-            clientComponentImports.push(module.userRequest)
+          if (clientComponentRegex.test(request) || regexCssGlobal.test(request)) {
+            clientComponentImports.push(request)
           }
 
           compilation.moduleGraph
@@ -154,7 +156,9 @@ export class ClientEntryPlugin {
           webpack as any
         ).EntryPlugin.createDependency(
           clientLoader,
-          name + NEXT_CLIENT_SSR_ENTRY_SUFFIX
+          {
+            name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX
+          }
         )
         promises.push(
           new Promise<void>((res, rej) => {

diff --git a/test/e2e/app-dir/app/app/dashboard/layout.server.js b/test/e2e/app-dir/app/app/dashboard/layout.server.js
@@ -1,7 +1,9 @@
+import './style.css'
+
 export default function DashboardLayout(props) {
   return (
     <>
-      <h1>Dashboard</h1>
+      <h1 className="green">Dashboard</h1>
       {props.children}
     </>
   )

diff --git a/test/e2e/app-dir/app/app/dashboard/page.server.js b/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>
     </>
   )
 }
diff --git a/test/e2e/app-dir/app/app/dashboard/style.css b/test/e2e/app-dir/app/app/dashboard/style.css
@@ -0,0 +1,3 @@
+.green {
+  color: green;
+}