chore(webpack-5): update for webpack 5

update manual test cases
update CssModule for webpack 5 (to avoid deprecation)
clean up inconsistency in loader

Author: sokra

src/CssModule.js

@@ -2,6 +2,12 @@ import webpack from 'webpack';
 
 import { MODULE_TYPE } from './utils';
 
+const TYPES = new Set([MODULE_TYPE]);
+const CODE_GENERATION_RESULT = {
+  sources: new Map(),
+  runtimeRequirements: new Set(),
+};
+
 class CssModule extends webpack.Module {
   constructor({
     context,
@@ -20,9 +26,11 @@ class CssModule extends webpack.Module {
     this.content = content;
     this.media = media;
     this.sourceMap = sourceMap;
+    this.buildInfo = {};
+    this.buildMeta = {};
   }
 
-  // no source() so webpack doesn't do add stuff to the bundle
+  // no source() so webpack 4 doesn't do add stuff to the bundle
 
   size() {
     return this.content.length;
@@ -38,6 +46,16 @@ class CssModule extends webpack.Module {
     }`;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  getSourceTypes() {
+    return TYPES;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  codeGeneration() {
+    return CODE_GENERATION_RESULT;
+  }
+
   nameForCondition() {
     const resource = this._identifier.split('!').pop();
     const idx = resource.indexOf('?');
@@ -60,6 +78,11 @@ class CssModule extends webpack.Module {
     return true;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  needBuild(context, callback) {
+    callback(null, false);
+  }
+
   build(options, compilation, resolver, fileSystem, callback) {
     this.buildInfo = {};
     this.buildMeta = {};

src/loader.js

@@ -192,11 +192,10 @@ export function pitch(request) {
         : originalExports;
 
       if (namedExport) {
-        locals = '';
-
         Object.keys(originalExports).forEach((key) => {
           if (key !== 'default') {
-            locals += `\nexport const ${key} = "${originalExports[key]}";`;
+            if (!locals) locals = {};
+            locals[key] = originalExports[key];
           }
         });
       } else {
@@ -228,7 +227,11 @@ export function pitch(request) {
 
     const result = locals
       ? namedExport
-        ? locals
+        ? Object.keys(locals)
+            .map(
+              (key) => `\nexport const ${key} = ${JSON.stringify(locals[key])};`
+            )
+            .join('')
         : `\n${
             esModule ? 'export default' : 'module.exports ='
           } ${JSON.stringify(locals)};`

test/manual/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>mini-css-extract-plugin testcase</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" type="text/css" href="/dist/preloaded1.css" />
+  <link rel="stylesheet" type="text/css" href="/dist/preloaded1.chunk.css" />
   <style>
     .test {
       background: lightcoral;
@@ -18,7 +18,7 @@
       background: lightgreen;
     }
   </style>
-  <style data-href="preloaded2.css">
+  <style data-href="preloaded2.chunk.css">
     .preloaded-css2 {
       background: lightgreen;
     }
@@ -46,18 +46,21 @@
     <p>But turn orange, when <button class="lazy-button2">pressing this button</button>. Additional clicks have no effect.</p>
     <p>Refresh and press buttons in reverse order: This should turn green instead.</p>
   </div>
+  <div class="test lazy-css-module">
+    <p>Lazy CSS Module: Must be red, but turn green when <button class="lazy-module-button">pressing this button</button>.</p>
+  </div>
   <div class="test lazy-failure-css">
     <p>Lazy CSS: Turn off the network and <button class="lazy-failure-button">press this button</button>.</p>
     <p>An error should have appeared.</p>
     <p>Now if you turn the network back on and click it again, it should turn aqua.</p>
   </div>
   <div class="test preloaded-css1">
     <p>Preloaded CSS: Must be green.</p>
-    <p><button class="preloaded-button1">Pressing this button</button> displays an alert and should turn red.</p>
+    <p><button class="preloaded-button1">Pressing this button</button> displays an alert but has no styling effect.</p>
   </div>
   <div class="test preloaded-css2">
     <p>Preloaded inlined CSS: Must be green.</p>
-    <p><button class="preloaded-button2">Pressing this button</button> displays an alert and should turn red.</p>
+    <p><button class="preloaded-button2">Pressing this button</button> displays an alert but has no styling effect.</p>
   </div>
   <div class="test crossorigin">
     <p>CrossOriginLoading Option: Must be red.</p>

test/manual/src/index.js

@@ -23,6 +23,21 @@ Object.keys(classes).forEach((localClass) => {
   replaceClass(localClass, classes[localClass]);
 });
 
+let oldClasses = classes;
+
+if (module.hot) {
+  module.hot.accept('./simple.module.css', () => {
+    Object.keys(oldClasses).forEach((localClass) => {
+      replaceClass(oldClasses[localClass], localClass);
+    });
+    Object.keys(classes).forEach((localClass) => {
+      replaceClass(localClass, classes[localClass]);
+    });
+    oldClasses = classes;
+    alert('HMR updated CSS module');
+  });
+}
+
 const handleError = (err) => {
   document.querySelector('.errors').textContent += `\n${err.toString()}`;
   console.error(err);
@@ -44,6 +59,12 @@ const makeButton = (className, fn, shouldDisable = true) => {
 
 makeButton('.lazy-button', () => import('./lazy.js'));
 makeButton('.lazy-button2', () => import('./lazy2.css'));
+makeButton('.lazy-module-button', () =>
+  import('./lazy.module.css').then((module) => {
+    console.log(module);
+    document.querySelector('.lazy-css-module').classList.add(module.style);
+  })
+);
 
 makeButton('.preloaded-button1', () =>
   import(/* webpackChunkName: "preloaded1" */ './preloaded1')
@@ -56,7 +77,7 @@ makeButton('.lazy-failure-button', () => import('./lazy-failure.js'), false);
 
 makeButton('.crossorigin', () => {
   const originalPublicPath = __webpack_public_path__;
-  __webpack_public_path__ = 'http://0.0.0.0:8080/dist/';
+  __webpack_public_path__ = 'http://127.0.0.1:8080/dist/';
   const promise = import('./crossorigin').then(() => {
     const lastTwoElements = Array.from(document.head.children).slice(-2);
     const hasCrossorigin = lastTwoElements.every(

test/manual/src/lazy.module.css

@@ -0,0 +1,3 @@
+.style {
+  background: lightgreen;
+}

test/manual/webpack.config.js

@@ -13,7 +13,7 @@ const ENABLE_ES_MODULE =
 module.exports = {
   mode: 'development',
   output: {
-    chunkFilename: '[contenthash].js',
+    chunkFilename: '[name].chunk.js',
     publicPath: '/dist/',
     crossOriginLoading: 'anonymous',
   },
@@ -60,7 +60,7 @@ module.exports = {
   plugins: [
     new Self({
       filename: '[name].css',
-      chunkFilename: '[contenthash].css',
+      chunkFilename: '[name].chunk.css',
     }),
   ],
   devServer: {