[Snyk] Upgrade style-loader from 3.3.3 to 4.0.0

[nerds-github]

Snyk has created this PR to upgrade style-loader from 3.3.3 to 4.0.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

---

⚠️ Warning: This PR contains major version upgrade(s), and may be a breaking change.

• The recommended version is 2 versions ahead of your current version.

• The recommended version was released on 7 months ago.

Issues fixed by the recommended upgrade:

	Issue	Score	Exploit Maturity
	Cross-site Scripting (XSS) SNYK-JS-SERIALIZEJAVASCRIPT-6147607	412	Proof of Concept

Release notes

Package name: style-loader

• 4.0.0 - 2024-04-08
  

  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 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 = <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">css</span><span class="pl-kos">}</span></span>.modify{}\n;

              <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">head</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">style</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-s">"css-loader"</span><span class="pl-kos">,</span>
      <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  

  },
  };

  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 = <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">css</span><span class="pl-kos">}</span></span>.modify{}\n;

              <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">head</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">style</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-s">"css-loader"</span><span class="pl-kos">,</span>
      <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  

  },
  };

  After:

  style-tag-transform-function.js

  function styleTagTransform(css, style) {
  // Do something ...
  style.innerHTML = <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">css</span><span class="pl-kos">}</span></span>.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.4 - 2024-01-09
  

  3.3.4 (2024-01-09)

  Bug Fixes

  • css experiments logic (c12e70b)
• 3.3.3 - 2023-05-19
  

  3.3.3 (2023-05-19)

  Bug Fixes

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

from style-loader GitHub release notes

---

Important

• Warning: This PR contains a major version upgrade, and may be a breaking change.
• Check the changes in this PR to ensure they won't cause issues with your project.
• This PR was automatically created by Snyk using the credentials of a real user.
• Max score is 1000. Note that the real score may have changed since the PR was raised.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

• 🧐 View latest project report
• 📜 Customise PR templates
• 🛠 Adjust upgrade PR settings
• 🔕 Ignore this dependency or unsubscribe from future upgrade PRs

[sourcery-ai]

🧙 Sourcery has finished reviewing your pull request!

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

We have skipped reviewing this pull request. Here's why:

• It seems to have been created by a bot ('[Snyk]' found in title). We assume it knows what it's doing!
• We don't review packaging changes - Let us know if you'd like us to change this.