Fix CSSM loader applying for both pages and app (#38761)

## Bug x-ref: #38691 * Previous configured loader.issue results into a single function and will bail during next build, tune the rule set conditions to make it work for both pages and app dir * prefer to use `mod.resourceResolveData?.path` instead of `mod.userRequest` since userRquest contains the applied loaders info - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md`
vercel · Jul 18, 2022 · 7e5cb51 · 7e5cb51
1 parent 54f8724
commit 7e5cb51
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 21 deletions.
diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -22,7 +22,7 @@ const regexCssModules = /\.module\.css$/
 const regexSassGlobal = /(?<!\.module)\.(scss|sass)$/
 const regexSassModules = /\.module\.(scss|sass)$/
 // Also match the virtual client entry which doesn't have file path
-const clientEntryMatcher = (file: string) => !file
+const regexClientEntry = /^$/
 
 /**
  * Mark a rule as removable if built-in CSS support is disabled
@@ -215,13 +215,12 @@ export const css = curry(async function css(
           // CSS Modules are only supported in the user's application. We're
           // not yet allowing CSS imports _within_ `node_modules`.
           issuer: {
-            or: [
+            and: [
               {
-                and: [ctx.rootDirectory],
-                not: [/node_modules/],
+                or: [ctx.rootDirectory, regexClientEntry],
               },
-              clientEntryMatcher,
             ],
+            not: [/node_modules/],
           },
           use: getCssModuleLoader(ctx, lazyPostCSSInitializer),
         }),
@@ -369,9 +368,13 @@ export const css = curry(async function css(
               sideEffects: true,
               test: regexCssGlobal,
               issuer: {
-                or: [
-                  { and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/] },
-                  clientEntryMatcher,
+                and: [
+                  {
+                    or: [
+                      { and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/] },
+                      regexClientEntry,
+                    ],
+                  },
                 ],
               },
               use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
@@ -386,10 +389,8 @@ export const css = curry(async function css(
               sideEffects: false,
               test: regexCssModules,
               issuer: {
-                or: [
-                  { and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/] },
-                  clientEntryMatcher,
-                ],
+                and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/],
+                or: [regexClientEntry],
               },
               use: getCssModuleLoader(ctx, lazyPostCSSInitializer),
             }),
@@ -429,12 +430,8 @@ export const css = curry(async function css(
             ? {
                 // If it's inside the app dir, but not importing from a layout file,
                 // throw an error.
-                or: [
-                  {
-                    and: [ctx.rootDirectory],
-                    not: [/layout(\.client|\.server)?\.(js|mjs|jsx|ts|tsx)$/],
-                  },
-                ],
+                and: [ctx.rootDirectory],
+                not: [/layout(\.client|\.server)?\.(js|mjs|jsx|ts|tsx)$/],
               }
             : undefined,
           use: {

diff --git a/packages/next/build/webpack/plugins/client-entry-plugin.ts b/packages/next/build/webpack/plugins/client-entry-plugin.ts
@@ -87,9 +87,9 @@ export class ClientEntryPlugin {
             !rawRequest.startsWith('.') &&
             !rawRequest.startsWith('/')
               ? rawRequest
-              : mod.userRequest
+              : mod.resourceResolveData?.path
 
-          if (visited.has(modRequest)) return
+          if (!modRequest || visited.has(modRequest)) return
           visited.add(modRequest)
 
           if (

diff --git a/test/e2e/app-dir/app/pages/index.js b/test/e2e/app-dir/app/pages/index.js
@@ -1,8 +1,10 @@
 import Link from 'next/link'
+import styles from '../styles/shared.module.css'
+
 export default function Page(props) {
   return (
     <>
-      <p>hello from pages/index</p>
+      <p className={styles.content}>hello from pages/index</p>
       <Link href="/dashboard">Dashboard</Link>
     </>
   )

diff --git a/test/e2e/app-dir/app/styles/shared.module.css b/test/e2e/app-dir/app/styles/shared.module.css
@@ -0,0 +1,3 @@
+.content {
+  color: blueviolet;
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
@@ -23,6 +23,7 @@ describe('app dir', () => {
     next = await createNext({
       files: {
         public: new FileRef(path.join(__dirname, 'app/public')),
+        styles: new FileRef(path.join(__dirname, 'app/styles')),
         pages: new FileRef(path.join(__dirname, 'app/pages')),
         app: new FileRef(path.join(__dirname, 'app/app')),
         'next.config.js': new FileRef(