From 6727f11e7a2306fc4b0e0d9356b9c8ef5cec23c2 Mon Sep 17 00:00:00 2001
From: Vadym <goloveychuk1@gmail.com>
Date: Tue, 2 Feb 2021 20:29:24 +0200
Subject: [PATCH 1/3] feat: hmr, compare old locals to invalidate if needed

---
 src/hmr/isEqualLocals.js | 23 +++++++++++++++++++++++
 src/loader.js            | 31 ++++++++++++++++++++++++++-----
 2 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 src/hmr/isEqualLocals.js

diff --git a/src/hmr/isEqualLocals.js b/src/hmr/isEqualLocals.js
new file mode 100644
index 00000000..1002ff1f
--- /dev/null
+++ b/src/hmr/isEqualLocals.js
@@ -0,0 +1,23 @@
+function isEqualLocals(a, b) {
+  if ((!a && b) || (a && !b)) {
+    return false;
+  }
+
+  let p;
+
+  for (p in a) {
+    if (a[p] !== b[p]) {
+      return false;
+    }
+  }
+
+  for (p in b) {
+    if (!a[p]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+module.exports = isEqualLocals;
diff --git a/src/loader.js b/src/loader.js
index c7370666..629ef994 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -16,9 +16,17 @@ import schema from './loader-options.json';
 const pluginName = 'mini-css-extract-plugin';
 
 function hotLoader(content, context) {
-  const accept = context.locals
-    ? ''
-    : 'module.hot.accept(undefined, cssReload);';
+  const accept = `
+    if (!_locals || module.hot.invalidate) {
+      if (module.hot.invalidate &&
+          module.hot.data &&
+          module.hot.data.oldLocals &&
+          !isEqualLocals(module.hot.data.oldLocals, _locals)) {
+          module.hot.invalidate();
+      } else {
+         module.hot.accept();
+      }
+    }`;
 
   return `${content}
     if(module.hot) {
@@ -30,7 +38,15 @@ function hotLoader(content, context) {
     ...context.options,
     locals: !!context.locals,
   })});
-      module.hot.dispose(cssReload);
+      var _locals = ${JSON.stringify(context.locals)};
+      var isEqualLocals = require(${loaderUtils.stringifyRequest(
+        context.context,
+        path.join(__dirname, 'hmr/isEqualLocals.js')
+      )});
+      module.hot.dispose(function(data) {
+        cssReload();
+        data.oldLocals = _locals;
+      });
       ${accept}
     }
   `;
@@ -269,7 +285,12 @@ export function pitch(request) {
     let resultSource = `// extracted by ${pluginName}`;
 
     resultSource += this.hot
-      ? hotLoader(result, { context: this.context, options, locals })
+      ? hotLoader(result, {
+          context: this.context,
+          options,
+          locals,
+          namedExport,
+        })
       : result;
 
     return callback(null, resultSource);

From 4180d43be10604e640af220b5aa1eab6c22197ec Mon Sep 17 00:00:00 2001
From: Vadym <goloveychuk1@gmail.com>
Date: Fri, 5 Feb 2021 15:18:28 +0200
Subject: [PATCH 2/3] chore: pr fixes

---
 src/loader.js | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/loader.js b/src/loader.js
index 629ef994..fe302ec3 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -16,6 +16,14 @@ import schema from './loader-options.json';
 const pluginName = 'mini-css-extract-plugin';
 
 function hotLoader(content, context) {
+  const renderImport = (name, modulePath) => {
+    const request = loaderUtils.stringifyRequest(context.context, modulePath);
+
+    if (context.esModule) {
+      return `import ${name} from ${request};`;
+    }
+    return `var ${name} = require(${request});`;
+  };
   const accept = `
     if (!_locals || module.hot.invalidate) {
       if (module.hot.invalidate &&
@@ -29,20 +37,21 @@ function hotLoader(content, context) {
     }`;
 
   return `${content}
+    ${renderImport(
+      'cssReloadModule',
+      path.join(__dirname, 'hmr/hotModuleReplacement.js')
+    )}
+    ${renderImport(
+      'isEqualLocals',
+      path.join(__dirname, 'hmr/isEqualLocals.js')
+    )}
     if(module.hot) {
       // ${Date.now()}
-      var cssReload = require(${loaderUtils.stringifyRequest(
-        context.context,
-        path.join(__dirname, 'hmr/hotModuleReplacement.js')
-      )})(module.id, ${JSON.stringify({
-    ...context.options,
-    locals: !!context.locals,
-  })});
+      var cssReload = cssReloadModule(module.id, ${JSON.stringify({
+        ...context.options,
+        locals: !!context.locals,
+      })});
       var _locals = ${JSON.stringify(context.locals)};
-      var isEqualLocals = require(${loaderUtils.stringifyRequest(
-        context.context,
-        path.join(__dirname, 'hmr/isEqualLocals.js')
-      )});
       module.hot.dispose(function(data) {
         cssReload();
         data.oldLocals = _locals;
@@ -290,6 +299,7 @@ export function pitch(request) {
           options,
           locals,
           namedExport,
+          esModule,
         })
       : result;
 

From c3b3f20dc1fb2e77f40a9bed3a735ca9c5d91bb6 Mon Sep 17 00:00:00 2001
From: Vadym <goloveychuk1@gmail.com>
Date: Fri, 5 Feb 2021 15:27:03 +0200
Subject: [PATCH 3/3] chore: formatting

---
 src/loader.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/loader.js b/src/loader.js
index fe302ec3..647eb18a 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -25,16 +25,16 @@ function hotLoader(content, context) {
     return `var ${name} = require(${request});`;
   };
   const accept = `
-    if (!_locals || module.hot.invalidate) {
-      if (module.hot.invalidate &&
-          module.hot.data &&
-          module.hot.data.oldLocals &&
-          !isEqualLocals(module.hot.data.oldLocals, _locals)) {
-          module.hot.invalidate();
-      } else {
-         module.hot.accept();
-      }
-    }`;
+      if (!_locals || module.hot.invalidate) {
+        if (module.hot.invalidate &&
+            module.hot.data &&
+            module.hot.data.oldLocals &&
+            !isEqualLocals(module.hot.data.oldLocals, _locals)) {
+            module.hot.invalidate();
+        } else {
+           module.hot.accept();
+        }
+      }`;
 
   return `${content}
     ${renderImport(
@@ -57,7 +57,7 @@ function hotLoader(content, context) {
         data.oldLocals = _locals;
       });
       ${accept}
-    }
+  }
   `;
 }