Skip to content

Commit f576ed6

Browse files
alexander-akaitalexander-akait
authored
fix: compatibility with built-in CSS support (#1035)
1 parent 8caa4a8 commit f576ed6

File tree

28 files changed

+415
-280
lines changed

28 files changed

+415
-280
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,8 @@ module.exports = {
569569
module: {
570570
rules: [
571571
{
572+
// If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
573+
// type: "javascript/auto",
572574
test: /\.(sa|sc|c)ss$/,
573575
use: [
574576
devMode ? "style-loader" : MiniCssExtractPlugin.loader,

‎package-lock.json

+218-218
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
@@ -67,7 +67,7 @@
6767
"bootstrap": "^4.6.2",
6868
"cross-env": "^7.0.3",
6969
"cspell": "^6.31.1",
70-
"css-loader": "^6.7.3",
70+
"css-loader": "^6.7.4",
7171
"del": "^6.0.0",
7272
"del-cli": "^4.0.0",
7373
"es-check": "^7.1.0",
@@ -87,7 +87,7 @@
8787
"sass-loader": "^12.6.0",
8888
"standard-version": "^9.3.0",
8989
"typescript": "^4.9.5",
90-
"webpack": "^5.77.0",
90+
"webpack": "^5.83.1",
9191
"webpack-cli": "^4.9.2",
9292
"webpack-dev-server": "^4.13.2"
9393
},

‎src/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ class MiniCssExtractPlugin {
142142
assets,
143143
assetsInfo,
144144
}) {
145+
// @ts-ignore
145146
super(MODULE_TYPE, /** @type {string | undefined} */ (context));
146147

147148
this.id = "";
@@ -703,7 +704,11 @@ class MiniCssExtractPlugin {
703704
const renderedModules = Array.from(
704705
/** @type {CssModule[]} */
705706
(this.getChunkModules(chunk, chunkGraph))
706-
).filter((module) => module.type === MODULE_TYPE);
707+
).filter(
708+
(module) =>
709+
// @ts-ignore
710+
module.type === MODULE_TYPE
711+
);
707712

708713
const filenameTemplate =
709714
/** @type {string} */
@@ -791,6 +796,7 @@ class MiniCssExtractPlugin {
791796
);
792797

793798
for (const module of modules) {
799+
// @ts-ignore
794800
if (module.type === MODULE_TYPE) {
795801
obj[/** @type {string} */ (chunk.id)] = 1;
796802

‎src/loader.js

+37-1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,23 @@ function hotLoader(content, context) {
6969
* @param {string} request
7070
*/
7171
function pitch(request) {
72+
if (
73+
this._compiler &&
74+
this._compiler.options &&
75+
this._compiler.options.experiments &&
76+
this._compiler.options.experiments.css &&
77+
this._module &&
78+
this._module.type === "css"
79+
) {
80+
this.emitWarning(
81+
new Error(
82+
'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).'
83+
)
84+
);
85+
86+
return;
87+
}
88+
7289
// @ts-ignore
7390
const options = this.getOptions(/** @type {Schema} */ (schema));
7491
const emit = typeof options.emit !== "undefined" ? options.emit : true;
@@ -488,4 +505,23 @@ function pitch(request) {
488505
});
489506
}
490507

491-
module.exports = { default: function loader() {}, pitch };
508+
/**
509+
* @this {import("webpack").LoaderContext<LoaderOptions>}
510+
* @param {string} content
511+
*/
512+
// eslint-disable-next-line consistent-return
513+
function loader(content) {
514+
if (
515+
this._compiler &&
516+
this._compiler.options &&
517+
this._compiler.options.experiments &&
518+
this._compiler.options.experiments.css &&
519+
this._module &&
520+
this._module.type === "css"
521+
) {
522+
return content;
523+
}
524+
}
525+
526+
module.exports = loader;
527+
module.exports.pitch = pitch;

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background: red;
3+
}
4+
5+
head{--webpack-0:_1;}

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./style.css";

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background: red;
3+
}

‎test/cases/build-in-css-support/warnings.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = [
2+
"WARNING in css ./style.css",
3+
"Module Warning (from ../../../node_modules/css-loader/dist/cjs.js):",
4+
'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).',
5+
"",
6+
"WARNING in css ./style.css",
7+
"Module Warning (from ../../../src/loader.js):",
8+
'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).',
9+
].join("\n");

‎test/cases/build-in-css-support/webpack.config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Self from "../../../src";
2+
3+
module.exports = {
4+
entry: "./index.js",
5+
output: {
6+
clean: false,
7+
cssFilename: "[name].css",
8+
},
9+
experiments: {
10+
css: true,
11+
},
12+
module: {
13+
rules: [
14+
{
15+
test: /\.css$/,
16+
use: [Self.loader, "css-loader"],
17+
},
18+
],
19+
},
20+
plugins: [
21+
new Self({
22+
filename: "[name].css",
23+
}),
24+
],
25+
};

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.4f347b01251fa5ea3e86.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.db7007e0f10c80a36b7a.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/4f347b01251fa5ea3e86.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/db7007e0f10c80a36b7a.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
7373
/******/
7474
/******/ /* webpack/runtime/getFullHash */
7575
/******/ (() => {
76-
/******/ __webpack_require__.h = () => ("4f347b01251fa5ea3e86")
76+
/******/ __webpack_require__.h = () => ("db7007e0f10c80a36b7a")
7777
/******/ })();
7878
/******/
7979
/******/ /* webpack/runtime/global */
@@ -159,7 +159,10 @@ __webpack_require__.r(__webpack_exports__);
159159
/******/ scriptUrl = document.currentScript.src;
160160
/******/ if (!scriptUrl) {
161161
/******/ var scripts = document.getElementsByTagName("script");
162-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
162+
/******/ if(scripts.length) {
163+
/******/ var i = scripts.length - 1;
164+
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
165+
/******/ }
163166
/******/ }
164167
/******/ }
165168
/******/ // 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__);
291294
/******/ }
292295
/******/ };
293296
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
294-
/******/ } else installedChunks[chunkId] = 0;
297+
/******/ }
295298
/******/ }
296299
/******/ }
297300
/******/ };

‎test/cases/chunkFilename-fullhash/expected/webpack-5/0.aa027b5009650677d5c5.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5/0.106784193c04ad826b7a.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5/aa027b5009650677d5c5.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5/106784193c04ad826b7a.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5/main.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
7373
/******/
7474
/******/ /* webpack/runtime/getFullHash */
7575
/******/ (() => {
76-
/******/ __webpack_require__.h = () => ("aa027b5009650677d5c5")
76+
/******/ __webpack_require__.h = () => ("106784193c04ad826b7a")
7777
/******/ })();
7878
/******/
7979
/******/ /* webpack/runtime/global */
@@ -159,7 +159,10 @@ __webpack_require__.r(__webpack_exports__);
159159
/******/ scriptUrl = document.currentScript.src;
160160
/******/ if (!scriptUrl) {
161161
/******/ var scripts = document.getElementsByTagName("script");
162-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
162+
/******/ if(scripts.length) {
163+
/******/ var i = scripts.length - 1;
164+
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
165+
/******/ }
163166
/******/ }
164167
/******/ }
165168
/******/ // 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__);
291294
/******/ }
292295
/******/ };
293296
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
294-
/******/ } else installedChunks[chunkId] = 0;
297+
/******/ }
295298
/******/ }
296299
/******/ }
297300
/******/ };

‎test/cases/custom-loader-with-functional-exports/expected/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
__webpack_require__.r(__webpack_exports__);
99
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10-
/* harmony export */ "cnA": () => (/* binding */ cnA),
11-
/* harmony export */ "cnB": () => (/* binding */ cnB)
10+
/* harmony export */ cnA: () => (/* binding */ cnA),
11+
/* harmony export */ cnB: () => (/* binding */ cnB)
1212
/* harmony export */ });
1313
// extracted by mini-css-extract-plugin
1414
var cnA = () => "class-name-a";

‎test/cases/es-module-concatenation-modules/expected/main.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -39,32 +39,32 @@ __webpack_require__.r(__webpack_exports__);
3939

4040
// EXPORTS
4141
__webpack_require__.d(__webpack_exports__, {
42-
"a": () => (/* reexport */ a_namespaceObject),
43-
"b": () => (/* reexport */ b_namespaceObject),
44-
"c": () => (/* reexport */ c)
42+
a: () => (/* reexport */ a_namespaceObject),
43+
b: () => (/* reexport */ b_namespaceObject),
44+
c: () => (/* reexport */ c)
4545
});
4646

4747
// NAMESPACE OBJECT: ./a.css
4848
var a_namespaceObject = {};
4949
__webpack_require__.r(a_namespaceObject);
5050
__webpack_require__.d(a_namespaceObject, {
51-
"a": () => (a)
51+
a: () => (a)
5252
});
5353

5454
// NAMESPACE OBJECT: ./b.css
5555
var b_namespaceObject = {};
5656
__webpack_require__.r(b_namespaceObject);
5757
__webpack_require__.d(b_namespaceObject, {
58-
"b": () => (b)
58+
b: () => (b)
5959
});
6060

6161
// NAMESPACE OBJECT: ./index.js
6262
var index_namespaceObject = {};
6363
__webpack_require__.r(index_namespaceObject);
6464
__webpack_require__.d(index_namespaceObject, {
65-
"a": () => (a_namespaceObject),
66-
"b": () => (b_namespaceObject),
67-
"c": () => (c)
65+
a: () => (a_namespaceObject),
66+
b: () => (b_namespaceObject),
67+
c: () => (c)
6868
});
6969

7070
;// CONCATENATED MODULE: ./a.css

‎test/cases/es-named-export-output-module/expected/main.mjs

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55

66
__webpack_require__.r(__webpack_exports__);
77
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
8-
/* harmony export */ "aClass": () => (/* binding */ aClass),
9-
/* harmony export */ "bClass": () => (/* binding */ bClass),
10-
/* harmony export */ "cClass": () => (/* binding */ cClass)
8+
/* harmony export */ aClass: () => (/* binding */ aClass),
9+
/* harmony export */ bClass: () => (/* binding */ bClass),
10+
/* harmony export */ cClass: () => (/* binding */ cClass)
1111
/* harmony export */ });
1212
// extracted by mini-css-extract-plugin
1313
var aClass = "foo__style__a-class";

‎test/cases/es-named-export/expected/main.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
__webpack_require__.r(__webpack_exports__);
99
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10-
/* harmony export */ "aClass": () => (/* binding */ aClass),
11-
/* harmony export */ "bClass": () => (/* binding */ bClass),
12-
/* harmony export */ "cClass": () => (/* binding */ cClass)
10+
/* harmony export */ aClass: () => (/* binding */ aClass),
11+
/* harmony export */ bClass: () => (/* binding */ bClass),
12+
/* harmony export */ cClass: () => (/* binding */ cClass)
1313
/* harmony export */ });
1414
// extracted by mini-css-extract-plugin
1515
var aClass = "foo__style__a-class";

‎test/cases/export-only-locals-and-es-named-export/expected/main.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
__webpack_require__.r(__webpack_exports__);
99
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
10-
/* harmony export */ "aClass": () => (/* binding */ aClass),
11-
/* harmony export */ "bClass": () => (/* binding */ bClass),
12-
/* harmony export */ "cClass": () => (/* binding */ cClass)
10+
/* harmony export */ aClass: () => (/* binding */ aClass),
11+
/* harmony export */ bClass: () => (/* binding */ bClass),
12+
/* harmony export */ cClass: () => (/* binding */ cClass)
1313
/* harmony export */ });
1414
// extracted by mini-css-extract-plugin
1515
var aClass = "foo__style__a-class";

‎test/cases/hmr/expected/main.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -922,7 +922,10 @@ __webpack_require__.r(__webpack_exports__);
922922
/******/ scriptUrl = document.currentScript.src;
923923
/******/ if (!scriptUrl) {
924924
/******/ var scripts = document.getElementsByTagName("script");
925-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
925+
/******/ if(scripts.length) {
926+
/******/ var i = scripts.length - 1;
927+
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
928+
/******/ }
926929
/******/ }
927930
/******/ }
928931
/******/ // 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

+5-2
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,10 @@
143143
/******/ scriptUrl = document.currentScript.src;
144144
/******/ if (!scriptUrl) {
145145
/******/ var scripts = document.getElementsByTagName("script");
146-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
146+
/******/ if(scripts.length) {
147+
/******/ var i = scripts.length - 1;
148+
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
149+
/******/ }
147150
/******/ }
148151
/******/ }
149152
/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -276,7 +279,7 @@
276279
/******/ }
277280
/******/ };
278281
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
279-
/******/ } else installedChunks[chunkId] = 0;
282+
/******/ }
280283
/******/ }
281284
/******/ }
282285
/******/ };

‎test/cases/insert-string/expected/main.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,10 @@
143143
/******/ scriptUrl = document.currentScript.src;
144144
/******/ if (!scriptUrl) {
145145
/******/ var scripts = document.getElementsByTagName("script");
146-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
146+
/******/ if(scripts.length) {
147+
/******/ var i = scripts.length - 1;
148+
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
149+
/******/ }
147150
/******/ }
148151
/******/ }
149152
/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -272,7 +275,7 @@
272275
/******/ }
273276
/******/ };
274277
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
275-
/******/ } else installedChunks[chunkId] = 0;
278+
/******/ }
276279
/******/ }
277280
/******/ }
278281
/******/ };

‎test/cases/insert-undefined/expected/main.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,10 @@
143143
/******/ scriptUrl = document.currentScript.src;
144144
/******/ if (!scriptUrl) {
145145
/******/ var scripts = document.getElementsByTagName("script");
146-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
146+
/******/ if(scripts.length) {
147+
/******/ var i = scripts.length - 1;
148+
/******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
149+
/******/ }
147150
/******/ }
148151
/******/ }
149152
/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
@@ -275,7 +278,7 @@
275278
/******/ }
276279
/******/ };
277280
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
278-
/******/ } else installedChunks[chunkId] = 0;
281+
/******/ }
279282
/******/ }
280283
/******/ }
281284
/******/ };

0 commit comments

Comments
 (0)