feat: updating hmr css module system (faceyspacey#160)

* fix: removing modules option

* fix: removing modules option and using css-loader passthru

* fix: tests

Author: ScriptedAlchemy

README.md

@@ -81,7 +81,6 @@ module.exports = {
              loader:ExtractCssChunks.loader,
              options: {
                hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config
-               modules: true, // if you use cssModules, this can help.
                reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
 
              }
@@ -168,7 +167,6 @@ module.exports = {
             loader:ExtractCssChunks.loader,
             options: {
               hot: true,
-              modules: true,
               reloadAll: true
             },
           },

package.json

@@ -66,8 +66,8 @@
   },
   "dependencies": {
     "loader-utils": "^1.1.0",
-    "normalize-url": "^3.0.0",
     "lodash": "^4.17.11",
+    "normalize-url": "^2.0.1",
     "schema-utils": "^1.0.0",
     "webpack-sources": "^1.1.0"
   },
@@ -89,6 +89,7 @@
     "eslint": "^4.17.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-prettier": "^2.6.0",
+    "execa": "^1.0.0",
     "file-loader": "^1.1.11",
     "husky": "^0.14.3",
     "jest": "^22.2.2",

src/hmr/hotModuleReplacement.js

@@ -144,6 +144,7 @@ function reloadAll() {
 
 module.exports = function(moduleId, options) {
   if (noDocument) {
+    console.log('no window.document found, will not HMR CSS');
     return noop;
   }
 

src/index.js

@@ -395,21 +395,6 @@ class ExtractCssChunksPlugin {
     });
   }
 
-  traverseDepthFirst(root, visit) {
-    let nodesToVisit = [root];
-
-    while (nodesToVisit.length > 0) {
-      const currentNode = nodesToVisit.shift();
-
-      if (currentNode !== null && typeof currentNode === 'object') {
-        const children = Object.values(currentNode);
-        nodesToVisit = [...children, ...nodesToVisit];
-      }
-
-      visit(currentNode);
-    }
-  }
-
   getCssChunkObject(mainChunk) {
     const obj = {};
     for (const chunk of mainChunk.getAllAsyncChunks()) {

src/loader.js

@@ -13,7 +13,7 @@ const MODULE_TYPE = 'css/extract-css-chunks';
 const pluginName = 'extract-css-chunks-webpack-plugin';
 
 function hotLoader(content, context) {
-  const accept = context.modules
+  const accept = context.locals
     ? ''
     : 'module.hot.accept(undefined, cssReload);';
   const result = `${content}
@@ -155,7 +155,7 @@ export function pitch(request) {
       : '';
 
     resultSource += query.hot
-      ? hotLoader(result, { context: this.context, query })
+      ? hotLoader(result, { context: this.context, query, locals })
       : result;
 
     return callback(null, resultSource);

test/TestCases.test.js

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import path from 'path';
-import { exec } from 'child_process';
 
 import webpack from 'webpack';
+import execa from 'execa';
 
 describe('TestCases', () => {
   const casesDirectory = path.resolve(__dirname, 'cases');
@@ -89,13 +89,12 @@ describe('HMR', () => {
   });
 
   it('is es5 only', () => {
-    exec(
-      './node_modules/.bin/es-check es5 src/hmr/hotModuleReplacement.js',
-      (error, stdout, stderr) => {
-        expect(
-          stderr.indexOf('there were no ES version matching errors!') > -1
-        ).toBe(true);
-      }
+    const { stderr } = execa.shellSync(
+      'npx es-check es5 src/hmr/hotModuleReplacement.js'
     );
+
+    expect(
+      stderr.indexOf('there were no ES version matching errors') > -1
+    ).toBe(true);
   });
 });

test/__snapshots__/TestCases.test.js.snap

@@ -147,6 +147,7 @@ function reloadAll() {
 
 module.exports = function(moduleId, options) {
   if (noDocument) {
+    console.log('no window.document found, will not HMR CSS');
     return noop;
   }
 

test/cases/hmr/expected/main.js

@@ -89,6 +89,8 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by extract-css-chunks-webpack-plugin
+    if(false) { var cssReload; }
+  
 
 /***/ })
 /******/ ]);