should not contain pages css in app dir (#44151)

* Filter out the css chunk from `pages/` * add indent for flight manifests in dev mode for development convenience ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
vercel · Dec 19, 2022 · ded93bf · ded93bf
1 parent 723311b
commit ded93bf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
@@ -345,14 +345,18 @@ export class FlightClientEntryPlugin {
         stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH,
       },
       (assets: webpack.Compilation['assets']) => {
-        const manifest = JSON.stringify({
-          ...serverCSSManifest,
-          ...edgeServerCSSManifest,
-          __entry_css__: {
-            ...serverCSSManifest.__entry_css__,
-            ...edgeServerCSSManifest.__entry_css__,
+        const manifest = JSON.stringify(
+          {
+            ...serverCSSManifest,
+            ...edgeServerCSSManifest,
+            __entry_css__: {
+              ...serverCSSManifest.__entry_css__,
+              ...edgeServerCSSManifest.__entry_css__,
+            },
           },
-        })
+          null,
+          this.dev ? 2 : undefined
+        )
         assets[FLIGHT_SERVER_CSS_MANIFEST + '.json'] = new sources.RawSource(
           manifest
         ) as unknown as webpack.sources.RawSource

diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -191,7 +191,9 @@ export class FlightManifestPlugin {
           ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}`
 
         if (isCSSModule) {
-          const chunks = [...chunk.files].filter((f) => f.endsWith('.css'))
+          const chunks = [...chunk.files].filter(
+            (f) => !f.startsWith('static/css/pages/') && f.endsWith('.css')
+          )
           if (!manifest[resource]) {
             manifest[resource] = {
               default: {
@@ -350,7 +352,7 @@ export class FlightManifestPlugin {
     })
 
     const file = 'server/' + FLIGHT_MANIFEST
-    const json = JSON.stringify(manifest)
+    const json = JSON.stringify(manifest, null, this.dev ? 2 : undefined)
 
     ASYNC_CLIENT_MODULES.clear()
 

diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
@@ -1315,6 +1315,11 @@ createNextDescribe(
           ).toBe('rgb(0, 0, 255)')
         })
 
+        it('should not contain pages css in app dir page', async () => {
+          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')