Fix CSS modules imports not collected due to race conditions (#42392)

This PR fixes the bug reported by @hanneslund (reproduction:
https://github.com/hanneslund/css-mod-import-test).

There can be multiple modules with the same resource, some of them can
be created via plugins (extracted by the mini-css plugin) and some can
be directly transformed via loaders (e.g. the CSS modules loader). In
these cases, we need to merge the resources generated by all of them.

## 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)

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -191,15 +191,22 @@ 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,
                 name: 'default',
                 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) {

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

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