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

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,

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"
   },

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;
 

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;

test/cases/build-in-css-support/expected/main.css

@@ -0,0 +1,5 @@
+body {
+  background: red;
+}
+
+head{--webpack-0:_1;}

test/cases/build-in-css-support/index.js

@@ -0,0 +1 @@
+import "./style.css";

test/cases/build-in-css-support/style.css

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

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");

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",
+    }),
+  ],
+};

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;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

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;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

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";

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

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";

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";

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";

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

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;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

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;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};

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;
+/******/ 						}
 /******/ 					}
 /******/ 				}
 /******/ 		};