fix: split async CSS correctly

src/index.js

@@ -15,6 +15,7 @@ import {
   mergeOptions,
   isString,
   isFunction,
+  cloneModule,
 } from './lib/helpers';
 
 const NS = path.dirname(fs.realpathSync(__filename));
@@ -26,7 +27,7 @@ class ExtractTextPlugin {
     if (isString(options)) {
       options = { filename: options };
     } else {
-      validateOptions(path.resolve(__dirname, '../schema/plugin.json'), options, 'Extract Text Plugin');
+      validateOptions(path.resolve(__dirname, './schema/plugin.json'), options, 'Extract Text Plugin');
     }
     this.filename = options.filename;
     this.id = options.id != null ? options.id : ++nextId;
@@ -88,7 +89,7 @@ class ExtractTextPlugin {
     if (Array.isArray(options) || isString(options) || typeof options.options === 'object' || typeof options.query === 'object') {
       options = { use: options };
     } else {
-      validateOptions(path.resolve(__dirname, '../schema/loader.json'), options, 'Extract Text Plugin (Loader)');
+      validateOptions(path.resolve(__dirname, './schema/loader.json'), options, 'Extract Text Plugin (Loader)');
     }
     let loader = options.use;
     let before = options.fallback || [];
@@ -126,8 +127,10 @@ class ExtractTextPlugin {
       const filename = this.filename;
       const id = this.id;
       let extractedChunks;
+      let toRemoveModules;
       compilation.plugin('optimize-tree', (chunks, modules, callback) => {
         extractedChunks = chunks.map(() => new Chunk());
+        toRemoveModules = [];
         chunks.forEach((chunk, i) => {
           const extractedChunk = extractedChunks[i];
           extractedChunk.index = i;
@@ -145,28 +148,41 @@ class ExtractTextPlugin {
           const extractedChunk = extractedChunks[chunks.indexOf(chunk)];
           const shouldExtract = !!(options.allChunks || isInitialOrHasNoParents(chunk));
           chunk.sortModules();
-          async.forEach(chunk.mapModules(c => c), (module, callback) => { // eslint-disable-line no-shadow
+          async.forEach(chunk.mapModules(c => c), (module, callback) => { // eslint-disable-line no-shadow, arrow-body-style
             let meta = module[NS];
             if (meta && (!meta.options.id || meta.options.id === id)) {
               const wasExtracted = Array.isArray(meta.content);
               // A stricter `shouldExtract !== wasExtracted` check to guard against cases where a previously extracted
               // module would be extracted twice. Happens when a module is a dependency of an initial and a non-initial
               // chunk. See issue #604
               if (shouldExtract && !wasExtracted) {
-                module[`${NS}/extract`] = shouldExtract; // eslint-disable-line no-path-concat
-                compilation.rebuildModule(module, (err) => {
+                const newModule = cloneModule(module);
+                newModule[`${NS}/extract`] = shouldExtract; // eslint-disable-line no-path-concat
+                compilation.buildModule(newModule, false, newModule, null, (err) => {
                   if (err) {
                     compilation.errors.push(err);
                     return callback();
                   }
-                  meta = module[NS];
+                  meta = newModule[NS];
+                  const identifier = module.identifier();
                   // Error out if content is not an array and is not null
                   if (!Array.isArray(meta.content) && meta.content != null) {
-                    err = new Error(`${module.identifier()} doesn't export content`);
+                    err = new Error(`${identifier} doesn't export content`);
                     compilation.errors.push(err);
                     return callback();
                   }
-                  if (meta.content) { extractCompilation.addResultToChunk(module.identifier(), meta.content, module, extractedChunk); }
+                  if (meta.content) {
+                    extractCompilation.addResultToChunk(identifier, meta.content, module, extractedChunk);
+                    if (toRemoveModules[identifier]) {
+                      toRemoveModules[identifier].chunks.push(chunk);
+                    } else {
+                      toRemoveModules[identifier] = {
+                        module: newModule,
+                        moduleToRemove: module,
+                        chunks: [chunk],
+                      };
+                    }
+                  }
                   callback();
                 });
               } else {
@@ -194,6 +210,29 @@ class ExtractTextPlugin {
           callback();
         });
       });
+
+      compilation.plugin('optimize-module-ids', (modules) => {
+        modules.forEach((module) => {
+          const data = toRemoveModules[module.identifier()];
+          if (data) {
+            const oldModuleId = module.id;
+            const newModule = cloneModule(module);
+            newModule.id = oldModuleId;
+            newModule._source = data.module._source; // eslint-disable-line no-underscore-dangle
+            data.chunks.forEach((chunk) => {
+              chunk.removeModule(data.moduleToRemove);
+              const deps = data.moduleToRemove.dependencies;
+              deps.forEach((d) => {
+                if (d.module && d.module.loaders.length > 0) {
+                  chunk.removeModule(d.module);
+                }
+              });
+              chunk.addModule(newModule);
+            });
+          }
+        });
+      });
+
       compilation.plugin('additional-assets', (callback) => {
         extractedChunks.forEach((extractedChunk) => {
           if (extractedChunk.getNumberOfModules()) {

src/lib/helpers.js

@@ -1,3 +1,5 @@
+import NormalModule from 'webpack/lib/NormalModule';
+
 export function isInitialOrHasNoParents(chunk) {
   return chunk.isInitial() || chunk.parents.length === 0;
 }
@@ -28,6 +30,17 @@ export function getOrder(a, b) {
   return 0;
 }
 
+export function cloneModule(module) {
+  return new NormalModule(
+    module.request,
+    module.userRequest,
+    module.rawRequest,
+    module.loaders,
+    module.resource,
+    module.parser,
+  );
+}
+
 export function getLoaderObject(loader) {
   if (isString(loader)) {
     return { loader };

test/__snapshots__/webpack-integration.test.js.snap

@@ -83,6 +83,232 @@ c
 "
 `;
 
+exports[`Webpack Integration Tests multiple-entries-all-async 1`] = `
+"webpackJsonp([0],{
+
+/***/ 1:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(7);
+
+modules.export = function() {
+	return 'Route Homepage';
+};
+
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ })
+
+});"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-all-async 2`] = `
+"webpackJsonp([1],{
+
+/***/ 0:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(6);
+
+modules.export = function() {
+	return 'Route Contact';
+};
+
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ })
+
+});"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-all-async 3`] = `
+"body {
+	background: red;
+}
+.contact {
+	color: black;
+}
+.homepage {
+	color: black;
+}
+"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-all-async 4`] = `
+"body {
+	background: red;
+}
+.contact {
+	color: black;
+}
+.homepage {
+	color: black;
+}
+"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-async 1`] = `
+"webpackJsonp([0],{
+
+/***/ 12:
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(13);
+if(typeof content === 'string') content = [[module.i, content, '']];
+// Prepare cssTransformation
+var transform;
+
+var options = {\\"hmr\\":true}
+options.transform = transform
+// add the styles to the DOM
+var update = __webpack_require__(1)(content, options);
+if(content.locals) module.exports = content.locals;
+// Hot Module Replacement
+if(false) {
+	// When the styles change, update the <style> tags
+	if(!content.locals) {
+		module.hot.accept(\\"!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css\\", function() {
+			var newContent = require(\\"!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css\\");
+			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+			update(newContent);
+		});
+	}
+	// When the module is disposed, remove the <style> tags
+	module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)(false);
+// imports
+
+
+// module
+exports.push([module.i, \\".homepage {\\\\n\\\\tcolor: yellow;\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(12);
+
+modules.export = function() {
+	return 'Route Homepage';
+};
+
+
+/***/ })
+
+});"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-async 2`] = `
+"webpackJsonp([1],{
+
+/***/ 10:
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(11);
+if(typeof content === 'string') content = [[module.i, content, '']];
+// Prepare cssTransformation
+var transform;
+
+var options = {\\"hmr\\":true}
+options.transform = transform
+// add the styles to the DOM
+var update = __webpack_require__(1)(content, options);
+if(content.locals) module.exports = content.locals;
+// Hot Module Replacement
+if(false) {
+	// When the styles change, update the <style> tags
+	if(!content.locals) {
+		module.hot.accept(\\"!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css\\", function() {
+			var newContent = require(\\"!!../../../../../node_modules/css-loader/index.js??ref--0-2!./styles.css\\");
+			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+			update(newContent);
+		});
+	}
+	// When the module is disposed, remove the <style> tags
+	module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+
+/***/ 11:
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)(false);
+// imports
+
+
+// module
+exports.push([module.i, \\".contact {\\\\n\\\\tcolor: black;\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(10);
+
+modules.export = function() {
+	return 'Route Contact';
+};
+
+
+/***/ })
+
+});"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-async 3`] = `
+"body {
+	background: red;
+}
+.contact {
+	color: black;
+}
+"
+`;
+
+exports[`Webpack Integration Tests multiple-entries-async 4`] = `
+"body {
+	background: red;
+}
+.homepage {
+	color: yellow;
+}
+"
+`;
+
 exports[`Webpack Integration Tests multiple-entries-filename 1`] = `
 "a
 b

test/cases/multiple-entries-all-async/default-styles.css

@@ -0,0 +1,3 @@
+body {
+	background: red;
+}

test/cases/multiple-entries-all-async/entries/contact.js

@@ -0,0 +1,2 @@
+require('../router');
+require('../routes/contact');

test/cases/multiple-entries-all-async/entries/homepage.js

@@ -0,0 +1,2 @@
+require('../router');
+require('../routes/homepage');