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

Author: alexander-akait

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

package.json

@@ -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/index.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;

src/loader.js

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

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

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

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

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

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

@@ -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/warnings.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",
+    }),
+  ],
+};