fix: avoid reloading all csses when hot load (#1090)

Author: yiminghe

src/loader.js

@@ -44,22 +44,31 @@ const MiniCssExtractPlugin = require("./index");
  * @returns {string}
  */
 function hotLoader(content, context) {
-  const accept = context.locals
-    ? ""
-    : "module.hot.accept(undefined, cssReload);";
-
+  const localsJsonString = JSON.stringify(JSON.stringify(context.locals));
   return `${content}
     if(module.hot) {
-      // ${Date.now()}
-      var cssReload = require(${stringifyRequest(
-        context.loaderContext,
-        path.join(__dirname, "hmr/hotModuleReplacement.js")
-      )})(module.id, ${JSON.stringify({
-    ...context.options,
-    locals: !!context.locals,
-  })});
-      module.hot.dispose(cssReload);
-      ${accept}
+      (function() {
+        var localsJsonString = ${localsJsonString};
+        // ${Date.now()}
+        var cssReload = require(${stringifyRequest(
+          context.loaderContext,
+          path.join(__dirname, "hmr/hotModuleReplacement.js")
+        )})(module.id, ${JSON.stringify(context.options)});
+        // only invalidate when locals change
+        if (
+          module.hot.data &&
+          module.hot.data.value &&
+          module.hot.data.value !== localsJsonString
+        ) {
+          module.hot.invalidate();
+        } else {
+          module.hot.accept();
+        }
+        module.hot.dispose(function(data) {
+          data.value = localsJsonString;
+          cssReload();
+        });
+      })();
     }
   `;
 }
@@ -563,3 +572,4 @@ function loader(content) {
 
 module.exports = loader;
 module.exports.pitch = pitch;
+module.exports.hotLoader = hotLoader;

test/HMR.test.js

@@ -5,6 +5,7 @@
 /* eslint-disable no-console */
 
 import hotModuleReplacement from "../src/hmr/hotModuleReplacement";
+import { hotLoader } from "../src/loader";
 
 function getLoadEvent() {
   const event = document.createEvent("Event");
@@ -361,4 +362,29 @@ describe("HMR", () => {
       done();
     }, 100);
   });
+
+  it("hotLoader works for non-locals", () => {
+    const o = Date.now;
+    Date.now = () => 1;
+    const code = hotLoader("//content;", {
+      loaderContext: {
+        context: __dirname,
+      },
+    });
+    Date.now = o;
+    expect(code).toMatchSnapshot();
+  });
+
+  it("hotLoader works for locals", () => {
+    const o = Date.now;
+    Date.now = () => 1;
+    const code = hotLoader("//content;", {
+      loaderContext: {
+        context: __dirname,
+      },
+      locals: { foo: "bar" },
+    });
+    Date.now = o;
+    expect(code).toMatchSnapshot();
+  });
 });

test/__snapshots__/HMR.test.js.snap

@@ -1,5 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HMR hotLoader works for locals 1`] = `
+"//content;
+    if(module.hot) {
+      (function() {
+        var localsJsonString = \\"{\\\\\\"foo\\\\\\":\\\\\\"bar\\\\\\"}\\";
+        // 1
+        var cssReload = require(\\"../src/hmr/hotModuleReplacement.js\\")(module.id, undefined);
+        // only invalidate when locals change
+        if (
+          module.hot.data &&
+          module.hot.data.value &&
+          module.hot.data.value !== localsJsonString
+        ) {
+          module.hot.invalidate();
+        } else {
+          module.hot.accept();
+        }
+        module.hot.dispose(function(data) {
+          data.value = localsJsonString;
+          cssReload();
+        });
+      })();
+    }
+  "
+`;
+
+exports[`HMR hotLoader works for non-locals 1`] = `
+"//content;
+    if(module.hot) {
+      (function() {
+        var localsJsonString = undefined;
+        // 1
+        var cssReload = require(\\"../src/hmr/hotModuleReplacement.js\\")(module.id, undefined);
+        // only invalidate when locals change
+        if (
+          module.hot.data &&
+          module.hot.data.value &&
+          module.hot.data.value !== localsJsonString
+        ) {
+          module.hot.invalidate();
+        } else {
+          module.hot.accept();
+        }
+        module.hot.dispose(function(data) {
+          data.value = localsJsonString;
+          cssReload();
+        });
+      })();
+    }
+  "
+`;
+
 exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;
 
 exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;

test/cases/hmr-locals/expected/main.css

@@ -0,0 +1,7 @@
+/*!************************************************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./index.css ***!
+  \************************************************************************************************/
+.VoofDB21D_QzDbRdwMiY {
+  color: red;
+}
+