# style-loader changelog

> Injects CSS into the DOM from a webpack build.

- Vendor: webpack
- Category: Developer Tools
- Official site: https://github.com/webpack/style-loader
- Tracked by: What's New (https://whatsnew.fyi/product/style-loader)
- Harvested from: GitHub (webpack/style-loader)
- Entries below: 10 (newest first)

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

## Releases

### v4.0.0

- Date: 2024-04-08
- Version: v4.0.0
- Original notes: https://github.com/webpack/style-loader/releases/tag/v4.0.0
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v4.0.0

- **changed** — minimum supported webpack version is now 5.27.0
- **changed** — minimum supported Node.js version is now 18.12.0
- **changed** — the insert option can only be a selector or the path to the module
- **changed** — the styleTagTransform option can only be the path to the module
- **fixed** — css experiments logic

##### [4.0.0](https://github.com/webpack-contrib/style-loader/compare/v3.3.3...v4.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**

```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**

```js
function insert(css, style) {
  var parent = options.target || document.head;

  parent.appendChild(element);
}

module.exports = insert;
```

**webpack.config.js**

```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**

```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**

```js
function styleTagTransform(css, style) {
  // Do something ...
  style.innerHTML = `${css}.modify{}\n`;

  document.head.appendChild(style);
}

module.exports = styleTagTransform;
```

**webpack.config.js**

```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](https://github.com/webpack-contrib/style-loader/issues/617)) ([8b9fc97](https://github.com/webpack-contrib/style-loader/commit/8b9fc976628341d3e33b77b5eb4b6ebad009fd19))

### v3.3.4

- Date: 2024-01-09
- Version: v3.3.4
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.3.4
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.3.4

- **fixed** — css experiments logic

###### [3.3.4](https://github.com/webpack-contrib/style-loader/compare/v3.3.3...v3.3.4) (2024-01-09)


###### Bug Fixes

* css experiments logic ([c12e70b](https://github.com/webpack-contrib/style-loader/commit/c12e70bc8592d891adb5c0f5ae0ec19fb2698dbb))

### v3.3.3

- Date: 2023-05-19
- Version: v3.3.3
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.3.3
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.3.3

- **fixed** — compatibility with built-in CSS support

###### [3.3.3](https://github.com/webpack-contrib/style-loader/compare/v3.3.2...v3.3.3) (2023-05-19)


###### Bug Fixes

* compatibility with built-in CSS support ([#605](https://github.com/webpack-contrib/style-loader/issues/605)) ([9636f58](https://github.com/webpack-contrib/style-loader/commit/9636f5805407734f587a87e69dd048e5cc7f1021))

### v3.3.2

- Date: 2023-03-13
- Version: v3.3.2
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.3.2
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.3.2

- **fixed** — noop in environment without DOM API

###### [3.3.2](https://github.com/webpack-contrib/style-loader/compare/v3.3.1...v3.3.2) (2023-03-13)


###### Bug Fixes

* noop in environment without DOM API ([#597](https://github.com/webpack-contrib/style-loader/issues/597)) ([03d3df3](https://github.com/webpack-contrib/style-loader/commit/03d3df3c363484c18a1e9a5e468a7600ea1322f3))

### v3.3.1

- Date: 2021-10-21
- Version: v3.3.1
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.3.1
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.3.1

- **fixed** — small perf improvement

###### [3.3.1](https://github.com/webpack-contrib/style-loader/compare/v3.3.0...v3.3.1) (2021-10-21)


###### Bug Fixes

* small perf improvement ([#544](https://github.com/webpack-contrib/style-loader/issues/544)) ([610524e](https://github.com/webpack-contrib/style-loader/commit/610524ef6266c27e147d3c0003e7825b08f17454))

### v3.3.0

- Date: 2021-09-21
- Version: v3.3.0
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.3.0
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.3.0

- **added** — Support for `supports()`, `layer()` and `media` from `@import` at-rules
- **added** — Allow passing options to `insert` function through `style.use()`

##### [3.3.0](https://github.com/webpack-contrib/style-loader/compare/v3.2.1...v3.3.0) (2021-09-21)


###### Features

* added support for `supports()`, `layer()` and `media` from `@import` at-rules ([b9a600c](https://github.com/webpack-contrib/style-loader/commit/b9a600c87aa3f68caabcaa80f0a1c340e739e30e))
* allow to pass options to `insert` function through `style.use()` ([#535](https://github.com/webpack-contrib/style-loader/issues/535)) ([f8ef63b](https://github.com/webpack-contrib/style-loader/commit/f8ef63b86a603232395f7708c508d6c3b639e92d))

### v3.2.1

- Date: 2021-07-20
- Version: v3.2.1
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.2.1
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.2.1

- **fixed** — added the styletagtransform option when it is a module to addBuildDependency

###### [3.2.1](https://github.com/webpack-contrib/style-loader/compare/v3.2.0...v3.2.1) (2021-07-20)


###### Bug Fixes

* added the `styletagtransform` option when it is a module to `addBuildDependency` ([#528](https://github.com/webpack-contrib/style-loader/issues/528)) ([270513f](https://github.com/webpack-contrib/style-loader/commit/270513fa76e13c96a36c2ae11e4dd526dfb9d72f))

### v3.2.0

- Date: 2021-07-20
- Version: v3.2.0
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.2.0
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.2.0

- **added** — Add link field in schema
- **fixed** — Add the insert option when it is a module to addBuildDependency

##### [3.2.0](https://github.com/webpack-contrib/style-loader/compare/v3.1.0...v3.2.0) (2021-07-20)


###### Features

* add link field in schema ([#525](https://github.com/webpack-contrib/style-loader/issues/525)) ([7ed3456](https://github.com/webpack-contrib/style-loader/commit/7ed345678cc1d01e3a93bf18ca2014d7b5419481))


###### Bug Fixes

* added the `insert` option when it is a module to `addBuildDependency` ([#527](https://github.com/webpack-contrib/style-loader/issues/527)) ([3963c0b](https://github.com/webpack-contrib/style-loader/commit/3963c0bae298112754d8cc3fd1536499cefa65a6))

### v3.1.0

- Date: 2021-07-12
- Version: v3.1.0
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.1.0
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.1.0

- **added** — Allow specifying the `insert` option from file to reduce bundle size
- **added** — Allow specifying the `styleTagTransform` option from file to reduce bundle size
- **fixed** — Reduce runtime
- **fixed** — Reduce runtime when using custom options

##### [3.1.0](https://github.com/webpack-contrib/style-loader/compare/v3.0.0...v3.1.0) (2021-07-12)


###### 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](https://github.com/webpack-contrib/style-loader#absolute-path-to-function) ([#521](https://github.com/webpack-contrib/style-loader/issues/521)) ([56fc8f0](https://github.com/webpack-contrib/style-loader/commit/56fc8f021c69407e4ad03a5d345c614b04789389))
* 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](https://github.com/webpack-contrib/style-loader#string-1)


###### Bug Fixes

* reduce runtime ([#519](https://github.com/webpack-contrib/style-loader/issues/519)) ([8a26186](https://github.com/webpack-contrib/style-loader/commit/8a26186c364b45028fb6baeb4a05365c4d3526e2))
* reduce runtime when you use custom options ([#520](https://github.com/webpack-contrib/style-loader/issues/520)) ([21c80c8](https://github.com/webpack-contrib/style-loader/commit/21c80c8c2f2ca751124f26f5984195e20f2ac665))

### v3.0.0

- Date: 2021-06-24
- Version: v3.0.0
- Original notes: https://github.com/webpack/style-loader/releases/tag/v3.0.0
- Permalink: https://whatsnew.fyi/product/style-loader/releases/v3.0.0

- **changed** — minimum supported Node.js version is now 12.13.0
- **changed** — minimum supported webpack version is now 5.0.0
- **removed** — the modules.namedExport option was removed
- **changed** — the styleTag value of the injectType option no longer uses singleton style tag by default, instead using standard style tags for modern browsers
- **added** — add autoStyleTag and lazyAutoStyleTag values for the injectType option for compatibility with modern and IE8-IE9 browsers
- **added** — add styleTagTransform option for custom processing of style tags
- **changed** — reduce size of generated code
- **changed** — reduce dependencies

##### [3.0.0](https://github.com/webpack-contrib/style-loader/compare/v2.0.0...v3.0.0) (2021-06-24)

###### ⚠ 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](https://www.telerik.com/blogs/internet-explorer-css-limits)), 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