fix: hot module replacement logic for lazy type (#468)

Author: evilebottnawi

.github/workflows/nodejs.yml

@@ -61,6 +61,10 @@ jobs:
     runs-on: ${{ matrix.os }}
 
     steps:
+      - name: Setup Git
+        if: matrix.os == 'windows-latest'
+        run: git config --global core.autocrlf input
+
       - uses: actions/checkout@v2
 
       - name: Use Node.js ${{ matrix.node-version }}

package-lock.json

@@ -57,7 +57,7 @@
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^25.4.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.2",
+    "css-loader": "^3.5.3",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
     "es-check": "^5.1.0",
@@ -72,7 +72,7 @@
     "memfs": "^3.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
-    "sass": "^1.26.3",
+    "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "semver": "^7.3.2",
     "standard-version": "^7.1.0",

package.json

@@ -39,15 +39,15 @@ if (module.hot) {
     function() {
      ${
        esModule
-         ? `update(content);`
-         : `var newContent = require(${loaderUtils.stringifyRequest(
+         ? 'update(content);'
+         : `content = require(${loaderUtils.stringifyRequest(
              this,
              `!!${request}`
            )});
 
-           newContent = newContent.__esModule ? newContent.default : newContent;
+           content = content.__esModule ? content.default : content;
 
-           update(newContent);`
+           update(content);`
      }
     }
   );
@@ -118,23 +118,23 @@ if (module.hot) {
               if (update && refs > 0) {
                 update(content);
               }`
-            : `var newContent = require(${loaderUtils.stringifyRequest(
+            : `content = require(${loaderUtils.stringifyRequest(
                 this,
                 `!!${request}`
               )});
 
-              newContent = newContent.__esModule ? newContent.default : newContent;
+              content = content.__esModule ? content.default : content;
 
-              if (!isEqualLocals(oldLocals, newContent.locals)) {
+              if (!isEqualLocals(oldLocals, content.locals)) {
                 module.hot.invalidate();
 
                 return;
               }
 
-              oldLocals = newContent.locals;
+              oldLocals = content.locals;
 
               if (update && refs > 0) {
-                update(newContent);
+                update(content);
               }`
         }
       }
@@ -230,26 +230,26 @@ if (module.hot) {
               oldLocals = content.locals;
 
               update(content);`
-            : `var newContent = require(${loaderUtils.stringifyRequest(
+            : `content = require(${loaderUtils.stringifyRequest(
                 this,
                 `!!${request}`
               )});
 
-              newContent = newContent.__esModule ? newContent.default : newContent;
+              content = content.__esModule ? content.default : content;
 
-              if (typeof newContent === 'string') {
-                newContent = [[module.id, newContent, '']];
+              if (typeof content === 'string') {
+                content = [[module.id, content, '']];
               }
 
-              if (!isEqualLocals(oldLocals, newContent.locals)) {
+              if (!isEqualLocals(oldLocals, content.locals)) {
                 module.hot.invalidate();
 
                 return;
               }
 
-              oldLocals = newContent.locals;
+              oldLocals = content.locals;
 
-              update(newContent);`
+              update(content);`
         }
       }
     )

src/index.js

@@ -87,6 +87,10 @@ <h2>Modules</h2>
       <div class="page-btn">BACKGROUND SHOULD BE CRIMSON</div>
     </section>
 
+    <section id="toggle-section">
+      <h2>Toggle</h2>
+    </section>
+
     <section>
       <h2>Custom element</h2>
       <custom-square l="100" c="red"></custom-square>

test/manual/index.html

@@ -16,6 +16,7 @@ import one from './modules/one.module.css';
 import two from './modules/two.module.css';
 import toolbar from './modules/toolbar.module.css';
 import page from './modules/page.module.css';
+import toogle from './toogle.lazy.css';
 
 console.log('___LOCALS___');
 console.log(component);
@@ -114,3 +115,28 @@ const common1 = document.querySelector('.common');
 common1.className = toolbar.common;
 const pageBtn = document.querySelector('.page-btn');
 pageBtn.className = page['page-btn'];
+
+const button = document.createElement('button');
+
+button.innerText = 'Toggle CSS';
+
+let used = false;
+
+button.addEventListener('click', () => {
+  if (!used) {
+    console.log('toggle on');
+    toogle.use();
+
+    used = true;
+  } else {
+    console.log('toggle off');
+
+    toogle.unuse();
+
+    used = false;
+  }
+});
+
+const toggleSection = document.getElementById('toggle-section');
+
+toggleSection.appendChild(button);

test/manual/src/index.js

@@ -0,0 +1,3 @@
+#toggle-section {
+  background-color: red;
+}