fix: avoid reload all css when hot load

webpack-contrib · Mar 21, 2024 · 3695ac6 · 3695ac6
1 parent 8bf0ad6
commit 3695ac6
Show file tree

Hide file tree

Showing 6 changed files with 1,661 additions and 11 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) {
+      const localsJsonString = ${localsJsonString};
       // ${Date.now()}
-      var cssReload = require(${stringifyRequest(
+      const 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}
+      // 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;
+}
+