vercel · ztanner · Nov 27, 2024 · Nov 27, 2024
diff --git a/docs/01-app/03-api-reference/05-config/01-next-config-js/cssChunking.mdx b/docs/01-app/03-api-reference/05-config/01-next-config-js/cssChunking.mdx
@@ -35,6 +35,7 @@ module.exports = nextConfig
 
 - **`'loose'` (default)**: Next.js will try to merge CSS files whenever possible, determining explicit and implicit dependencies between files from import order to reduce the number of chunks and therefore the number of requests.
 - **`'strict'`**: Next.js will load CSS files in the correct order they are imported into your files, which can lead to more chunks and requests.
+- **`'disabled'**: Next.js will not attempt to merge or re-order your CSS files.
 
 You may consider using `'strict'` if you run into unexpected CSS behavior. For example, if you import `a.css` and `b.css` in different files using a different `import` order (`a` before `b`, or `b` before `a`), `'loose'` will merge the files in any order and assume there are no dependencies between them. However, if `b.css` depends on `a.css`, you may want to use `'strict'` to prevent the files from being merged, and instead, load them in the order they are imported - which can result in more chunks and requests.
 

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -1927,6 +1927,7 @@ export default async function getBaseWebpackConfig(
         }),
       !dev &&
         isClient &&
+        config.experimental.cssChunking !== 'disabled' &&
         new CssChunkingPlugin(config.experimental.cssChunking === 'strict'),
       !dev &&
         isClient &&

diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
@@ -328,7 +328,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         manualClientBasePath: z.boolean().optional(),
         middlewarePrefetch: z.enum(['strict', 'flexible']).optional(),
         multiZoneDraftMode: z.boolean().optional(),
-        cssChunking: z.enum(['strict', 'loose']).optional(),
+        cssChunking: z.enum(['strict', 'loose', 'disabled']).optional(),
         nextScriptWorkers: z.boolean().optional(),
         // The critter option is unknown, use z.any() here
         optimizeCss: z.union([z.boolean(), z.any()]).optional(),

diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
@@ -302,7 +302,7 @@ export interface ExperimentalConfig {
    * An alternative is 'strict', which will try to keep correct ordering as
    * much as possible, even when this leads to many requests.
    */
-  cssChunking?: 'strict' | 'loose'
+  cssChunking?: 'strict' | 'loose' | 'disabled'
   disablePostcssPresetEnv?: boolean
   cpus?: number
   memoryBasedWorkersCount?: boolean
@@ -1090,6 +1090,7 @@ export const defaultConfig: NextConfig = {
       remote: process.env.NEXT_REMOTE_CACHE_HANDLER_PATH,
       static: process.env.NEXT_STATIC_CACHE_HANDLER_PATH,
     },
+    cssChunking: 'loose',
     multiZoneDraftMode: false,
     appNavFailHandling: Boolean(process.env.NEXT_PRIVATE_FLYING_SHUTTLE),
     flyingShuttle: Boolean(process.env.NEXT_PRIVATE_FLYING_SHUTTLE)

diff --git a/test/e2e/app-dir/css-chunking/app/globals.css b/test/e2e/app-dir/css-chunking/app/globals.css
@@ -0,0 +1,12 @@
+:root {
+  --maxWidth: 1210px;
+}
+
+html,
+body {
+  background: #000;
+}
+
+a {
+  color: aqua;
+}
diff --git a/test/e2e/app-dir/css-chunking/app/layout.tsx b/test/e2e/app-dir/css-chunking/app/layout.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import React from 'react'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/css-chunking/app/other/otherPage.module.css b/test/e2e/app-dir/css-chunking/app/other/otherPage.module.css
@@ -0,0 +1,3 @@
+.otherPage {
+  color: crimson;
+}
diff --git a/test/e2e/app-dir/css-chunking/app/other/page.tsx b/test/e2e/app-dir/css-chunking/app/other/page.tsx
@@ -0,0 +1,10 @@
+import InnerWrapper from '../../components/inner-wrapper'
+import styles from './otherPage.module.css'
+
+export default async function OtherPage() {
+  return (
+    <InnerWrapper>
+      <h1 className={styles.otherPage}>Other Page Title</h1>
+    </InnerWrapper>
+  )
+}
diff --git a/test/e2e/app-dir/css-chunking/app/page.module.css b/test/e2e/app-dir/css-chunking/app/page.module.css
@@ -0,0 +1,4 @@
+.h1 {
+  background: antiquewhite;
+  color: #1a1a1a;
+}
diff --git a/test/e2e/app-dir/css-chunking/app/page.tsx b/test/e2e/app-dir/css-chunking/app/page.tsx
@@ -0,0 +1,16 @@
+import styles from './page.module.css'
+import InnerWrapper from '../components/inner-wrapper'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div className={styles.page}>
+      <InnerWrapper>
+        <h1 className={styles.h1}>Home Page</h1>
+        <Link href="./other" prefetch={false}>
+          Other page
+        </Link>
+      </InnerWrapper>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-chunking/components/inner-wrapper/index.tsx b/test/e2e/app-dir/css-chunking/components/inner-wrapper/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './innerWrapper.module.css'
+
+export default function InnerWrapper({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <div className={styles.innerWrapper}>{children}</div>
+}
diff --git a/test/e2e/app-dir/css-chunking/components/inner-wrapper/innerWrapper.module.css b/test/e2e/app-dir/css-chunking/components/inner-wrapper/innerWrapper.module.css
@@ -0,0 +1,7 @@
+.innerWrapper {
+  max-width: var(--maxWidth);
+  margin: 0 auto;
+  position: relative;
+  padding-left: 30px;
+  padding-right: 30px;
+}
diff --git a/test/e2e/app-dir/css-chunking/css-chunking.test.ts b/test/e2e/app-dir/css-chunking/css-chunking.test.ts
@@ -0,0 +1,21 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('css-chunking', () => {
+  const { next } = nextTestSetup({ files: __dirname })
+
+  // this test asserts that all the emitted CSS files for the index page
+  // do not contain styles for the `/other` page, which can happen
+  // when the CSSChunkingPlugin is enabled and styles are shared across
+  // both routes.
+  it('should be possible to disable the chunking plugin', async () => {
+    const $ = await next.render$('/')
+    const stylesheets = $('link[rel="stylesheet"]')
+    stylesheets.each(async (_, element) => {
+      const href = element.attribs.href
+      const result = await next.fetch(href)
+      const css = await result.text()
+
+      expect(css).not.toContain('.otherPage')
+    })
+  })
+})
diff --git a/test/e2e/app-dir/css-chunking/next.config.js b/test/e2e/app-dir/css-chunking/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    cssChunking: 'disabled',
+  },
+}
+
+module.exports = nextConfig