Add a flag to disable MergeCssChunksPlugin (#62746)

This is currently on by default, but this adds a flag to allow disabling
it if it causes issues with your application's CSS.

Closes NEXT-2664

packages/next/src/build/webpack-config.ts

@@ -1897,7 +1897,10 @@ export default async function getBaseWebpackConfig(
         new NextFontManifestPlugin({
           appDir,
         }),
-      !dev && isClient && new MergeCssChunksPlugin(),
+      !dev &&
+        isClient &&
+        config.experimental.mergeCssChunks &&
+        new MergeCssChunksPlugin(),
       !dev &&
         isClient &&
         new (require('./webpack/plugins/telemetry-plugin').TelemetryPlugin)(

packages/next/src/server/config-schema.ts

@@ -276,6 +276,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         linkNoTouchStart: z.boolean().optional(),
         manualClientBasePath: z.boolean().optional(),
         middlewarePrefetch: z.enum(['strict', 'flexible']).optional(),
+        mergeCssChunks: z.boolean().optional(),
         navigationRAF: z.boolean().optional(),
         nextScriptWorkers: z.boolean().optional(),
         // The critter option is unknown, use z.any() here

packages/next/src/server/config-shared.ts

@@ -193,6 +193,11 @@ export interface ExperimentalConfig {
   swrDelta?: SwrDelta
   middlewarePrefetch?: 'strict' | 'flexible'
   manualClientBasePath?: boolean
+  /**
+   * This will enable a plugin that attempts to keep CSS entries below a certain amount
+   * by merging smaller chunks into larger ones
+   */
+  mergeCssChunks?: boolean
   /**
    * @deprecated use config.cacheHandler instead
    */
@@ -904,6 +909,7 @@ export const defaultConfig: NextConfig = {
     missingSuspenseWithCSRBailout: true,
     optimizeServerReact: false,
     useEarlyImport: false,
+    mergeCssChunks: true,
   },
 }