chore: bump up style-loader version to v4 (#6490)
[](https://renovatebot.com)
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [style-loader](https://togithub.com/webpack-contrib/style-loader) | [`^3.3.4` -> `^4.0.0`](https://renovatebot.com/diffs/npm/style-loader/3.3.4/4.0.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
---
### Release Notes
<details>
<summary>webpack-contrib/style-loader (style-loader)</summary>
### [`v4.0.0`](https://togithub.com/webpack-contrib/style-loader/blob/HEAD/CHANGELOG.md#400-2024-04-08)
[Compare Source](https://togithub.com/webpack-contrib/style-loader/compare/v3.3.4...v4.0.0)
##### ⚠ BREAKING CHANGES
- minimum supported webpack version is `5.27.0`
- minimum support Node.js version is `18.12.0`
- the `insert` option can only be a selector or the path to the module
Migration:
Before:
**webpack.config.js**
```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**
```js
function insert(css, style) {
var parent = options.target || document.head;
parent.appendChild(element);
}
module.exports = insert;
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: require.resolve("./insert.js"),
},
},
"css-loader",
],
},
],
},
};
```
- the `styleTagTransform` option can only be the path to the module
Migration:
Before:
**webpack.config.js**
```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**
```js
function styleTagTransform(css, style) {
// Do something ...
style.innerHTML = `${css}.modify{}\n`;
document.head.appendChild(style);
}
module.exports = styleTagTransform;
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
styleTagTransform: require.resolve("./style-tag-transform-function.js"),
},
},
"css-loader",
],
},
],
},
};
```
##### Bug Fixes
- css experiments logic ([#​617](https://togithub.com/webpack-contrib/style-loader/issues/617)) ([8b9fc97](8b9fc97662))
##### [3.3.3](https://togithub.com/webpack-contrib/style-loader/compare/v3.3.2...v3.3.3) (2023-05-19)
##### Bug Fixes
- compatibility with built-in CSS support ([#​605](https://togithub.com/webpack-contrib/style-loader/issues/605)) ([9636f58](9636f58054))
##### [3.3.2](https://togithub.com/webpack-contrib/style-loader/compare/v3.3.1...v3.3.2) (2023-03-13)
##### Bug Fixes
- noop in environment without DOM API ([#​597](https://togithub.com/webpack-contrib/style-loader/issues/597)) ([03d3df3](03d3df3c36))
##### [3.3.1](https://togithub.com/webpack-contrib/style-loader/compare/v3.3.0...v3.3.1) (2021-10-21)
##### Bug Fixes
- small perf improvement ([#​544](https://togithub.com/webpack-contrib/style-loader/issues/544)) ([610524e](610524ef62))
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/toeverything/AFFiNE).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5In0=-->
891ab6ab51
