fix(src): CSS Modules HMR [PATCH]

.github/CODEOWNERS

@@ -1,2 +1,2 @@
 # extract-css-chunks-webpack-plugin maintainers
-*   @faceyspacey @zackljackson
+*   @faceyspacey @ScriptedAlchemy

src/hotLoader.js

@@ -17,9 +17,9 @@ function hotReload(content) {
     if(module.hot) {
       // ${Date.now()}
       var cssReload = require(${loaderUtils.stringifyRequest(
-        this,
-        `!${path.join(__dirname, 'hotModuleReplacement.js')}`,
-      )})(module.id, ${JSON.stringify(options)});
+    this,
+    `!${path.join(__dirname, 'hotModuleReplacement.js')}`,
+  )})(module.id, ${JSON.stringify(options)});
       module.hot.dispose(cssReload);
       module.hot.accept(undefined, cssReload);
     }

src/hotModuleReplacement.js

@@ -4,7 +4,7 @@ const srcByModuleId = Object.create(null);
 const debounce = require('lodash/debounce');
 
 const noDocument = typeof document === 'undefined';
-const forEach = Array.prototype.forEach;
+const { forEach } = Array.prototype;
 
 const noop = function () {};
 
@@ -13,13 +13,13 @@ const getCurrentScriptUrl = function (moduleId) {
 
   if (!src) {
     if (document.currentScript) {
-      src = document.currentScript.src;
+      src = document.currentScript.src; // eslint-disable-line prefer-destructuring
     } else {
       const scripts = document.getElementsByTagName('script');
       const lastScriptTag = scripts[scripts.length - 1];
 
       if (lastScriptTag) {
-        src = lastScriptTag.src;
+        src = lastScriptTag.src; // eslint-disable-line prefer-destructuring
       }
     }
     srcByModuleId[moduleId] = src;
@@ -43,7 +43,7 @@ const getCurrentScriptUrl = function (moduleId) {
 
 function updateCss(el, url) {
   if (!url) {
-    url = el.href.split('?')[0];
+    [url] = el.href.split('?');
   }
   if (el.isLoaded === false) {
     // We seem to be about to replace a css link that hasn't loaded yet.
@@ -80,7 +80,7 @@ function getReloadUrl(href, src) {
   return ret;
 }
 
-function reloadStyle(src) {
+function reloadStyle(src) { // eslint-disable-line no-unused-vars
   const elements = document.querySelectorAll('link');
   let loaded = false;
 
@@ -114,7 +114,7 @@ module.exports = function (moduleId, options) {
 
   function update() {
     const src = getScriptSrc(options.fileMap);
-    const reloaded = reloadStyle(src);
+    const reloaded = false; // hack of all hacks...for now
     if (reloaded) {
       console.log('[HMR] css reload %s', src.join(' ')); // eslint-disable-line no-console
     } else {

src/index.js

@@ -24,7 +24,7 @@ const isHMR = (compiler) => {
     }
 
     if (compiler.options.entry) {
-        const entry = typeof compiler.options.entry === 'function' ? compiler.options.entry() : compiler.options.entry;
+      const entry = typeof compiler.options.entry === 'function' ? compiler.options.entry() : compiler.options.entry;
       const entryString = JSON.stringify(entry);
       return entryString.includes('hot') || entryString.includes('hmr');
     }
@@ -34,7 +34,9 @@ const isHMR = (compiler) => {
 
 class CssDependency extends webpack.Dependency {
   constructor(
-    { identifier, content, media, sourceMap },
+    {
+      identifier, content, media, sourceMap,
+    },
     context,
     identifierIndex,
   ) {
@@ -80,7 +82,7 @@ class CssModule extends webpack.Module {
   readableIdentifier(requestShortener) {
     return `css ${requestShortener.shorten(this._identifier)}${
       this._identifierIndex ? ` (${this._identifierIndex})` : ''
-      }`;
+    }`;
   }
 
   nameForCondition() {
@@ -208,11 +210,10 @@ class ExtractCssChunks {
           );
           if (renderedModules.length > 0) {
             result.push({
-              render: () =>
-                this.renderContentAsset(
-                  renderedModules,
-                  compilation.runtimeTemplate.requestShortener,
-                ),
+              render: () => this.renderContentAsset(
+                renderedModules,
+                compilation.runtimeTemplate.requestShortener,
+              ),
               filenameTemplate: this.options.filename,
               pathOptions: {
                 chunk,
@@ -232,11 +233,10 @@ class ExtractCssChunks {
           );
           if (renderedModules.length > 0) {
             result.push({
-              render: () =>
-                this.renderContentAsset(
-                  renderedModules,
-                  compilation.runtimeTemplate.requestShortener,
-                ),
+              render: () => this.renderContentAsset(
+                renderedModules,
+                compilation.runtimeTemplate.requestShortener,
+              ),
               filenameTemplate: this.options.chunkFilename,
               pathOptions: {
                 chunk,
@@ -306,8 +306,7 @@ class ExtractCssChunks {
               JSON.stringify(this.options.chunkFilename),
               {
                 hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
-                hashWithLength: length =>
-                  `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
+                hashWithLength: length => `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
                 chunk: {
                   id: '" + chunkId + "',
                   hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
@@ -317,7 +316,7 @@ class ExtractCssChunks {
                       if (typeof chunkMaps.hash[chunkId] === 'string') {
                         shortChunkHashMap[chunkId] = chunkMaps.hash[
                           chunkId
-                          ].substring(0, length);
+                        ].substring(0, length);
                       }
                     }
                     return `" + ${JSON.stringify(
@@ -337,7 +336,7 @@ class ExtractCssChunks {
                         if (typeof contentHash[chunkId] === 'string') {
                           shortContentHashMap[chunkId] = contentHash[
                             chunkId
-                            ].substring(0, length);
+                          ].substring(0, length);
                         }
                       }
                       return `" + ${JSON.stringify(

src/loader.js

@@ -35,66 +35,62 @@ export function pitch(request) {
   const loaders = this.loaders.slice(this.loaderIndex + 1);
   this.addDependency(this.resourcePath);
   const childFilename = '*'; // eslint-disable-line no-path-concat
-  const publicPath =
-        typeof query.publicPath === 'string'
-            ? query.publicPath
-            : this._compilation.outputOptions.publicPath;
+  const publicPath = typeof query.publicPath === 'string'
+    ? query.publicPath
+    : this._compilation.outputOptions.publicPath;
   const outputOptions = {
     filename: childFilename,
     publicPath,
   };
   const childCompiler = this._compilation.createChildCompiler(
-        `extract-css-chunks-webpack-plugin ${request}`,
-        outputOptions,
-    );
+    `extract-css-chunks-webpack-plugin ${request}`,
+    outputOptions,
+  );
   new NodeTemplatePlugin(outputOptions).apply(childCompiler);
   new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);
   new NodeTargetPlugin().apply(childCompiler);
   new SingleEntryPlugin(
-        this.context,
-        `!!${request}`,
-        'extract-css-chunks-webpack-plugin',
-    ).apply(childCompiler);
+    this.context,
+    `!!${request}`,
+    'extract-css-chunks-webpack-plugin',
+  ).apply(childCompiler);
   new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler);
-    // We set loaderContext[NS] = false to indicate we already in
-    // a child compiler so we don't spawn another child compilers from there.
+  // We set loaderContext[NS] = false to indicate we already in
+  // a child compiler so we don't spawn another child compilers from there.
   childCompiler.hooks.thisCompilation.tap(
+    'extract-css-chunks-webpack-plugin loader',
+    (compilation) => {
+      compilation.hooks.normalModuleLoader.tap(
         'extract-css-chunks-webpack-plugin loader',
-        (compilation) => {
-          compilation.hooks.normalModuleLoader.tap(
-                'extract-css-chunks-webpack-plugin loader',
-                (loaderContext, module) => {
-                  loaderContext[NS] = false; // eslint-disable-line no-param-reassign
-                  if (module.request === request) {
-                    module.loaders = loaders.map(loader =>
-                            // eslint-disable-line no-param-reassign
-                            ({
-                              loader: loader.path,
-                              options: loader.options,
-                              ident: loader.ident,
-                            }));
-                  }
-                },
-            );
+        (loaderContext, module) => {
+          loaderContext[NS] = false; // eslint-disable-line no-param-reassign
+          if (module.request === request) {
+            module.loaders = loaders.map(loader => ({
+              loader: loader.path,
+              options: loader.options,
+              ident: loader.ident,
+            }));
+          }
         },
-    );
+      );
+    },
+  );
 
   let source;
   childCompiler.hooks.afterCompile.tap(
-        'extract-css-chunks-webpack-plugin',
-        (compilation) => {
-          source =
-                compilation.assets[childFilename] &&
-                compilation.assets[childFilename].source();
+    'extract-css-chunks-webpack-plugin',
+    (compilation) => {
+      source = compilation.assets[childFilename]
+                && compilation.assets[childFilename].source();
 
-            // Remove all chunk assets
-          compilation.chunks.forEach((chunk) => {
-            chunk.files.forEach((file) => {
-              delete compilation.assets[file]; // eslint-disable-line no-param-reassign
-            });
-          });
-        },
-    );
+      // Remove all chunk assets
+      compilation.chunks.forEach((chunk) => {
+        chunk.files.forEach((file) => {
+          delete compilation.assets[file]; // eslint-disable-line no-param-reassign
+        });
+      });
+    },
+  );
 
   const callback = this.async();
   childCompiler.runAsChild((err, entries, compilation) => {