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

renovate · 2025-04-01T02:03:03Z

Coming soon: The Renovate bot (GitHub App) will be renamed to Mend. PRs from Renovate will soon appear from 'Mend'. Learn more here.

This PR contains the following updates:

Package	Change	Age	Confidence
style-loader	`2.0.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 (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

insert-function.js

function insert(css, style) {
  const 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 (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

⚠ 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 (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

insert-function.js

function insert(css, style) {
  const 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 (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.2`

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 (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

insert-function.js

function insert(css, style) {
  const 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 (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.1`

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 (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

insert-function.js

function insert(css, style) {
  const 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 (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.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 (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

insert-function.js

function insert(css, style) {
  const 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 (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.2.1`

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.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.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 - Between 12:00 AM and 03:59 AM, on day 1 of the month ( * 0-3 1 * * ) (UTC), 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 bot force-pushed the renovate/style-loader-4.x branch from 8a3f63e to 97e8476 Compare August 10, 2025 13:33

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

ba164af

renovate bot force-pushed the renovate/style-loader-4.x branch from 97e8476 to ba164af Compare September 1, 2025 09:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

Uh oh!

renovate bot commented Apr 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

renovate bot commented Apr 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

⚠ BREAKING CHANGES

Bug Fixes

3.3.3 (2023-05-19)

Bug Fixes

3.3.2 (2023-03-13)

Bug Fixes

3.3.1 (2021-10-21)

Bug Fixes

3.3.4 (2024-01-09)

Bug Fixes

⚠ BREAKING CHANGES

Bug Fixes

3.3.3 (2023-05-19)

Bug Fixes

3.3.2 (2023-03-13)

Bug Fixes

3.3.1 (2021-10-21)

Bug Fixes

⚠ BREAKING CHANGES

Bug Fixes

3.3.3 (2023-05-19)

Bug Fixes

3.3.2 (2023-03-13)

Bug Fixes

3.3.1 (2021-10-21)

Bug Fixes

⚠ BREAKING CHANGES

Bug Fixes

3.3.3 (2023-05-19)

Bug Fixes

3.3.2 (2023-03-13)

Bug Fixes

3.3.1 (2021-10-21)

Bug Fixes

⚠ BREAKING CHANGES

Bug Fixes

3.3.3 (2023-05-19)

Bug Fixes

3.3.2 (2023-03-13)

Bug Fixes

3.3.1 (2021-10-21)

Bug Fixes

Features

3.2.1 (2021-07-20)

Bug Fixes

Features

3.2.1 (2021-07-20)

Bug Fixes

Features

Bug Fixes

⚠ BREAKING CHANGES

Features

Configuration

Uh oh!

Uh oh!

renovate bot commented Apr 1, 2025 •

edited

Loading