Fix build of large css with Webpack (#1844)

* Fix build of large css with Webpack

* Rename to isCss

plugins/plugin-webpack/plugin.js

@@ -97,6 +97,7 @@ function emitHTMLFiles({doms, jsEntries, stats, baseUrl, buildDirectory, htmlMin
 }
 
 function getSplitChunksConfig({numEntries}) {
+  const isCss = module => module.type === `css/mini-extract`
   /**
    * Implements a version of granular chunking, as described at https://web.dev/granular-chunking-nextjs/.
    */
@@ -115,7 +116,7 @@ function getSplitChunksConfig({numEntries}) {
        */
       lib: {
         test(module) {
-          return module.size() > 100000 && /web_modules[/\\]/.test(module.identifier());
+          return !isCss(module) && module.size() > 100000 && /web_modules[/\\]/.test(module.identifier());
         },
         name(module) {
           /**
@@ -136,13 +137,19 @@ function getSplitChunksConfig({numEntries}) {
       },
       // modules used by all entrypoints end up in commons
       commons: {
+        test(module) {
+          return !isCss(module)
+        },
         name: 'commons',
         // don't create a commons chunk until there are 2+ entries
         minChunks: Math.max(2, numEntries),
         priority: 20,
       },
       // modules used by multiple chunks can be pulled into shared chunks
       shared: {
+        test(module) {
+          return !isCss(module)
+        },
         name(module, chunks) {
           const hash = crypto
             .createHash(`sha1`)
@@ -155,6 +162,15 @@ function getSplitChunksConfig({numEntries}) {
         minChunks: 2,
         reuseExistingChunk: true,
       },
+      // Bundle all css & lazy css into one stylesheet to make sure lazy components do not break
+      styles: {
+        test(module) {
+          return isCss(module)
+        },
+        name: `styles`,
+        priority: 40,
+        enforce: true,
+      },
     },
   };
 }