fix: avoid reload all css when hot load

webpack-contrib · Mar 28, 2024 · e9bf629 · e9bf629
1 parent 8bf0ad6
commit e9bf629
Show file tree

Hide file tree

Showing 6 changed files with 1,672 additions and 18 deletions.
diff --git a/src/loader.js b/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();
+        });
+      })();
     }
   `;
 }

diff --git a/test/cases/hmr-locals/expected/main.css b/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;
+}
+