Fixes webpack-contrib#147

Author: rowanoulton

src/index.js

@@ -1,3 +1,4 @@
+import path from 'path';
 import webpack from 'webpack';
 import sources from 'webpack-sources';
 
@@ -48,6 +49,7 @@ class CssModule extends webpack.Module {
     this.content = dependency.content;
     this.media = dependency.media;
     this.sourceMap = dependency.sourceMap;
+    this.disconnectedGroups = {};
   }
 
   // no source() so webpack doesn't do add stuff to the bundle
@@ -188,8 +190,76 @@ class MiniCssExtractPlugin {
               hash: chunk.contentHash[MODULE_TYPE],
             });
           }
+
+          const splitChunks = compilation.chunks.filter(chunk => {
+            return (
+              chunk.chunkReason && chunk.chunkReason.includes("split chunk")
+            );
+          });
+
+          splitChunks.forEach((splitChunk) => {
+            const modulesWeCouldRemove = [];
+            const nonCssModules = Array.from(splitChunk.modulesIterable).filter((mod) => {
+              return mod.type !== MODULE_TYPE;
+            });
+
+            nonCssModules.forEach((nonCssMod) => {
+              if (
+                nonCssMod._source &&
+                nonCssMod._source._value === `// extracted by ${pluginName}`
+              ) {
+                modulesWeCouldRemove.push(nonCssMod);
+              }
+            });
+
+            // If there's nothing but CSS modules left in this split chunk, remove the whole thing
+            // This will mean that the main template manifest (ie. webpack's boilerplate code) won't
+            // contain any references to these empty modules
+            if (modulesWeCouldRemove.length === nonCssModules.length) {
+              modulesWeCouldRemove.forEach((nonCssMod) => {
+                // Trace all the "reasons" for this module (ie. other modules that depend on it)
+                // then add this module into their respective chunks. This effectively reverses
+                // the work SplitChunksPlugin did to break out the logic into a separate chunk.
+                // Without this step there will be script errors owing to missing dependencies
+                // and adding them back to their origin chunks is harmless as they're empty.
+                nonCssMod.reasons.forEach((reason) => {
+                  reason.module.chunksIterable.forEach((previouslyConnectedChunk) => {
+                    splitChunk.moveModule(nonCssMod, previouslyConnectedChunk);
+                  });
+                });
+              });
+
+              splitChunk.groupsIterable.forEach((group) => {
+                group.removeChunk(splitChunk);
+
+                // Book-keeping
+                this.disconnectedGroups[splitChunk.id] =
+                  this.disconnectedGroups[splitChunk.id] || [];
+                this.disconnectedGroups[splitChunk.id].push(group);
+              });
+            }
+          });
         }
       );
+      compilation.hooks.chunkAsset.tap(pluginName, (chunk, file) => {
+        // If this was a split chunk we disconnected previously
+        if (this.disconnectedGroups[chunk.id]) {
+          if (path.extname(file) === '.css') {
+            this.disconnectedGroups[chunk.id].forEach((group) => {
+              // Add the stylesheet as a file on every chunk that requires it
+              // This ensures plugins like html-webpack-plugin will find and include
+              // split CSS chunks
+              group.chunks.forEach((parentChunk) => {
+                parentChunk.files.push(file);
+              });
+            });
+          } else if (path.extname(file) === '.js') {
+            // Discard empty JS file
+            chunk.files.pop();
+            delete compilation.assets[file];
+          }
+        }
+      });
       compilation.chunkTemplate.hooks.renderManifest.tap(
         pluginName,
         (result, { chunk }) => {