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

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
style-loader	^0.23.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.

v1.3.0

Compare Source

Features

• added modules.namedExport (#​485) (15889db)

Bug Fixes

• check if btoa exists for old IE versions (#​479) (732ef8b)
• esModule option issue (#​476) (c623f27)

1.2.1 (2020-04-28)

Bug Fixes

• hot module replacement logic for lazy type (#​468) (88a5c2b)

v1.2.1

Compare Source

v1.2.0

Compare Source

Features

• hot module replacement for css modules (6d14e0a)

1.1.4 (2020-04-15)

v1.1.4

Compare Source

v1.1.3

Compare Source

v1.1.2

Compare Source

v1.1.1

Compare Source

v1.1.0

Compare Source

Features

• esModule option (#​441) (3415266)

Bug Fixes

• order of imported styles (#​443) (c7d6e3a)

1.0.2 (2019-12-17)

Bug Fixes

• support ES module syntax (#​435) (dcbfadb)

1.0.1 (2019-11-28)

Bug Fixes

• compatibility linkTag with ES module syntax (#​429) (2cdb9c3)

v1.0.2

Compare Source

v1.0.1

Compare Source

v1.0.0

Compare Source

Bug Fixes

• es3 compatibility (#​390) (ae24ec2)
• restore original hot reloading behaviour for locals (#​419) (f026429)
• better handle source maps (#​383) (84ec8e5)

Features

• new injectType option (e2664e9)
• remove type text/css from style and link element (#​399) (b0187d6)

BREAKING CHANGES

• minimum required Node.js version is 8.9.0
• minimum required wepback version is 4.0.0
• the convertToAbsoluteUrls option was removed, you don't need this anymore
• the attrs option was renamed to the attributes option
• the transform option was removed without replacement
• the hmr option was removed, webpack automatically inject HMR code when it is required (when the HotModuleReplacementPlugin plugin was used)
• the sourceMap option was removed. The loader automatically inject source maps if the previous loader emit them
• the ref/unref api methods were removed for useable loader, please use the use/unuse api methods
• the style-loader/url loader was removed in favor injectType option (look the documentation about the injectType option)
• the style-loader/useable loader was removed in favor injectType option (look the documentation about the injectType option)
• the singleton option was removed (look documentation about the injectType option)
• the insertAt option was removed in favor the insert option (look the documentation about the insert option and examples)
• the insertInto options was removed in favor the insert option (look the documentation about the insert option and examples)

---

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 has been generated by Mend Renovate. View repository job log here.

[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 ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: rikuson@1.0.0
npm ERR! Found: webpack@4.47.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.12.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.27.0" from style-loader@4.0.0
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-24T05_31_42_084Z-eresolve-report.txt

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

[netlify]

❌ Deploy Preview for rikson failed.

Name	Link
🔨 Latest commit	0576df0
🔍 Latest deploy log	https://app.netlify.com/sites/rikson/deploys/6647a19e0b847d00084b395f

[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 error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: rikuson@1.0.0
npm error Found: webpack@4.47.0
npm error node_modules/webpack
npm error   dev webpack@"^4.12.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer webpack@"^5.27.0" from style-loader@4.0.0
npm error node_modules/style-loader
npm error   dev style-loader@"^4.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /tmp/renovate/cache/others/npm/_logs/2024-05-17T18_27_35_447Z-eresolve-report.txt
npm error A complete log of this run can be found in: /tmp/renovate/cache/others/npm/_logs/2024-05-17T18_27_35_447Z-debug-0.log