chore(deps): update dependency style-loader to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
style-loader	1.3.0 -> 4.0.0

---

Release Notes

webpack-contrib/style-loader (style-loader)

v4.0.0

Compare Source

⚠ 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

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 styleTagTransform option 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",
        ],
      },
    ],
  },
};

Bug Fixes

• css experiments logic (#​617) (8b9fc97)

3.3.3 (2023-05-19)

Bug Fixes

• compatibility with built-in CSS support (#​605) (9636f58)

3.3.2 (2023-03-13)

Bug Fixes

• noop in environment without DOM API (#​597) (03d3df3)

3.3.1 (2021-10-21)

Bug Fixes

• small perf improvement (#​544) (610524e)

v3.3.4

Compare Source

3.3.4 (2024-01-09)

Bug Fixes

• css experiments logic (c12e70b)

v3.3.3

Compare Source

v3.3.2

Compare Source

v3.3.1

Compare Source

v3.3.0

Compare Source

Features

• added support for supports(), layer() and media from @import at-rules (b9a600c)
• allow to pass options to insert function through style.use() (#​535) (f8ef63b)

3.2.1 (2021-07-20)

Bug Fixes

• added the styletagtransform option when it is a module to addBuildDependency (#​528) (270513f)

v3.2.1

Compare Source

v3.2.0

Compare Source

Features

• add link field in schema (#​525) (7ed3456)

Bug Fixes

• added the insert option when it is a module to addBuildDependency (#​527) (3963c0b)

v3.1.0

Compare Source

Features

• allow to specify the insert option from file, we strongly recommend do it, using the insert option from file will reduce your bundle size, example (#​521) (56fc8f0)
• allow to specify the styleTagTransform option from file, we strongly recommend do it, using the styleTagTransform option from file will reduce your bundle size, example

Bug Fixes

• reduce runtime (#​519) (8a26186)
• reduce runtime when you use custom options (#​520) (21c80c8)

v3.0.0

Compare Source

⚠ BREAKING CHANGES

• minimum supported Node.js version is 12.13.0
• minimum supported webpack version is 5.0.0
• the modules.namedExport option was removed, you don't need it anymore, because we respect the modules.namedExport option from css-loader (we just reexport all from css-loader), just remove it
• the styleTag value of the injectType (default value) option earlier uses singleton style tag by default for IE8-IE9 due limitations (more information), in this release we have disabled this behavior, because these versions of IE are outdated, if you don't support these browsers this change does not affect you, if you require to support IE8-IE9, you can return old behaviour by setting autoStyleTag value for the injectType option (do the same for lazyStyleTag, i.e. change it to lazyAutoStyleTag)

Features

• added autoStyleTag and lazyAutoStyleTag values for the injectType option for compatibility of work modern and IE8-IE9 browsers
• added styleTagTransform option for custom processing style tags (useful if you need ponyfill CSS custom properties for IE8-IE10)
• reduce size of generated code
• reduce deps

v2.0.0

Compare Source

⚠ BREAKING CHANGES

• minimum supported Node.js version is 10.13.0
• the esModule option is true by default, you need to change const locals = require('./styles.css')/require('./styles.css') on import locals from './styles.css'/import './styles.css'' (#​489) (727a24d)
• removed support for loaders returning String instead of Array (#​491) (7a0ce4c)

⚠ NOTICE

To avoid problems between style-loader and mini-css-extract-plugin because of changing the esModule option to true by default we strongly recommend upgrading mini-css-extract-plugin to 1.0.0 version.

---

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.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[renovate]

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

• any of the package files in this branch needs updating, or
• the branch becomes conflicted, or
• you click the rebase/retry checkbox if found above, or
• you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm WARN cli npm v10.5.2 does not support Node.js v16.20.2. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"4.47.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.27.0" from [email protected]
npm ERR! node_modules/style-loader
npm ERR!   dev style-loader@"4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /tmp/renovate/cache/others/npm/_logs/2024-04-11T18_08_31_867Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /tmp/renovate/cache/others/npm/_logs/2024-04-11T18_08_31_867Z-debug-0.log