add support for webpack's new contenthash support

Author: sokra

README.md

@@ -92,6 +92,11 @@ When inlining CSS `data-href` must be used.
   <tbody>
 </table>
 
+#### Long Term Caching
+
+For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
+
+
 [npm]: https://img.shields.io/npm/v/mini-css-extract-plugin.svg
 [npm-url]: https://npmjs.com/package/mini-css-extract-plugin
 

package.json

@@ -44,7 +44,7 @@
     "nsp": "^3.1.0",
     "pre-commit": "^1.2.2",
     "standard-version": "^4.3.0",
-    "webpack": "^4.1.0",
+    "webpack": "^4.3.0",
     "webpack-cli": "^2.0.13",
     "webpack-defaults": "^1.6.0",
     "webpack-dev-server": "^3.1.1"
@@ -56,7 +56,7 @@
     "node": ">= 6.11.5"
   },
   "peerDependencies": {
-    "webpack": "^4.1.0"
+    "webpack": "^4.3.0"
   },
   "pre-commit": "lint-staged",
   "lint-staged": {

src/index.js

@@ -4,7 +4,7 @@ import webpack from 'webpack';
 import sources from 'webpack-sources';
 
 const { ConcatSource, SourceMapSource, OriginalSource } = sources;
-const { Template } = webpack;
+const { Template, util: { createHash } } = webpack;
 
 const NS = path.dirname(fs.realpathSync(__filename));
 
@@ -66,6 +66,13 @@ class CssModule extends webpack.Module {
     this.buildMeta = {};
     callback();
   }
+
+  updateHash(hash) {
+    super.updateHash(hash);
+    hash.update(this.content);
+    hash.update(this.media || '');
+    hash.update(JSON.stringify(this.sourceMap || ''));
+  }
 }
 
 class CssModuleFactory {
@@ -121,6 +128,7 @@ class MiniCssExtractPlugin {
             filenameTemplate: this.options.filename,
             pathOptions: {
               chunk,
+              contentHashType: NS,
             },
             identifier: `mini-css-extract-plugin.${chunk.id}`,
           });
@@ -134,11 +142,26 @@ class MiniCssExtractPlugin {
             filenameTemplate: this.options.chunkFilename,
             pathOptions: {
               chunk,
+              contentHashType: NS,
             },
             identifier: `mini-css-extract-plugin.${chunk.id}`,
           });
         }
       });
+      compilation.hooks.contentHash.tap(pluginName, (chunk) => {
+        const { outputOptions } = compilation;
+        const { hashFunction, hashDigest, hashDigestLength } = outputOptions;
+        const hash = createHash(hashFunction);
+        for (const m of chunk.modulesIterable) {
+          if (m.type === NS) {
+            m.updateHash(hash);
+          }
+        }
+        const { contentHash } = chunk;
+        contentHash[NS] = hash
+          .digest(hashDigest)
+          .substr(0, hashDigestLength);
+      });
       const { mainTemplate } = compilation;
       mainTemplate.hooks.localVars.tap(
         pluginName,
@@ -183,8 +206,30 @@ class MiniCssExtractPlugin {
                     }
                     return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
                   },
+                  contentHash: {
+                    [NS]: `" + ${JSON.stringify(
+                      chunkMaps.contentHash[NS],
+                    )}[chunkId] + "`,
+                  },
+                  contentHashWithLength: {
+                    [NS]: (length) => {
+                      const shortContentHashMap = {};
+                      const contentHash = chunkMaps.contentHash[NS];
+                      for (const chunkId of Object.keys(contentHash)) {
+                        if (typeof contentHash[chunkId] === 'string') {
+                          shortContentHashMap[chunkId] = contentHash[
+                            chunkId
+                          ].substr(0, length);
+                        }
+                      }
+                      return `" + ${JSON.stringify(
+                        shortContentHashMap,
+                      )}[chunkId] + "`;
+                    },
+                  },
                   name: `" + (${JSON.stringify(chunkMaps.name)}[chunkId]||chunkId) + "`,
                 },
+                contentHashType: NS,
               },
             );
             return Template.asString([

test/TestCases.test.js

@@ -13,13 +13,16 @@ describe('TestCases', () => {
         const outputDirectoryForCase = path.resolve(outputDirectory, directory);
         // eslint-disable-next-line import/no-dynamic-require, global-require
         const webpackConfig = require(path.resolve(directoryForCase, 'webpack.config.js'));
-        webpack(Object.assign({
-          mode: 'none',
-          context: directoryForCase,
-          output: {
-            path: outputDirectoryForCase,
-          },
-        }, webpackConfig), (err, stats) => {
+        for (const config of [].concat(webpackConfig)) {
+          Object.assign(config, {
+            mode: 'none',
+            context: directoryForCase,
+            output: Object.assign({
+              path: outputDirectoryForCase,
+            }, config.output),
+          }, config);
+        }
+        webpack(webpackConfig, (err, stats) => {
           if (err) {
             done(err);
             return;

test/cases/contenthash/expected/1.main.819c85524fb5842b5454.css

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

test/cases/contenthash/expected/2.main.a33dbbf0ee4cecaf7099.css

@@ -0,0 +1,2 @@
+body { background: green; }
+

test/cases/contenthash/index.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/contenthash/style1.css

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

test/cases/contenthash/style2.css

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

test/cases/contenthash/webpack.config.js

@@ -0,0 +1,29 @@
+const Self = require('../../../');
+
+module.exports = [1, 2].map(n => ({
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  output: {
+    filename: `${n}.[name].js`
+  },
+  resolve: {
+    alias: {
+      './style.css': `./style${n}.css`
+    }
+  },
+  plugins: [
+    new Self({
+      filename: `${n}.[name].[contenthash].css`,
+    }),
+  ],
+}));