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

package.json

@@ -56,7 +56,7 @@
     "babel-jest": "^28.1.3",
     "cross-env": "^7.0.3",
     "cspell": "^6.31.1",
-    "css-loader": "^6.7.3",
+    "css-loader": "^6.7.4",
     "del": "^6.1.1",
     "del-cli": "^4.0.1",
     "es-check": "^7.1.1",
@@ -76,7 +76,7 @@
     "sass-loader": "^12.4.0",
     "semver": "^7.5.0",
     "standard-version": "^9.5.0",
-    "webpack": "^5.81.0",
+    "webpack": "^5.83.1",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.13.3"
   },

src/index.js

@@ -22,9 +22,37 @@ import {
 
 import schema from "./options.json";
 
-const loaderAPI = () => {};
+// eslint-disable-next-line consistent-return
+const loader = 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;
+  }
+};
+
+loader.pitch = 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 `style-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `style-loader` in your webpack config (now `style-loader` does nothing).'
+      )
+    );
+    return;
+  }
 
-loaderAPI.pitch = function loader(request) {
   const options = this.getOptions(schema);
   const injectType = options.injectType || "styleTag";
   const esModule =
@@ -57,6 +85,7 @@ loaderAPI.pitch = function loader(request) {
     case "linkTag": {
       const hmrCode = this.hot ? getLinkHmrCode(esModule, this, request) : "";
 
+      // eslint-disable-next-line consistent-return
       return `
       ${getImportLinkAPICode(esModule, this)}
       ${getImportInsertBySelectorCode(esModule, this, insertType, options)}
@@ -87,6 +116,7 @@ ${esModule ? "export default {}" : ""}`;
         ? getStyleHmrCode(esModule, this, request, true)
         : "";
 
+      // eslint-disable-next-line consistent-return
       return `
       var exported = {};
 
@@ -157,6 +187,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
         ? getStyleHmrCode(esModule, this, request, false)
         : "";
 
+      // eslint-disable-next-line consistent-return
       return `
       ${getImportStyleAPICode(esModule, this)}
       ${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
@@ -196,4 +227,4 @@ ${getExportStyleCode(esModule, this, request)}
   }
 };
 
-export default loaderAPI;
+export default loader;

test/__snapshots__/loader.test.js.snap

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loader should do nothing with built-in CSS support: errors 1`] = `Array []`;
+
+exports[`loader should do nothing with built-in CSS support: warnings 1`] = `
+Array [
+  "ModuleWarning: 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).",
+  "ModuleWarning: Module Warning (from ../../src/cjs.js):
+You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`style-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`style-loader\` in your webpack config (now \`style-loader\` does nothing).",
+  "ModuleWarning: 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).",
+  "ModuleWarning: Module Warning (from ../../src/cjs.js):
+You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`style-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`style-loader\` in your webpack config (now \`style-loader\` does nothing).",
+]
+`;
+
 exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "autoStyleTag": errors 1`] = `Array []`;
 
 exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "autoStyleTag": warnings 1`] = `Array []`;

test/loader.test.js

@@ -39,6 +39,22 @@ describe("loader", () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  it("should do nothing with built-in CSS support", async () => {
+    const compiler = getCompiler(
+      "./simple.js",
+      {},
+      {
+        experiments: {
+          css: true,
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   injectTypes.forEach((injectType) => {
     it(`should work when the "injectType" option is "${injectType}"`, async () => {
       expect.assertions(3);