fix: avoid reload all css when hot load

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

Hide file tree

Showing 4 changed files with 69 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/index.css b/test/cases/hmr-locals/index.css
@@ -0,0 +1,3 @@
+.x {
+  color: red;
+}
diff --git a/test/cases/hmr-locals/webpack.config.js b/test/cases/hmr-locals/webpack.config.js
@@ -0,0 +1,33 @@
+import { HotModuleReplacementPlugin } from "webpack";
+
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.css",
+  mode: "development",
+  devtool: false,
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HotModuleReplacementPlugin(),
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/test/cases/hmr/expected/main.js b/test/cases/hmr/expected/main.js
@@ -363,10 +363,23 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
     if(true) {
+      const localsJsonString = undefined;
       // 
-      var cssReload = __webpack_require__(/*! ../../../src/hmr/hotModuleReplacement.js */ "../../../src/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
-      module.hot.dispose(cssReload);
-      module.hot.accept(undefined, cssReload);
+      const cssReload = __webpack_require__(/*! ../../../src/hmr/hotModuleReplacement.js */ "../../../src/hmr/hotModuleReplacement.js")(module.id, {});
+      // 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();
+      });
     }