Skip to content

Commit 9636f58

Browse files
fix: compatibility with built-in CSS support (#605)
1 parent 1eb00b5 commit 9636f58

File tree

5 files changed

+123
-51
lines changed

5 files changed

+123
-51
lines changed

package-lock.json

+56-46
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"babel-jest": "^28.1.3",
5757
"cross-env": "^7.0.3",
5858
"cspell": "^6.31.1",
59-
"css-loader": "^6.7.3",
59+
"css-loader": "^6.7.4",
6060
"del": "^6.1.1",
6161
"del-cli": "^4.0.1",
6262
"es-check": "^7.1.1",
@@ -76,7 +76,7 @@
7676
"sass-loader": "^12.4.0",
7777
"semver": "^7.5.0",
7878
"standard-version": "^9.5.0",
79-
"webpack": "^5.81.0",
79+
"webpack": "^5.83.1",
8080
"webpack-cli": "^4.10.0",
8181
"webpack-dev-server": "^4.13.3"
8282
},

src/index.js

+34-3
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,37 @@ import {
2222

2323
import schema from "./options.json";
2424

25-
const loaderAPI = () => {};
25+
// eslint-disable-next-line consistent-return
26+
const loader = function loader(content) {
27+
if (
28+
this._compiler &&
29+
this._compiler.options &&
30+
this._compiler.options.experiments &&
31+
this._compiler.options.experiments.css &&
32+
this._module &&
33+
this._module.type === "css"
34+
) {
35+
return content;
36+
}
37+
};
38+
39+
loader.pitch = function pitch(request) {
40+
if (
41+
this._compiler &&
42+
this._compiler.options &&
43+
this._compiler.options.experiments &&
44+
this._compiler.options.experiments.css &&
45+
this._module &&
46+
this._module.type === "css"
47+
) {
48+
this.emitWarning(
49+
new Error(
50+
'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).'
51+
)
52+
);
53+
return;
54+
}
2655

27-
loaderAPI.pitch = function loader(request) {
2856
const options = this.getOptions(schema);
2957
const injectType = options.injectType || "styleTag";
3058
const esModule =
@@ -57,6 +85,7 @@ loaderAPI.pitch = function loader(request) {
5785
case "linkTag": {
5886
const hmrCode = this.hot ? getLinkHmrCode(esModule, this, request) : "";
5987

88+
// eslint-disable-next-line consistent-return
6089
return `
6190
${getImportLinkAPICode(esModule, this)}
6291
${getImportInsertBySelectorCode(esModule, this, insertType, options)}
@@ -87,6 +116,7 @@ ${esModule ? "export default {}" : ""}`;
87116
? getStyleHmrCode(esModule, this, request, true)
88117
: "";
89118

119+
// eslint-disable-next-line consistent-return
90120
return `
91121
var exported = {};
92122
@@ -157,6 +187,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
157187
? getStyleHmrCode(esModule, this, request, false)
158188
: "";
159189

190+
// eslint-disable-next-line consistent-return
160191
return `
161192
${getImportStyleAPICode(esModule, this)}
162193
${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
@@ -196,4 +227,4 @@ ${getExportStyleCode(esModule, this, request)}
196227
}
197228
};
198229

199-
export default loaderAPI;
230+
export default loader;

test/__snapshots__/loader.test.js.snap

+15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`loader should do nothing with built-in CSS support: errors 1`] = `Array []`;
4+
5+
exports[`loader should do nothing with built-in CSS support: warnings 1`] = `
6+
Array [
7+
"ModuleWarning: Module Warning (from ../../node_modules/css-loader/dist/cjs.js):
8+
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).",
9+
"ModuleWarning: Module Warning (from ../../src/cjs.js):
10+
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).",
11+
"ModuleWarning: Module Warning (from ../../node_modules/css-loader/dist/cjs.js):
12+
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).",
13+
"ModuleWarning: Module Warning (from ../../src/cjs.js):
14+
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).",
15+
]
16+
`;
17+
318
exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "autoStyleTag": errors 1`] = `Array []`;
419

520
exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "autoStyleTag": warnings 1`] = `Array []`;

test/loader.test.js

+16
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,22 @@ describe("loader", () => {
3939
expect(getErrors(stats)).toMatchSnapshot("errors");
4040
});
4141

42+
it("should do nothing with built-in CSS support", async () => {
43+
const compiler = getCompiler(
44+
"./simple.js",
45+
{},
46+
{
47+
experiments: {
48+
css: true,
49+
},
50+
}
51+
);
52+
const stats = await compile(compiler);
53+
54+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
55+
expect(getErrors(stats)).toMatchSnapshot("errors");
56+
});
57+
4258
injectTypes.forEach((injectType) => {
4359
it(`should work when the "injectType" option is "${injectType}"`, async () => {
4460
expect.assertions(3);

0 commit comments

Comments
 (0)