# style-loader v4.0.0

- Product: style-loader (https://whatsnew.fyi/product/style-loader)
- Vendor: webpack
- 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

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'.

---

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