fix test for pages

packages/next/build/webpack/config/blocks/css/index.ts

@@ -274,6 +274,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: [
@@ -285,10 +286,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // CSS Modules are activated via this specific extension.
             test: regexCssModules,
-            // Match CSS modules that are used by the app dir.
-            issuerLayer: (layer: string) =>
-              layer === WEBPACK_LAYERS.server ||
-              layer === WEBPACK_LAYERS.client,
             use: [
               require.resolve('../../../loaders/next-flight-css-dev-loader'),
               ...getCssModuleLoader(ctx, lazyPostCSSInitializer),
@@ -297,10 +294,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.
@@ -309,10 +308,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // Sass Modules are activated via this specific extension.
             test: regexSassModules,
-            // Match CSS modules that are used by the app dir.
-            issuerLayer: (layer: string) =>
-              layer === WEBPACK_LAYERS.server ||
-              layer === WEBPACK_LAYERS.client,
             use: [
               require.resolve('../../../loaders/next-flight-css-dev-loader'),
               ...getCssModuleLoader(

test/e2e/app-dir/rsc-external.test.ts

@@ -145,4 +145,14 @@ describe('app dir - rsc external dependency', () => {
       )
     ).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/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/pages/test-pages.jsx

@@ -0,0 +1,5 @@
+import Foo from 'css/module'
+
+export default function Page() {
+  return <Foo />
+}