fix: CSS HMR Issues (faceyspacey#114)

* fix: Fixed HMR issue when oneOf is used

When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix faceyspacey#98,faceyspacey#80

* fix: Applying rollback fixes to updateWebpackConfig, search loader and use object keys

* fix: Adding back exported out hot loader

* docs(readme): Adding example of manual hotloader implementation

In the event users cannot get it to work, theres an example in the docs to reference

* fix: handle functions as loaders

Do not break when searching through `use` or `loader` that is a function

* fix(index.js): Support function loaders (faceyspacey#116)

* docs(readme): Tone of Voice clairification on what hot:true does (faceyspacey#113)

* fix(index.js): Support function loaders

updateWebpackConfig previously expected `use` entries to be strings or arrays, and would throw `needle.includes is not a function` errors when given a function that returns a loader object.

* Update README.md

* test: Fixing function-loader tests

* Add reloadAll and cssModules to typings (faceyspacey#115)

* docs(readme): Tone of Voice clairification on what hot:true does (faceyspacey#113)

* Add reloadAll and cssModules to typings

Author: ScriptedAlchemy

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
         'prefer-destructuring': 0,
         'array-callback-return': 0,
         'prefer-template': 0,
-        'class-methods-use-this': 0
+        'class-methods-use-this': 0,
+        'no-plusplus': 0
     }
 };

README.md

@@ -281,6 +281,30 @@ 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
 
 The most common workflow when working with webpack is to write a "development" / "production" value in to the

index.d.ts

@@ -18,6 +18,8 @@ declare module 'extract-css-chunks-webpack-plugin' {
            * we try to automatically inject hot reloading, but if it's not working, use this config
            */
           hot?: boolean;
+          reloadAll?: boolean;
+          cssModules?: boolean;
       }
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "extract-css-chunks-webpack-plugin",
-  "version": "3.2.0",
+  "version": "3.2.1-alpha.1",
   "author": "James Gillmore <james@faceyspacey.com>",
   "contributors": [
     "Zack Jackson <zack@ScriptedAlchemy.com> (https://github.com/ScriptedAlchemy)"

src/index.js

@@ -427,13 +427,29 @@ class ExtractCssChunks {
         if (node && node.use && Array.isArray(node.use)) {
           const isMiniCss = node.use.some((l) => {
             const needle = l.loader || l;
+            if (typeof l === 'function') {
+              return false;
+            }
             return needle.includes(pluginName);
           });
           if (isMiniCss) {
             node.use.unshift(this.hotLoaderObject);
           }
         }
+        if (node && node.loader && Array.isArray(node.loader)) {
+          const isMiniCss = node.loader.some((l) => {
+            const needle = l.loader || l;
+            if (typeof l === 'function') {
+              return false;
+            }
+            return needle.includes(pluginName);
+          });
+          if (isMiniCss) {
+            node.loader.unshift(this.hotLoaderObject);
+          }
+        }
       });
+
       rules.push(rule);
 
       return rules;
@@ -592,5 +608,6 @@ class ExtractCssChunks {
 }
 
 ExtractCssChunks.loader = require.resolve('./loader');
+ExtractCssChunks.hotLoader = require.resolve('./hotLoader');
 
 export default ExtractCssChunks;

src/loader.js

@@ -12,7 +12,8 @@ const pluginName = 'extract-css-chunks-webpack-plugin';
 
 const exec = (loaderContext, code, filename) => {
   const module = new NativeModule(filename, loaderContext);
-  module.paths = NativeModule._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
+  // eslint-disable-line no-underscore-dangle
+  module.paths = NativeModule._nodeModulePaths(loaderContext.context);
   module.filename = filename;
   module._compile(code, filename); // eslint-disable-line no-underscore-dangle
   return module.exports;

test/cases/function-loader/expected/main.css

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

test/cases/function-loader/index.js

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

test/cases/function-loader/main.css

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

test/cases/function-loader/webpack.config.js

@@ -0,0 +1,25 @@
+
+
+const Self = require('../../../');
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          () => [
+            Self.loader,
+            'css-loader',
+          ],
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};