fix: compatibility with built-in CSS support (#1035)

webpack-contrib · May 19, 2023 · f576ed6 · f576ed6
1 parent 8caa4a8
commit f576ed6
Show file tree

Hide file tree

Showing 28 changed files with 415 additions and 280 deletions.
diff --git a/README.md b/README.md
@@ -569,6 +569,8 @@ module.exports = {
   module: {
     rules: [
       {
+        // If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
+        // type: "javascript/auto",
         test: /\.(sa|sc|c)ss$/,
         use: [
           devMode ? "style-loader" : MiniCssExtractPlugin.loader,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "bootstrap": "^4.6.2",
     "cross-env": "^7.0.3",
     "cspell": "^6.31.1",
-    "css-loader": "^6.7.3",
+    "css-loader": "^6.7.4",
     "del": "^6.0.0",
     "del-cli": "^4.0.0",
     "es-check": "^7.1.0",
@@ -87,7 +87,7 @@
     "sass-loader": "^12.6.0",
     "standard-version": "^9.3.0",
     "typescript": "^4.9.5",
-    "webpack": "^5.77.0",
+    "webpack": "^5.83.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.13.2"
   },

diff --git a/src/index.js b/src/index.js
@@ -142,6 +142,7 @@ class MiniCssExtractPlugin {
         assets,
         assetsInfo,
       }) {
+        // @ts-ignore
         super(MODULE_TYPE, /** @type {string | undefined} */ (context));
 
         this.id = "";
@@ -703,7 +704,11 @@ class MiniCssExtractPlugin {
           const renderedModules = Array.from(
             /** @type {CssModule[]} */
             (this.getChunkModules(chunk, chunkGraph))
-          ).filter((module) => module.type === MODULE_TYPE);
+          ).filter(
+            (module) =>
+              // @ts-ignore
+              module.type === MODULE_TYPE
+          );
 
           const filenameTemplate =
             /** @type {string} */
@@ -791,6 +796,7 @@ class MiniCssExtractPlugin {
           );
 
           for (const module of modules) {
+            // @ts-ignore
             if (module.type === MODULE_TYPE) {
               obj[/** @type {string} */ (chunk.id)] = 1;
 

diff --git a/src/loader.js b/src/loader.js
@@ -69,6 +69,23 @@ function hotLoader(content, context) {
  * @param {string} request
  */
 function pitch(request) {
+  if (
+    this._compiler &&
+    this._compiler.options &&
+    this._compiler.options.experiments &&
+    this._compiler.options.experiments.css &&
+    this._module &&
+    this._module.type === "css"
+  ) {
+    this.emitWarning(
+      new Error(
+        'You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `mini-css-extract-plugin` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `mini-css-extract-plugin` in your webpack config (now `mini-css-extract-plugin` does nothing).'
+      )
+    );
+
+    return;
+  }
+
   // @ts-ignore
   const options = this.getOptions(/** @type {Schema} */ (schema));
   const emit = typeof options.emit !== "undefined" ? options.emit : true;
@@ -488,4 +505,23 @@ function pitch(request) {
   });
 }
 
-module.exports = { default: function loader() {}, pitch };
+/**
+ * @this {import("webpack").LoaderContext<LoaderOptions>}
+ * @param {string} content
+ */
+// eslint-disable-next-line consistent-return
+function loader(content) {
+  if (
+    this._compiler &&
+    this._compiler.options &&
+    this._compiler.options.experiments &&
+    this._compiler.options.experiments.css &&
+    this._module &&
+    this._module.type === "css"
+  ) {
+    return content;
+  }
+}
+
+module.exports = loader;
+module.exports.pitch = pitch;
diff --git a/test/cases/build-in-css-support/expected/main.css b/test/cases/build-in-css-support/expected/main.css
@@ -0,0 +1,5 @@
+body {
+  background: red;
+}
+
+head{--webpack-0:_1;}
diff --git a/test/cases/build-in-css-support/index.js b/test/cases/build-in-css-support/index.js
@@ -0,0 +1 @@
+import "./style.css";
diff --git a/test/cases/build-in-css-support/style.css b/test/cases/build-in-css-support/style.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/test/cases/build-in-css-support/warnings.js b/test/cases/build-in-css-support/warnings.js
@@ -0,0 +1,9 @@
+module.exports = [
+  "WARNING in css ./style.css",
+  "Module Warning (from ../../../node_modules/css-loader/dist/cjs.js):",
+  'You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `css-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `css-loader` in your webpack config (now css-loader does nothing).',
+  "",
+  "WARNING in css ./style.css",
+  "Module Warning (from ../../../src/loader.js):",
+  'You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `mini-css-extract-plugin` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `mini-css-extract-plugin` in your webpack config (now `mini-css-extract-plugin` does nothing).',
+].join("\n");
diff --git a/test/cases/build-in-css-support/webpack.config.js b/test/cases/build-in-css-support/webpack.config.js
@@ -0,0 +1,25 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.js",
+  output: {
+    clean: false,
+    cssFilename: "[name].css",
+  },
+  experiments: {
+    css: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/...5-importModule/0.4f347b01251fa5ea3e86.css → ...5-importModule/0.db7007e0f10c80a36b7a.css b/...5-importModule/0.4f347b01251fa5ea3e86.css → ...5-importModule/0.db7007e0f10c80a36b7a.css
diff --git a/...k-5-importModule/4f347b01251fa5ea3e86.css → ...k-5-importModule/db7007e0f10c80a36b7a.css b/...k-5-importModule/4f347b01251fa5ea3e86.css → ...k-5-importModule/db7007e0f10c80a36b7a.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("4f347b01251fa5ea3e86")
+/******/ 		__webpack_require__.h = () => ("db7007e0f10c80a36b7a")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
@@ -159,7 +159,10 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 				scriptUrl = document.currentScript.src;
 /******/ 			if (!scriptUrl) {
 /******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 				if(scripts.length) {
+/******/ 					var i = scripts.length - 1;
+/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 				}
 /******/ 			}
 /******/ 		}
 /******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -291,7 +294,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 								}
 /******/ 							};
 /******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						} else installedChunks[chunkId] = 0;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

diff --git a/...cted/webpack-5/0.aa027b5009650677d5c5.css → ...cted/webpack-5/0.106784193c04ad826b7a.css b/...cted/webpack-5/0.aa027b5009650677d5c5.css → ...cted/webpack-5/0.106784193c04ad826b7a.css
diff --git a/...pected/webpack-5/aa027b5009650677d5c5.css → ...pected/webpack-5/106784193c04ad826b7a.css b/...pected/webpack-5/aa027b5009650677d5c5.css → ...pected/webpack-5/106784193c04ad826b7a.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("aa027b5009650677d5c5")
+/******/ 		__webpack_require__.h = () => ("106784193c04ad826b7a")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
@@ -159,7 +159,10 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 				scriptUrl = document.currentScript.src;
 /******/ 			if (!scriptUrl) {
 /******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 				if(scripts.length) {
+/******/ 					var i = scripts.length - 1;
+/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 				}
 /******/ 			}
 /******/ 		}
 /******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -291,7 +294,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 								}
 /******/ 							};
 /******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						} else installedChunks[chunkId] = 0;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

diff --git a/test/cases/custom-loader-with-functional-exports/expected/main.js b/test/cases/custom-loader-with-functional-exports/expected/main.js
@@ -7,8 +7,8 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "cnA": () => (/* binding */ cnA),
-/* harmony export */   "cnB": () => (/* binding */ cnB)
+/* harmony export */   cnA: () => (/* binding */ cnA),
+/* harmony export */   cnB: () => (/* binding */ cnB)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
 var cnA = () => "class-name-a";

diff --git a/test/cases/es-module-concatenation-modules/expected/main.js b/test/cases/es-module-concatenation-modules/expected/main.js
@@ -39,32 +39,32 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "a": () => (/* reexport */ a_namespaceObject),
-  "b": () => (/* reexport */ b_namespaceObject),
-  "c": () => (/* reexport */ c)
+  a: () => (/* reexport */ a_namespaceObject),
+  b: () => (/* reexport */ b_namespaceObject),
+  c: () => (/* reexport */ c)
 });
 
 // NAMESPACE OBJECT: ./a.css
 var a_namespaceObject = {};
 __webpack_require__.r(a_namespaceObject);
 __webpack_require__.d(a_namespaceObject, {
-  "a": () => (a)
+  a: () => (a)
 });
 
 // NAMESPACE OBJECT: ./b.css
 var b_namespaceObject = {};
 __webpack_require__.r(b_namespaceObject);
 __webpack_require__.d(b_namespaceObject, {
-  "b": () => (b)
+  b: () => (b)
 });
 
 // NAMESPACE OBJECT: ./index.js
 var index_namespaceObject = {};
 __webpack_require__.r(index_namespaceObject);
 __webpack_require__.d(index_namespaceObject, {
-  "a": () => (a_namespaceObject),
-  "b": () => (b_namespaceObject),
-  "c": () => (c)
+  a: () => (a_namespaceObject),
+  b: () => (b_namespaceObject),
+  c: () => (c)
 });
 
 ;// CONCATENATED MODULE: ./a.css

diff --git a/test/cases/es-named-export-output-module/expected/main.mjs b/test/cases/es-named-export-output-module/expected/main.mjs
@@ -5,9 +5,9 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "aClass": () => (/* binding */ aClass),
-/* harmony export */   "bClass": () => (/* binding */ bClass),
-/* harmony export */   "cClass": () => (/* binding */ cClass)
+/* harmony export */   aClass: () => (/* binding */ aClass),
+/* harmony export */   bClass: () => (/* binding */ bClass),
+/* harmony export */   cClass: () => (/* binding */ cClass)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
 var aClass = "foo__style__a-class";

diff --git a/test/cases/es-named-export/expected/main.js b/test/cases/es-named-export/expected/main.js
@@ -7,9 +7,9 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "aClass": () => (/* binding */ aClass),
-/* harmony export */   "bClass": () => (/* binding */ bClass),
-/* harmony export */   "cClass": () => (/* binding */ cClass)
+/* harmony export */   aClass: () => (/* binding */ aClass),
+/* harmony export */   bClass: () => (/* binding */ bClass),
+/* harmony export */   cClass: () => (/* binding */ cClass)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
 var aClass = "foo__style__a-class";

diff --git a/test/cases/export-only-locals-and-es-named-export/expected/main.js b/test/cases/export-only-locals-and-es-named-export/expected/main.js
@@ -7,9 +7,9 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "aClass": () => (/* binding */ aClass),
-/* harmony export */   "bClass": () => (/* binding */ bClass),
-/* harmony export */   "cClass": () => (/* binding */ cClass)
+/* harmony export */   aClass: () => (/* binding */ aClass),
+/* harmony export */   bClass: () => (/* binding */ bClass),
+/* harmony export */   cClass: () => (/* binding */ cClass)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
 var aClass = "foo__style__a-class";

diff --git a/test/cases/hmr/expected/main.js b/test/cases/hmr/expected/main.js
@@ -922,7 +922,10 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 				scriptUrl = document.currentScript.src;
 /******/ 			if (!scriptUrl) {
 /******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 				if(scripts.length) {
+/******/ 					var i = scripts.length - 1;
+/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 				}
 /******/ 			}
 /******/ 		}
 /******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration

diff --git a/test/cases/insert-function/expected/main.js b/test/cases/insert-function/expected/main.js
@@ -143,7 +143,10 @@
 /******/ 				scriptUrl = document.currentScript.src;
 /******/ 			if (!scriptUrl) {
 /******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 				if(scripts.length) {
+/******/ 					var i = scripts.length - 1;
+/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 				}
 /******/ 			}
 /******/ 		}
 /******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -276,7 +279,7 @@
 /******/ 								}
 /******/ 							};
 /******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						} else installedChunks[chunkId] = 0;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

diff --git a/test/cases/insert-string/expected/main.js b/test/cases/insert-string/expected/main.js
@@ -143,7 +143,10 @@
 /******/ 				scriptUrl = document.currentScript.src;
 /******/ 			if (!scriptUrl) {
 /******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 				if(scripts.length) {
+/******/ 					var i = scripts.length - 1;
+/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 				}
 /******/ 			}
 /******/ 		}
 /******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -272,7 +275,7 @@
 /******/ 								}
 /******/ 							};
 /******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						} else installedChunks[chunkId] = 0;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

diff --git a/test/cases/insert-undefined/expected/main.js b/test/cases/insert-undefined/expected/main.js
@@ -143,7 +143,10 @@
 /******/ 				scriptUrl = document.currentScript.src;
 /******/ 			if (!scriptUrl) {
 /******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 				if(scripts.length) {
+/******/ 					var i = scripts.length - 1;
+/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 				}
 /******/ 			}
 /******/ 		}
 /******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -275,7 +278,7 @@
 /******/ 								}
 /******/ 							};
 /******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						} else installedChunks[chunkId] = 0;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};