Skip to content

Update dependency style-loader to v4

Tine Wittler requested to merge renovate/style-loader-4.x into master

This MR contains the following updates:

Package Type Update Change
style-loader devDependencies major ^3.0.0 -> ^4.0.0

Release Notes

webpack-contrib/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
3.3.3 (2023-05-19)
Bug Fixes
3.3.2 (2023-03-13)
Bug Fixes
3.3.1 (2021-10-21)
Bug Fixes

v3.3.4

Compare Source

3.3.4 (2024-01-09)
Bug Fixes

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

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this MR and you won't be reminded about this update again.

  • If you want to rebase/retry this MR, click this checkbox.

This MR has been generated by Renovate Bot.

Merge request reports