feat: automating module detection (#163)

* feat: automating module detection

* test: updating tests

* docs: updating readme

README.md

@@ -82,7 +82,6 @@ module.exports = {
              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
                reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
-
              }
            },
            "css-loader"
@@ -298,29 +297,6 @@ new ExtractCssChunk({
 
 >Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything.
 
-### HMR Troubleshooting
-**Blank array in HMR script?**
-
-If you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work 
-
-```js
- rules: [
-      {
-        test: /\.css$/,
-        use: [
-          ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading
-          ExtractCssChunks.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              localIdentName: '[name]__[local]--[hash:base64:5]',
-            },
-          },
-        ],
-      },
-    ]
-```
 
 ### HMR Pitfall
 

src/hmr/hotModuleReplacement.js

@@ -154,6 +154,13 @@ module.exports = function(moduleId, options) {
   function update() {
     var src = getScriptSrc(options.filename);
     var reloaded = reloadStyle(src);
+
+    if (options.locals) {
+      console.log('[HMR] Detected local css modules. Reload all css');
+      reloadAll();
+      return;
+    }
+
     if (reloaded && !options.reloadAll) {
       console.log('[HMR] css reload %s', src.join(' '));
     } else {
@@ -162,5 +169,5 @@ module.exports = function(moduleId, options) {
     }
   }
 
-  return debounce(update, 10);
+  return debounce(update, 50);
 };

src/index.js

@@ -484,8 +484,7 @@ class ExtractCssChunksPlugin {
           if (this.options.orderWarning) {
             compilation.warnings.push(
               new Error(
-                `chunk ${chunk.name ||
-                  chunk.id} [extract-css-chunks-webpack-plugin]\n` +
+                `chunk ${chunk.name || chunk.id} [${pluginName}]\n` +
                   'Conflicting order between:\n' +
                   ` * ${fallbackModule.readableIdentifier(
                     requestShortener

src/loader.js

@@ -22,7 +22,10 @@ function hotLoader(content, context) {
       var cssReload = require(${loaderUtils.stringifyRequest(
         context.context,
         path.join(__dirname, 'hmr/hotModuleReplacement.js')
-      )})(module.id, ${JSON.stringify(context.query)});
+      )})(module.id, ${JSON.stringify({
+    ...context.query,
+    locals: !!context.locals,
+  })});
       module.hot.dispose(cssReload);
       ${accept}
     }

test/__snapshots__/TestCases.test.js.snap

@@ -157,6 +157,13 @@ module.exports = function(moduleId, options) {
   function update() {
     var src = getScriptSrc(options.filename);
     var reloaded = reloadStyle(src);
+
+    if (options.locals) {
+      console.log('[HMR] Detected local css modules. Reload all css');
+      reloadAll();
+      return;
+    }
+
     if (reloaded && !options.reloadAll) {
       console.log('[HMR] css reload %s', src.join(' '));
     } else {
@@ -165,7 +172,7 @@ module.exports = function(moduleId, options) {
     }
   }
 
-  return debounce(update, 10);
+  return debounce(update, 50);
 };
 "
 `;