Changed 4
- minimum supported webpack version is now 5.27.0
- minimum supported Node.js version is now 18.12.0
- the insert option can only be a selector or the path to the module
- the styleTagTransform option can only be the path to the module
Fixed 1
- css experiments logic
From style-loader
4.0.0 (2024-04-08)
⚠ BREAKING CHANGES
- minimum supported webpack version is
5.27.0 - minimum support Node.js version is
18.12.0 - the
insertoption can only be a selector or the path to the module
Migration:
Before:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
injectType: "styleTag",
styleTagTransform: function (css, style) {
// Do something ...
style.innerHTML = `${css}.modify{}\n`;
document.head.appendChild(style);
},
},
},
"css-loader",
],
},
],
},
};
After:
insert-function.js
function insert(css, style) {
var parent = options.target || document.head;
parent.appendChild(element);
}
module.exports = insert;
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: require.resolve("./insert.js"),
},
},
"css-loader",
],
},
],
},
};
- the
styleTagTransformoption can only be the path to the module
Migration:
Before:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
injectType: "styleTag",
styleTagTransform: function (css, style) {
// Do something ...
style.innerHTML = `${css}.modify{}\n`;
document.head.appendChild(style);
},
},
},
"css-loader",
],
},
],
},
};
After:
style-tag-transform-function.js
function styleTagTransform(css, style) {
// Do something ...
style.innerHTML = `${css}.modify{}\n`;
document.head.appendChild(style);
}
module.exports = styleTagTransform;
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
styleTagTransform: require.resolve("./style-tag-transform-function.js"),
},
},
"css-loader",
],
},
],
},
};