Fix CSS modules imports from outside of the root directory

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,

test/e2e/app-dir/app-alias/next.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   experimental: {
     appDir: true,
+    transpileModules: ['ui'],
   },
 }

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)')
+  })
 })

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>

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 />
+}

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'],
   },
 }

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>
+}

test/e2e/app-dir/rsc-external/node_modules_bak/global-css/package.json → test/e2e/app-dir/rsc-external/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"
   }
 }

test/e2e/app-dir/rsc-external/node_modules_bak/css/styles.module.css

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

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 />
+}

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 () => {

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 () => {