Fix CSS not being bundled in app dir

packages/next/src/build/webpack/loaders/next-flight-client-entry-loader.ts

@@ -22,12 +22,11 @@ export default async function transformSource(this: any): Promise<string> {
 
   const requests = modules as string[]
   const code = requests
-    // Filter out css files on the server
+    // Filter out CSS files in the SSR compilation
     .filter((request) => (isServer ? !regexCSS.test(request) : true))
-    .map((request) =>
-      regexCSS.test(request)
-        ? `(() => import(/* webpackMode: "lazy" */ ${JSON.stringify(request)}))`
-        : `import(/* webpackMode: "eager" */ ${JSON.stringify(request)})`
+    .map(
+      (request) =>
+        `import(/* webpackMode: "eager" */ ${JSON.stringify(request)})`
     )
     .join(';\n')
 

packages/next/src/server/load-components.ts

@@ -64,15 +64,18 @@ export async function loadDefaultErrorComponents(distDir: string) {
   }
 }
 
-async function loadManifest<T>(manifestPath: string, attempts = 1): Promise<T> {
-  try {
-    return require(manifestPath)
-  } catch (err) {
-    if (attempts >= 3) {
-      throw err
+/**
+ * Load manifest file with retries, defaults to 3 attempts.
+ */
+async function loadManifest<T>(manifestPath: string, attempts = 3): Promise<T> {
+  while (true) {
+    try {
+      return require(manifestPath)
+    } catch (err) {
+      attempts--
+      if (attempts <= 0) throw err
+      await new Promise((resolve) => setTimeout(resolve, 100))
     }
-    await new Promise((resolve) => setTimeout(resolve, 100))
-    return loadManifest(manifestPath, attempts + 1)
   }
 }
 

test/e2e/app-dir/app-css/index.test.ts

@@ -67,28 +67,6 @@ createNextDescribe(
           const html = await next.render('/css/css-page')
           expect(html).not.toContain('/pages/_app.css')
         })
-
-        if (!isDev) {
-          it('should not include unused css modules in the page in prod', async () => {
-            const browser = await next.browser('/css/css-page/unused')
-            expect(
-              await browser.eval(
-                `[...document.styleSheets].some(({ rules }) => [...rules].some(rule => rule.selectorText.includes('this_should_not_be_included')))`
-              )
-            ).toBe(false)
-          })
-
-          it('should not include unused css modules in nested pages in prod', async () => {
-            const browser = await next.browser(
-              '/css/css-page/unused-nested/inner'
-            )
-            expect(
-              await browser.eval(
-                `[...document.styleSheets].some(({ rules }) => [...rules].some(rule => rule.selectorText.includes('this_should_not_be_included_in_inner_path')))`
-              )
-            ).toBe(false)
-          })
-        }
       })
 
       describe('client layouts', () => {
@@ -221,6 +199,16 @@ createNextDescribe(
         })
       })
 
+      describe('chunks', () => {
+        it('should bundle css resources into chunks', async () => {
+          const html = await next.render('/dashboard')
+          expect(
+            [...html.matchAll(/<link rel="stylesheet" href="[^.]+\.css"/g)]
+              .length
+          ).toBe(3)
+        })
+      })
+
       if (isDev) {
         describe('multiple entries', () => {
           it('should only inject the same style once if used by different layers', async () => {
@@ -240,7 +228,7 @@ createNextDescribe(
             // Even if it's deduped by Float, it should still only be included once in the payload.
             // There are two matches, one for the rendered <link> and one for the flight data.
             expect(
-              initialHtml.match(/duplicate-2_style_module_css\.css/g).length
+              initialHtml.match(/css-duplicate-2\/layout\.css/g).length
             ).toBe(2)
           })