Update dependency style-loader to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
style-loader	^2.0.0 -> ^4.0.0

---

Warning

Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

---

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

---

Configuration

📅 Schedule: Branch creation - "* 0-3 * * 1" in timezone Europe/London, Automerge - "after 10am every weekday,before 4pm every weekday" in timezone Europe/London.

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, 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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 4.x releases. But if you manually upgrade to 4.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.