Fix CSS modules imports from outside of the root directory (#42106)

Fixes #41856. There is no way to apply those loader rules to specific directories, especially when `transpileModules` is used. This PR changes that to be based on the issuer layer. ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper <jj@jjsweb.site>
vercel · Oct 31, 2022 · 2280a2d · 2280a2d
1 parent 005cf9b
commit 2280a2d
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 40 deletions.
diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -273,6 +273,7 @@ export const css = curry(async function css(
   // CSS Modules support must be enabled on the server and client so the class
   // names are available for SSR or Prerendering.
   if (ctx.hasAppDir && !ctx.isProduction) {
+    // CSS modules
     fns.push(
       loader({
         oneOf: [
@@ -284,16 +285,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // CSS Modules are activated via this specific extension.
             test: regexCssModules,
-            // CSS Modules are only supported in the user's application. We're
-            // not yet allowing CSS imports _within_ `node_modules`.
-            issuer: {
-              and: [
-                {
-                  or: [ctx.rootDirectory, regexClientEntry],
-                },
-              ],
-              not: [/node_modules/],
-            },
             use: [
               require.resolve('../../../loaders/next-flight-css-dev-loader'),
               ...getCssModuleLoader(ctx, lazyPostCSSInitializer),
@@ -302,10 +293,12 @@ export const css = curry(async function css(
         ],
       })
     )
+
+    // Opt-in support for Sass (using .scss or .sass extensions).
     fns.push(
       loader({
         oneOf: [
-          // Opt-in support for Sass (using .scss or .sass extensions).
+          // For app dir, we match both server and client layers.
           markRemovable({
             // Sass Modules should never have side effects. This setting will
             // allow unused Sass to be removed from the production build.
@@ -314,12 +307,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // Sass Modules are activated via this specific extension.
             test: regexSassModules,
-            // Sass Modules are only supported in the user's application. We're
-            // not yet allowing Sass imports _within_ `node_modules`.
-            issuer: {
-              and: [ctx.rootDirectory],
-              not: [/node_modules/],
-            },
             use: [
               require.resolve('../../../loaders/next-flight-css-dev-loader'),
               ...getCssModuleLoader(
@@ -344,16 +331,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // CSS Modules are activated via this specific extension.
             test: regexCssModules,
-            // CSS Modules are only supported in the user's application. We're
-            // not yet allowing CSS imports _within_ `node_modules`.
-            issuer: {
-              and: [
-                {
-                  or: [ctx.rootDirectory, regexClientEntry],
-                },
-              ],
-              not: [/node_modules/],
-            },
             use: getCssModuleLoader(ctx, lazyPostCSSInitializer),
           }),
         ],
@@ -371,12 +348,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // Sass Modules are activated via this specific extension.
             test: regexSassModules,
-            // Sass Modules are only supported in the user's application. We're
-            // not yet allowing Sass imports _within_ `node_modules`.
-            issuer: {
-              and: [ctx.rootDirectory],
-              not: [/node_modules/],
-            },
             use: getCssModuleLoader(
               ctx,
               lazyPostCSSInitializer,

diff --git a/test/e2e/app-dir/app-alias/next.config.js b/test/e2e/app-dir/app-alias/next.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
+    transpileModules: ['ui'],
   },
 }
diff --git a/test/e2e/app-dir/rsc-external.test.ts b/test/e2e/app-dir/rsc-external.test.ts
@@ -135,4 +135,24 @@ describe('app dir - rsc external dependency', () => {
       expect(result).toMatch(/\.css/)
     })
   })
+
+  it('should handle external css modules', async () => {
+    const browser = await webdriver(next.url, '/css/modules')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('h1')).color`
+      )
+    ).toBe('rgb(255, 0, 0)')
+  })
+
+  it('should handle external css modules in pages', async () => {
+    const browser = await webdriver(next.url, '/test-pages')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('h1')).color`
+      )
+    ).toBe('rgb(255, 0, 0)')
+  })
 })
diff --git a/test/e2e/app-dir/rsc-external/app/css/[...slug]/page.js b/test/e2e/app-dir/rsc-external/app/css/[...slug]/page.js
@@ -1,4 +1,4 @@
-import 'global-css/style.css'
+import 'css/style.css'
 
 export default function Page() {
   return <div>hello</div>

diff --git a/test/e2e/app-dir/rsc-external/app/css/modules/page.js b/test/e2e/app-dir/rsc-external/app/css/modules/page.js
@@ -0,0 +1,5 @@
+import Foo from 'css/module'
+
+export default function Page() {
+  return <Foo />
+}
diff --git a/test/e2e/app-dir/rsc-external/next.config.js b/test/e2e/app-dir/rsc-external/next.config.js
@@ -3,6 +3,6 @@ module.exports = {
   experimental: {
     appDir: true,
     serverComponentsExternalPackages: ['conditional-exports-optout'],
-    transpilePackages: ['untranspiled-module'],
+    transpilePackages: ['untranspiled-module', 'css'],
   },
 }
diff --git a/...rnal/node_modules_bak/global-css/index.js → ...sc-external/node_modules_bak/css/index.js b/...rnal/node_modules_bak/global-css/index.js → ...sc-external/node_modules_bak/css/index.js
diff --git a/test/e2e/app-dir/rsc-external/node_modules_bak/css/module.js b/test/e2e/app-dir/rsc-external/node_modules_bak/css/module.js
@@ -0,0 +1,5 @@
+import styles from './styles.module.css'
+
+export default function Foo() {
+  return <h1 className={styles.h1}>Hello</h1>
+}
diff --git a/.../node_modules_bak/global-css/package.json → ...xternal/node_modules_bak/css/package.json b/.../node_modules_bak/global-css/package.json → ...xternal/node_modules_bak/css/package.json
@@ -1,10 +1,11 @@
 {
-  "name": "global-css",
+  "name": "css",
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": "./index.js",
     "./style.css": "./style.css",
+    "./module": "./module.js",
     "./package.json": "./package.json"
   }
 }
diff --git a/...nal/node_modules_bak/global-css/style.css → ...c-external/node_modules_bak/css/style.css b/...nal/node_modules_bak/global-css/style.css → ...c-external/node_modules_bak/css/style.css
diff --git a/test/e2e/app-dir/rsc-external/node_modules_bak/css/styles.module.css b/test/e2e/app-dir/rsc-external/node_modules_bak/css/styles.module.css
@@ -0,0 +1,3 @@
+.h1 {
+  color: red;
+}
diff --git a/test/e2e/app-dir/rsc-external/pages/test-pages.jsx b/test/e2e/app-dir/rsc-external/pages/test-pages.jsx
@@ -0,0 +1,5 @@
+import Foo from 'css/module'
+
+export default function Page() {
+  return <Foo />
+}
diff --git a/test/integration/css-modules/test/index.test.js b/test/integration/css-modules/test/index.test.js
@@ -237,7 +237,7 @@ describe('Can hot reload CSS Module without losing state', () => {
   })
 })
 
-describe('Invalid CSS Module Usage in node_modules', () => {
+describe.skip('Invalid CSS Module Usage in node_modules', () => {
   const appDir = join(fixturesDir, 'invalid-module')
 
   beforeAll(async () => {
@@ -258,7 +258,7 @@ describe('Invalid CSS Module Usage in node_modules', () => {
   })
 })
 
-describe('Invalid Global CSS Module Usage in node_modules', () => {
+describe.skip('Invalid Global CSS Module Usage in node_modules', () => {
   const appDir = join(fixturesDir, 'invalid-global-module')
 
   beforeAll(async () => {

diff --git a/test/integration/scss-modules/test/index.test.js b/test/integration/scss-modules/test/index.test.js
@@ -233,7 +233,7 @@ describe('Can hot reload CSS Module without losing state', () => {
   })
 })
 
-describe('Invalid CSS Module Usage in node_modules', () => {
+describe.skip('Invalid CSS Module Usage in node_modules', () => {
   const appDir = join(fixturesDir, 'invalid-module')
 
   beforeAll(async () => {
@@ -254,7 +254,7 @@ describe('Invalid CSS Module Usage in node_modules', () => {
   })
 })
 
-describe('Invalid CSS Global Module Usage in node_modules', () => {
+describe.skip('Invalid CSS Global Module Usage in node_modules', () => {
   const appDir = join(fixturesDir, 'invalid-global-module')
 
   beforeAll(async () => {