fix: split async CSS correctly

index.js

@@ -7,6 +7,7 @@ var ConcatSource = require("webpack-sources").ConcatSource;
 var async = require("async");
 var ExtractedModule = require("./ExtractedModule");
 var Chunk = require("webpack/lib/Chunk");
+var NormalModule = require("webpack/lib/NormalModule");
 var OrderUndefinedError = require("./OrderUndefinedError");
 var loaderUtils = require("loader-utils");
 var validateOptions = require('schema-utils');
@@ -186,15 +187,15 @@ ExtractTextPlugin.prototype.loader = function(options) {
 ExtractTextPlugin.prototype.extract = function(options) {
 	if(arguments.length > 1) {
 		throw new Error("Breaking change: extract now only takes a single argument. Either an options " +
-						"object *or* the loader(s).\n" +
-						"Example: if your old code looked like this:\n" +
-						"    ExtractTextPlugin.extract('style-loader', 'css-loader')\n\n" +
-						"You would change it to:\n" +
-						"    ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })\n\n" +
-						"The available options are:\n" +
-						"    use: string | object | loader[]\n" +
-						"    fallback: string | object | loader[]\n" +
-						"    publicPath: string\n");
+			"object *or* the loader(s).\n" +
+			"Example: if your old code looked like this:\n" +
+			"    ExtractTextPlugin.extract('style-loader', 'css-loader')\n\n" +
+			"You would change it to:\n" +
+			"    ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })\n\n" +
+			"The available options are:\n" +
+			"    use: string | object | loader[]\n" +
+			"    fallback: string | object | loader[]\n" +
+			"    publicPath: string\n");
 	}
 	if(options.fallbackLoader) {
 		console.warn('fallbackLoader option has been deprecated - replace with "fallback"');
@@ -225,14 +226,15 @@ ExtractTextPlugin.prototype.extract = function(options) {
 	return [this.loader(options)]
 		.concat(before, loader)
 		.map(getLoaderObject);
-}
+};
 
 ExtractTextPlugin.extract = ExtractTextPlugin.prototype.extract.bind(ExtractTextPlugin);
 
 ExtractTextPlugin.prototype.apply = function(compiler) {
 	var options = this.options;
 	compiler.plugin("this-compilation", function(compilation) {
 		var extractCompilation = new ExtractTextPluginCompilation();
+		var toRemoveModules = {};
 		compilation.plugin("normal-module-loader", function(loaderContext, module) {
 			loaderContext[NS] = function(content, opt) {
 				if(options.disable)
@@ -274,21 +276,43 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 					if(meta && (!meta.options.id || meta.options.id === id)) {
 						var wasExtracted = Array.isArray(meta.content);
 						if(shouldExtract !== wasExtracted) {
-							module[NS + "/extract"] = shouldExtract; // eslint-disable-line no-path-concat
-							compilation.rebuildModule(module, function(err) {
+							var newModule = new NormalModule(
+								module.request,
+								module.userRequest,
+								module.rawRequest,
+								module.loaders,
+								module.resource,
+								module.parser
+							);
+							newModule[NS + "/extract"] = shouldExtract; // eslint-disable-line no-path-concat
+							// build a new module and save result to extracted compilations
+							compilation.buildModule(newModule, false, newModule, null, function(err) {
 								if(err) {
 									compilation.errors.push(err);
 									return callback();
 								}
-								meta = module[NS];
+								meta = newModule[NS];
 								// 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(newModule.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) {
+									var ident = module.identifier();
+									extractCompilation.addResultToChunk(ident, meta.content, module, extractedChunk);
+									// remove generated result from chunk
+									if(toRemoveModules[ident]) {
+										toRemoveModules[ident].chunks.push(chunk)
+									} else {
+										toRemoveModules[ident] = {
+											module: newModule,
+											moduleToRemove: module,
+											chunks: [chunk]
+										};
+									}
+
+								}
 								callback();
 							});
 						} else {
@@ -318,6 +342,32 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 				callback();
 			}.bind(this));
 		}.bind(this));
+		compilation.plugin("optimize-module-ids", function(modules){
+			modules.forEach(function (module) {
+				var data = toRemoveModules[module.identifier()];
+				if (data) {
+					var id = module.id;
+					var newModule = new NormalModule(
+						module.request,
+						module.userRequest,
+						module.rawRequest,
+						module.loaders,
+						module.resource,
+						module.parser
+					);
+					newModule.id = id;
+					newModule._source = data.module._source;
+					data.chunks.forEach(function (chunk) {
+						chunk.removeModule(data.moduleToRemove);
+						var deps = data.moduleToRemove.dependencies;
+						deps.forEach(d => {
+							chunk.removeModule(d.module);
+						});
+						chunk.addModule(newModule);
+					});
+				}
+			});
+		});
 		compilation.plugin("additional-assets", function(callback) {
 			extractedChunks.forEach(function(extractedChunk) {
 				if(extractedChunk.modules.length) {

package.json

@@ -32,6 +32,7 @@
     "mocha": "^3.2.0",
     "mocha-lcov-reporter": "1.3.0",
     "raw-loader": "^0.5.1",
+    "rimraf": "^2.6.1",
     "should": "^11.1.2",
     "standard-version": "^4.1.0",
     "style-loader": "^0.18.2",

test/TestCases.test.js

@@ -3,6 +3,7 @@ var vm = require("vm");
 var path = require("path");
 var webpack = require("webpack");
 var should = require("should");
+var rimraf = require('rimraf');
 var ExtractTextPlugin = require("../");
 
 var cases = process.env.CASES ? process.env.CASES.split(",") : fs.readdirSync(path.join(__dirname, "cases"));
@@ -12,36 +13,39 @@ describe("TestCases", function() {
 		it(testCase, function(done) {
 			var testDirectory = path.join(__dirname, "cases", testCase);
 			var outputDirectory = path.join(__dirname, "js", testCase);
-			var options = { entry: { test: "./index.js" } };
-			var configFile = path.join(testDirectory, "webpack.config.js");
-			if(fs.existsSync(configFile))
-				options = require(configFile);
-			options.context = testDirectory;
-			if(!options.module) options.module = {};
-			if(!options.module.loaders) options.module.loaders = [
-				{ test: /\.txt$/, loader: ExtractTextPlugin.extract("raw-loader") }
-			];
-			if(!options.output) options.output = { filename: "[name].js" };
-			if(!options.output.path) options.output.path = outputDirectory;
-			if(process.env.CASES) {
-				console.log("\nwebpack." + testCase + ".config.js " + JSON.stringify(options, null, 2));
-			}
-			webpack(options, function(err, stats) {
-				if(err) return done(err);
-				if(stats.hasErrors()) return done(new Error(stats.toString()));
-				var testFile = path.join(outputDirectory, "test.js");
-				if(fs.existsSync(testFile))
-					require(testFile)(suite);
-				var expectedDirectory = path.join(testDirectory, "expected");
-				fs.readdirSync(expectedDirectory).forEach(function(file) {
-					var filePath = path.join(expectedDirectory, file);
-					var actualPath = path.join(outputDirectory, file);
-					readFileOrEmpty(actualPath).should.be.eql(
-						readFileOrEmpty(filePath),
-						file + " should be correct");
+			function test() {
+				var options = { entry: { test: "./index.js" } };
+				var configFile = path.join(testDirectory, "webpack.config.js");
+				if (fs.existsSync(configFile))
+					options = require(configFile);
+				options.context = testDirectory;
+				if (!options.module) options.module = {};
+				if (!options.module.loaders) options.module.loaders = [
+					{ test: /\.txt$/, loader: ExtractTextPlugin.extract("raw-loader") }
+				];
+				if (!options.output) options.output = { filename: "[name].js" };
+				if (!options.output.path) options.output.path = outputDirectory;
+				if (process.env.CASES) {
+					console.log("\nwebpack." + testCase + ".config.js " + JSON.stringify(options, null, 2));
+				}
+				webpack(options, function (err, stats) {
+					if (err) return done(err);
+					if (stats.hasErrors()) return done(new Error(stats.toString()));
+					var testFile = path.join(outputDirectory, "test.js");
+					if (fs.existsSync(testFile))
+						require(testFile)(suite);
+					var expectedDirectory = path.join(testDirectory, "expected");
+					fs.readdirSync(expectedDirectory).forEach(function (file) {
+						var filePath = path.join(expectedDirectory, file);
+						var actualPath = path.join(outputDirectory, file);
+						readFileOrEmpty(actualPath).should.be.eql(
+							readFileOrEmpty(filePath),
+							file + " should be correct");
+					});
+					done();
 				});
-				done();
-			});
+			}
+			rimraf(outputDirectory, test);
 		});
 	});
 });

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');

test/cases/multiple-entries-all-async/expected/0.js

@@ -0,0 +1,22 @@
+webpackJsonp([0],{
+
+/***/ 2:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(7);
+
+modules.export = function() {
+	return 'Route Homepage';
+};
+
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ })
+
+});

test/cases/multiple-entries-all-async/expected/1.js

@@ -0,0 +1,22 @@
+webpackJsonp([1],{
+
+/***/ 1:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(6);
+
+modules.export = function() {
+	return 'Route Contact';
+};
+
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ })
+
+});

test/cases/multiple-entries-all-async/expected/contact.css

@@ -0,0 +1,9 @@
+body {
+	background: red;
+}
+.contact {
+	color: black;
+}
+.homepage {
+	color: black;
+}

test/cases/multiple-entries-all-async/expected/homepage.css

@@ -0,0 +1,9 @@
+body {
+	background: red;
+}
+.contact {
+	color: black;
+}
+.homepage {
+	color: black;
+}

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

@@ -0,0 +1,6 @@
+require('./default-styles.css');
+module.export = function (route) {
+	return import(/* webpackChunkName: "route-[request]" */ './routes/' + route + 'index.js').then(function (route) {
+		return route;
+	});
+};

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

@@ -0,0 +1,5 @@
+require('./styles.css');
+
+modules.export = function() {
+	return 'Route Contact';
+};

test/cases/multiple-entries-all-async/routes/contact/styles.css

@@ -0,0 +1,3 @@
+.contact {
+	color: black;
+}

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

@@ -0,0 +1,5 @@
+require('./styles.css');
+
+modules.export = function() {
+	return 'Route Homepage';
+};

test/cases/multiple-entries-all-async/routes/homepage/styles.css

@@ -0,0 +1,3 @@
+.homepage {
+	color: black;
+}

test/cases/multiple-entries-all-async/webpack.config.js

@@ -0,0 +1,23 @@
+var ExtractTextPlugin = require("../../../");
+module.exports = {
+	entry: {
+		'homepage': "./entries/homepage.js",
+		'contact': "./entries/contact.js"
+	},
+	module: {
+		loaders: [
+			{ test: /\.css$/, use: ExtractTextPlugin.extract({
+				fallback: "style-loader",
+				use: { loader: "css-loader", options: {
+					sourceMap: false
+				} }
+			}) }
+		]
+	},
+	plugins: [
+		new ExtractTextPlugin({
+			filename: '[name].css',
+			allChunks: true
+		})
+	]
+};

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

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

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

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

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

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