From 56198ed3610f92ae72fa3b945725237f11b4e406 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Thu, 3 Nov 2022 02:39:31 +0100
Subject: [PATCH] fix css modules not collected

---
 .../build/webpack/plugins/flight-manifest-plugin.ts  |  9 ++++++++-
 test/e2e/app-dir/app/app/css/css-client/page.js      | 12 +++++++++++-
 test/e2e/app-dir/index.test.ts                       | 10 ++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
index 70ae2c3ac04a..99859a5bc437 100644
--- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -191,8 +191,8 @@ export class FlightManifestPlugin {
           ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}`
 
         if (isCSSModule) {
+          const chunks = [...chunk.files].filter((f) => f.endsWith('.css'))
           if (!manifest[resource]) {
-            const chunks = [...chunk.files].filter((f) => f.endsWith('.css'))
             manifest[resource] = {
               default: {
                 id,
@@ -200,6 +200,13 @@ export class FlightManifestPlugin {
                 chunks,
               },
             }
+          } else {
+            // It is possible that there are mtuliepl modules with the same resouce,
+            // e.g. extracted by mini-css-extract-plugin. In that case we need to
+            // merge the chunks.
+            manifest[resource].default.chunks = [
+              ...new Set([...manifest[resource].default.chunks, ...chunks]),
+            ]
           }
 
           if (chunkGroup.name) {
diff --git a/test/e2e/app-dir/app/app/css/css-client/page.js b/test/e2e/app-dir/app/app/css/css-client/page.js
index 928ff6bf0e56..c62ea6373f0b 100644
--- a/test/e2e/app-dir/app/app/css/css-client/page.js
+++ b/test/e2e/app-dir/app/app/css/css-client/page.js
@@ -1,7 +1,17 @@
 'use client'
 
+import 'next/link'
+
 import './client-page.css'
+import styles from './inner/ClientComponent.module.css'
 
 export default function Page() {
-  return <h1>Page!!!</h1>
+  return (
+    <>
+      <h1>Page!!!</h1>
+      <div id="css-modules" className={styles.yuge}>
+        huge
+      </div>
+    </>
+  )
 }
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 1e9d30a2e29b..a87c46317ba7 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -1487,6 +1487,16 @@ describe('app dir', () => {
       })
 
       describe('client components', () => {
+        it('should support css modules inside client page', async () => {
+          const browser = await webdriver(next.url, '/css/css-client')
+
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('#css-modules')).fontSize`
+            )
+          ).toBe('100px')
+        })
+
         it('should support css modules inside client components', async () => {
           const browser = await webdriver(next.url, '/css/css-client/inner')