Skip to content

Commit

Permalink
fix: compatibility with built-in CSS support (#1035)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-akait authored May 19, 2023
1 parent 8caa4a8 commit f576ed6
Show file tree
Hide file tree
Showing 28 changed files with 415 additions and 280 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
436 changes: 218 additions & 218 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
8 changes: 7 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ class MiniCssExtractPlugin {
assets,
assetsInfo,
}) {
// @ts-ignore
super(MODULE_TYPE, /** @type {string | undefined} */ (context));

this.id = "";
Expand Down Expand Up @@ -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} */
Expand Down Expand Up @@ -791,6 +796,7 @@ class MiniCssExtractPlugin {
);

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

Expand Down
38 changes: 37 additions & 1 deletion src/loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
5 changes: 5 additions & 0 deletions test/cases/build-in-css-support/expected/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
body {
background: red;
}

head{--webpack-0:_1;}
1 change: 1 addition & 0 deletions test/cases/build-in-css-support/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import "./style.css";
3 changes: 3 additions & 0 deletions test/cases/build-in-css-support/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
background: red;
}
9 changes: 9 additions & 0 deletions test/cases/build-in-css-support/warnings.js
Original file line number Diff line number Diff line change
@@ -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");
25 changes: 25 additions & 0 deletions test/cases/build-in-css-support/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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",
}),
],
};
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
/******/ __webpack_require__.h = () => ("4f347b01251fa5ea3e86")
/******/ __webpack_require__.h = () => ("db7007e0f10c80a36b7a")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -291,7 +294,7 @@ __webpack_require__.r(__webpack_exports__);
/******/ }
/******/ };
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/ } else installedChunks[chunkId] = 0;
/******/ }
/******/ }
/******/ }
/******/ };
Expand Down
9 changes: 6 additions & 3 deletions test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
/******/ __webpack_require__.h = () => ("aa027b5009650677d5c5")
/******/ __webpack_require__.h = () => ("106784193c04ad826b7a")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -291,7 +294,7 @@ __webpack_require__.r(__webpack_exports__);
/******/ }
/******/ };
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/ } else installedChunks[chunkId] = 0;
/******/ }
/******/ }
/******/ }
/******/ };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
16 changes: 8 additions & 8 deletions test/cases/es-module-concatenation-modules/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions test/cases/es-named-export-output-module/expected/main.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
6 changes: 3 additions & 3 deletions test/cases/es-named-export/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
5 changes: 4 additions & 1 deletion test/cases/hmr/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 5 additions & 2 deletions test/cases/insert-function/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -276,7 +279,7 @@
/******/ }
/******/ };
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/ } else installedChunks[chunkId] = 0;
/******/ }
/******/ }
/******/ }
/******/ };
Expand Down
7 changes: 5 additions & 2 deletions test/cases/insert-string/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -272,7 +275,7 @@
/******/ }
/******/ };
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/ } else installedChunks[chunkId] = 0;
/******/ }
/******/ }
/******/ }
/******/ };
Expand Down
7 changes: 5 additions & 2 deletions test/cases/insert-undefined/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -275,7 +278,7 @@
/******/ }
/******/ };
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/ } else installedChunks[chunkId] = 0;
/******/ }
/******/ }
/******/ }
/******/ };
Expand Down
Loading

0 comments on commit f576ed6

Please sign in to comment.