fix: exclude mini-css loader modules (#382)

* fix: exclude mini-css loader modules

mini-css does not emit assets when built from webpack's memory cache or
hard-source's disk cache. Exclude the modules that lead to the child
compilations that emit the assets so the assets are always emitted.
This has a minor performance change instead of a large performance hit
because the bulk of the css work is still cached outside of these
excluded modules.

* fix: text copy-webpack-plugin

* fixup! fix: exclude mini-css loader modules

* fixup! fix: exclude mini-css loader modules

* fix: disable hard modules mini css test

index.js

@@ -433,8 +433,10 @@ class HardSourceWebpackPlugin {
     const TransformModuleErrorsPlugin = require('./lib/TransformModuleErrorsPlugin');
     const SupportExtractTextPlugin = require('./lib/SupportExtractTextPlugin');
     let SupportMiniCssExtractPlugin;
+    let ExcludeMiniCssModulePlugin;
     if (webpackFeatures.generator) {
       SupportMiniCssExtractPlugin = require('./lib/SupportMiniCssExtractPlugin');
+      ExcludeMiniCssModulePlugin = require('./lib/ExcludeMiniCssModulePlugin');
     }
     const TransformDependencyBlockPlugin = require('./lib/TransformDependencyBlockPlugin');
     const TransformBasicDependencyPlugin = require('./lib/TransformBasicDependencyPlugin');
@@ -477,6 +479,7 @@ class HardSourceWebpackPlugin {
 
     if (SupportMiniCssExtractPlugin) {
       new SupportMiniCssExtractPlugin().apply(compiler);
+      new ExcludeMiniCssModulePlugin().apply(compiler);
     }
 
     new TransformDependencyBlockPlugin({

lib/ExcludeMiniCssModulePlugin.js

@@ -0,0 +1,45 @@
+const pluginCompat = require('./util/plugin-compat');
+
+/**
+ * Exclude modules with CssDependency. These modules are what mini-css keys
+ * child compilations on. Excluding them the child compilations and their
+ * assets are built every build. This has a minor performance cost as the bulk
+ * of the work for css is still cached.
+ */
+class ExcludeMiniCssModulePlugin {
+  apply(compiler) {
+    let CssDependency;
+
+    pluginCompat.tap(
+      compiler,
+      'make',
+      'SupportMiniCssExtractPlugin',
+      ({ dependencyFactories }) => {
+        const Dependencies = dependencyFactories.keys();
+        for (const Dep of Dependencies) {
+          if (Dep.name === 'CssDependency') {
+            CssDependency = Dep;
+            break;
+          }
+        }
+      },
+    );
+
+    pluginCompat.tap(
+      compiler,
+      '_hardSourceAfterFreezeModule',
+      'HardMiniCssExtractPlugin',
+      (frozen, module, extra) => {
+        if (
+          CssDependency &&
+          module.dependencies.some(dep => dep instanceof CssDependency)
+        ) {
+          return null;
+        }
+        return frozen;
+      },
+    );
+  }
+}
+
+module.exports = ExcludeMiniCssModulePlugin;

package.json

@@ -43,6 +43,7 @@
     "babel-preset-env": "^1.6.1",
     "cacache": "^11.0.2",
     "chai": "^3.5.0",
+    "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.27.0",
     "extract-text-webpack-plugin": "^3.0.0 || ^2.0.0 || ^1.0.1",
     "file-loader": "^1.0.0 || ^0.11.0 || ^0.10.1",

tests/fixtures/plugin-copy/webpack.config.js

@@ -0,0 +1,26 @@
+var HardSourceWebpackPlugin = require('../../..');
+
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  context: __dirname,
+  entry: './index.js',
+  output: {
+    path: __dirname + '/tmp',
+    filename: 'main.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.png$/,
+        loader: 'file-loader',
+      },
+    ],
+  },
+  plugins: [
+    new HardSourceWebpackPlugin({
+      cacheDirectory: 'cache',
+    }),
+    new CopyWebpackPlugin(['images']),
+  ],
+};

tests/fixtures/plugin-mini-css-extract-file/index.css

@@ -0,0 +1,4 @@
+.hello {
+  color: blue;
+  background: url('image.png');
+}

tests/fixtures/plugin-mini-css-extract-file/index.js

@@ -0,0 +1 @@
+require('./index.css');

tests/fixtures/plugin-mini-css-extract-file/webpack.config.js

@@ -0,0 +1,38 @@
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+var HardSourceWebpackPlugin = require('../../..');
+
+module.exports = {
+  context: __dirname,
+  entry: './index.js',
+  output: {
+    path: __dirname + '/tmp',
+    filename: 'main.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      },
+      {
+        test: /\.png$/,
+        use: [
+          'file-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new HardSourceWebpackPlugin({
+      cacheDirectory: 'cache',
+      environmentHash: {
+        root: __dirname + '/../../..',
+      },
+    }),
+  ],
+};

tests/plugins-webpack-3.js

@@ -22,6 +22,9 @@ describeWP(3)('plugin webpack 3 use', function() {
     });
   });
 
+  itCompilesTwice('plugin-copy');
+  itCompilesTwice('plugin-copy', {exportStats: true});
+
 });
 
 describeWP(3)('plugin webpack 3 use - builds change', function() {

tests/plugins-webpack-4.js

@@ -14,7 +14,10 @@ describeWP(4)('plugin webpack 4 use', function() {
 
   itCompilesTwice.skipIf([c.miniCss])('plugin-mini-css-extract');
   itCompilesTwice.skipIf([c.miniCss])('plugin-mini-css-extract', {exportStats: true});
-  itCompilesHardModules.skipIf([c.miniCss])('plugin-mini-css-extract', ['./index.css']);
+  // itCompilesHardModules.skipIf([c.miniCss])('plugin-mini-css-extract', ['./index.css']);
+
+  itCompilesTwice.skipIf([c.miniCss])('plugin-mini-css-extract-file');
+  itCompilesTwice.skipIf([c.miniCss])('plugin-mini-css-extract-file', {exportStats: true});
 
 });