Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

style-loader

webpack-contrib69.2mMIT4.0.0

style loader module for webpack

webpack

readme

Style Loader

npm node tests coverage discussion size

style-loader

Inject CSS into the DOM.

Getting Started

To begin, you'll need to install style-loader:

npm install --save-dev style-loader

or

yarn add -D style-loader

or

pnpm add -D style-loader

It's recommended to combine style-loader with the css-loader

Then add the loader to your webpack config. For example:

style.css

body {
  background: green;
}

component.js

import "./style.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Security Warning

This loader is primarily meant for development. The default settings are not safe for production environments. See the recommended example configuration and the section on nonces for details.

Options

injectType

Type:

type injectType =
  | "styleTag"
  | "singletonStyleTag"
  | "autoStyleTag"
  | "lazyStyleTag"
  | "lazySingletonStyleTag"
  | "lazyAutoStyleTag"
  | "linkTag";

Default: styleTag

Allows to setup how styles will be injected into the DOM.

Possible values:

styleTag

Automatically injects styles into the DOM using multiple <style></style>. It is default behaviour.

component.js

import "./styles.css";

Example with Locals (CSS Modules):

component-with-css-modules.js

import * as styles from "./styles.css";

const divElement = document.createElement("div");
divElement.className = styles["my-class"];

All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup modules option for css-loader. For more information consult with css-loader documentation.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // The `injectType`  option can be avoided because it is default behaviour
          { loader: "style-loader", options: { injectType: "styleTag" } },
          {
            loader: "css-loader",
            // Uncomment it if you want to use CSS modules
            // options: { modules: true }
          },
        ],
      },
    ],
  },
};

The loader inject styles like:

<style>
  .foo {
    color: red;
  }
</style>
<style>
  .bar {
    color: blue;
  }
</style>

singletonStyleTag

Automatically injects styles into the DOM using one <style></style>.

Warning

Source maps do not work.

component.js

import "./styles.css";

component-with-css-modules.js

import * as styles from "./styles.css";

const divElement = document.createElement("div");
divElement.className = styles["my-class"];

All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup modules option for css-loader. For more information consult with css-loader documentation.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { injectType: "singletonStyleTag" },
          },
          {
            loader: "css-loader",
            // Uncomment it if you want to use CSS modules
            // options: { modules: true }
          },
        ],
      },
    ],
  },
};

The loader inject styles like:

<style>
  .foo {
    color: red;
  }
  .bar {
    color: blue;
  }
</style>

autoStyleTag

Works the same as a styleTag, but if the code is executed in IE6-9, turns on the singletonStyleTag mode.

lazyStyleTag

Injects styles into the DOM using multiple <style></style> on demand. We recommend following .lazy.css naming convention for lazy styles and the .css for basic style-loader usage (similar to other file types, i.e. .lazy.less and .less). When you lazyStyleTag value the style-loader injects the styles lazily making them useable on-demand via style.use() / style.unuse().

⚠️ Behavior is undefined when unuse is called more often than use. Don't do that.

component.js

import styles from "./styles.lazy.css";

styles.use();
// For removing styles you can use
// styles.unuse();

component-with-css-modules.js

import styles, { "my-class" as myClass } from "./styles.lazy.css";

styles.use();

const divElement = document.createElement("div");
divElement.className = myClass;

All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup modules option for css-loader. For more information consult with css-loader documentation.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.lazy\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.lazy\.css$/i,
        use: [
          { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
          {
            loader: "css-loader",
            // Uncomment it if you want to use CSS modules
            // options: { modules: true }
          },
        ],
      },
    ],
  },
};

The loader inject styles like:

<style>
  .foo {
    color: red;
  }
</style>
<style>
  .bar {
    color: blue;
  }
</style>

lazySingletonStyleTag

Injects styles into the DOM using one <style></style> on demand. We recommend following .lazy.css naming convention for lazy styles and the .css for basic style-loader usage (similar to other file types, i.e. .lazy.less and .less). When you lazySingletonStyleTag value the style-loader injects the styles lazily making them useable on-demand via style.use() / style.unuse().

⚠️ Source maps do not work.

⚠️ Behavior is undefined when unuse is called more often than use. Don't do that.

component.js

import styles from "./styles.css";

styles.use();
// For removing styles you can use
// styles.unuse();

component-with-css-modules.js

import styles, { "my-class" as myClass } from "./styles.lazy.css";

styles.use();

const divElement = document.createElement("div");
divElement.className = myClass;

All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup modules option for css-loader. For more information consult with css-loader documentation.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.lazy\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.lazy\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { injectType: "lazySingletonStyleTag" },
          },
          {
            loader: "css-loader",
            // Uncomment it if you want to use CSS modules
            // options: { modules: true }
          },
        ],
      },
    ],
  },
};

The loader generate this:

<style>
  .foo {
    color: red;
  }
  .bar {
    color: blue;
  }
</style>

lazyAutoStyleTag

Works the same as a lazyStyleTag, but if the code is executed in IE6-9, turns on the lazySingletonStyleTag mode.

linkTag

Injects styles into the DOM using multiple <link rel="stylesheet" href="path/to/file.css"> .

ℹ️ The loader will dynamically insert the <link href="path/to/file.css" rel="stylesheet"> tag at runtime via JavaScript. You should use MiniCssExtractPlugin if you want to include a static <link href="path/to/file.css" rel="stylesheet">.

import "./styles.css";
import "./other-styles.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.link\.css$/i,
        use: [
          { loader: "style-loader", options: { injectType: "linkTag" } },
          { loader: "file-loader" },
        ],
      },
    ],
  },
};

The loader generate this:

<link rel="stylesheet" href="path/to/style.css" />
<link rel="stylesheet" href="path/to/other-styles.css" />

attributes

Type:

type attributes = HTMLAttributes;

Default: {}

If defined, the style-loader will attach given attributes with their values on <style> / <link> element.

component.js

import "./file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader", options: { attributes: { id: "id" } } },
          { loader: "css-loader" },
        ],
      },
    ],
  },
};
<style id="id"></style>

insert

Type:

type insert = string;

Default: head

By default, the style-loader appends <style>/<link> elements to the end of the style target, which is the <head> tag of the page unless specified by insert. This will cause CSS created by the loader to take priority over CSS already present in the target. You can use other values if the standard behavior is not suitable for you, but we do not recommend doing this. If you target an iframe make sure you have sufficient access rights, the styles will be injected into the content document head.

Selector

Allows to setup custom query selector where styles inject into the DOM.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              insert: "body",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

Absolute path to function

Allows to setup absolute path to custom function that allows to override default behavior and insert styles at any position.

Warning

Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like let, const, arrow function expression and etc. We recommend using babel-loader for support latest ECMA features.

Warning

Do not forget that some DOM methods may not be available in older browsers, we recommended use only DOM core level 2 properties, but it is depends what browsers you want to support

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              insert: require.resolve("./path-to-insert-module"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

A new <style>/<link> elements will be inserted into at bottom of body tag.

Examples:

Insert styles at top of head tag:

insert-function.js

function insertAtTop(element) {
  var parent = document.querySelector("head");
  // eslint-disable-next-line no-underscore-dangle
  var lastInsertedElement = window._lastElementInsertedByStyleLoader;

  if (!lastInsertedElement) {
    parent.insertBefore(element, parent.firstChild);
  } else if (lastInsertedElement.nextSibling) {
    parent.insertBefore(element, lastInsertedElement.nextSibling);
  } else {
    parent.appendChild(element);
  }

  // eslint-disable-next-line no-underscore-dangle
  window._lastElementInsertedByStyleLoader = element;
}

module.exports = insertAtTop;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              insert: require.resolve("./insert-function"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

You can pass any parameters to style.use(options) and this value will be passed to insert and styleTagTransform functions.

insert-function.js

function insertIntoTarget(element, options) {
  var parent = options.target || document.head;

  parent.appendChild(element);
}

module.exports = insertIntoTarget;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "lazyStyleTag",
              // Do not forget that this code will be used in the browser and
              // not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc,
              // we recommend use only ECMA 5 features,
              // but it depends what browsers you want to support
              insert: require.resolve("./insert-function.js"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

Insert styles to the provided element or to the head tag if target isn't provided. Now you can inject styles into Shadow DOM (or any other element).

custom-square.css

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

custom-square.js

import customSquareStyles from "./custom-square.css";

class CustomSquare extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    const divElement = document.createElement("div");

    divElement.textContent = "Text content.";

    this.shadowRoot.appendChild(divElement);

    customSquareStyles.use({ target: this.shadowRoot });

    // You can override injected styles
    const bgPurple = new CSSStyleSheet();
    const width = this.getAttribute("w");
    const height = this.getAttribute("h");

    bgPurple.replace(`div { width: ${width}px; height: ${height}px; }`);

    this.shadowRoot.adoptedStyleSheets = [bgPurple];

    // `divElement` will have `100px` width, `100px` height and `red` background color
  }
}

customElements.define("custom-square", CustomSquare);

export default CustomSquare;

styleTagTransform

Type:

type styleTagTransform = string;

Default: undefined

string

Allows to setup absolute path to custom function that allows to override default behavior styleTagTransform.

Warning

Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like let, const, arrow function expression and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support

Warning

Do not forget that some DOM methods may not be available in older browsers, we recommended use only DOM core level 2 properties, but it depends what browsers you want to support

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "styleTag",
              styleTagTransform: require.resolve("style-tag-transform-code"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

base

type base = number;

This setting is primarily used as a workaround for css clashes when using one or more DllPlugin's. base allows you to prevent either the app's css (or DllPlugin2's css) from overwriting DllPlugin1's css by specifying a css module id base which is greater than the range used by DllPlugin1 e.g.:

webpack.dll1.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

webpack.dll2.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader", options: { base: 1000 } },
          "css-loader",
        ],
      },
    ],
  },
};

webpack.app.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader", options: { base: 2000 } },
          "css-loader",
        ],
      },
    ],
  },
};

esModule

Type:

type esModule = boolean;

Default: true

By default, style-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.

You can enable a CommonJS modules syntax using:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "style-loader",
        options: {
          esModule: false,
        },
      },
    ],
  },
};

Examples

Recommend

For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the mini-css-extract-plugin, because it creates separate css files. For development mode (including webpack-dev-server) you can use style-loader, because it injects CSS into the DOM using multiple <style></style> and works faster.

Warning

Do not use together style-loader and mini-css-extract-plugin.

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
};

Named export for CSS Modules

Warning

It is not allowed to use JavaScript reserved words in css class names.

Warning

Options esModule and modules.namedExport in css-loader should be enabled (by default for css-loader@7 it is true).

styles.css

.fooBaz {
  color: red;
}
.bar {
  color: blue;
}
.my-class {
  color: green;
}

index.js

import { fooBaz, bar, "my-class" as myClass } from "./styles.css";

console.log(fooBaz, bar, myClass);

Or:

index.js

import * as styles from "./styles.css";

console.log(styles.fooBaz, styles.bar, styles["my-class"]);

You can enable a ES module named export using:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              modules: {
                namedExport: true,
              },
            },
          },
        ],
      },
    ],
  },
};

Source maps

The loader automatically inject source maps when previous loader emit them. Therefore, to generate source maps, set the sourceMap option to true for the previous loader.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          { loader: "css-loader", options: { sourceMap: true } },
        ],
      },
    ],
  },
};

Nonce

If you are using a Content Security Policy (CSP), the injected code will usually be blocked. A workaround is to use a nonce. Note, however, that using a nonce significantly reduces the protection provided by the CSP. You can read more about the security impact in the specification. The better solution is not to use this loader in production.

There are two ways to work with nonce:

  • using the attributes option
  • using the __webpack_nonce__ variable

Warning

the attributes option takes precedence over the __webpack_nonce__ variable

attributes

component.js

import "./style.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              attributes: {
                nonce: "12345678",
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

The loader generate:

<style nonce="12345678">
  .foo {
    color: red;
  }
</style>

__webpack_nonce__

create-nonce.js

__webpack_nonce__ = "12345678";

component.js

import "./create-nonce.js";
import "./style.css";

Alternative example for require:

component.js

__webpack_nonce__ = "12345678";

require("./style.css");

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

The loader generate:

<style nonce="12345678">
  .foo {
    color: red;
  }
</style>

Insert styles at top

Insert styles at top of head tag.

insert-function.js

function insertAtTop(element) {
  var parent = document.querySelector("head");
  var lastInsertedElement = window._lastElementInsertedByStyleLoader;

  if (!lastInsertedElement) {
    parent.insertBefore(element, parent.firstChild);
  } else if (lastInsertedElement.nextSibling) {
    parent.insertBefore(element, lastInsertedElement.nextSibling);
  } else {
    parent.appendChild(element);
  }

  window._lastElementInsertedByStyleLoader = element;
}

module.exports = insertAtTop;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              insert: require.resolve("./insert-function.js"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

Insert styles before target element

Inserts styles before #id element.

insert-function.js

function insertBeforeAt(element) {
  const parent = document.querySelector("head");
  const target = document.querySelector("#id");

  const lastInsertedElement = window._lastElementInsertedByStyleLoader;

  if (!lastInsertedElement) {
    parent.insertBefore(element, target);
  } else if (lastInsertedElement.nextSibling) {
    parent.insertBefore(element, lastInsertedElement.nextSibling);
  } else {
    parent.appendChild(element);
  }

  window._lastElementInsertedByStyleLoader = element;
}

module.exports = insertBeforeAt;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              insert: require.resolve("./insert-function.js"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

Custom Elements (Shadow DOM)

You can define custom target for your styles for the lazyStyleTag type.

insert-function.js

function insertIntoTarget(element, options) {
  var parent = options.target || document.head;

  parent.appendChild(element);
}

module.exports = insertIntoTarget;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "lazyStyleTag",
              // Do not forget that this code will be used in the browser and
              // not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc,
              // we recommend use only ECMA 5 features,
              // but it is depends what browsers you want to support
              insert: require.resolve("./insert-function.js"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

Insert styles to the provided element or to the head tag if target isn't provided.

custom-square.css

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

custom-square.js

import customSquareStyles from "./custom-square.css";

class CustomSquare extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    const divElement = document.createElement("div");

    divElement.textContent = "Text content.";

    this.shadowRoot.appendChild(divElement);

    customSquareStyles.use({ target: this.shadowRoot });

    // You can override injected styles
    const bgPurple = new CSSStyleSheet();
    const width = this.getAttribute("w");
    const height = this.getAttribute("h");

    bgPurple.replace(`div { width: ${width}px; height: ${height}px; }`);

    this.shadowRoot.adoptedStyleSheets = [bgPurple];

    // `divElement` will have `100px` width, `100px` height and `red` background color
  }
}

customElements.define("custom-square", CustomSquare);

export default CustomSquare;

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

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 = `${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

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

3.3.2 (2023-03-13)

Bug Fixes

3.3.1 (2021-10-21)

Bug Fixes

3.3.0 (2021-09-21)

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)

3.2.0 (2021-07-20)

Features

Bug Fixes

  • added the insert option when it is a module to addBuildDependency (#527) (3963c0b)

3.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 (#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

3.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), 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

2.0.0 (2020-10-09)

⚠ BREAKING CHANGES

  • minimum supported Node.js version is 10.13.0
  • the esModule option is true by default, you need to change const locals = require('./styles.css')/require('./styles.css') on import locals from './styles.css'/import './styles.css'' (#489) (727a24d)
  • removed support for loaders returning String instead of Array (#491) (7a0ce4c)

⚠ NOTICE

To avoid problems between style-loader and mini-css-extract-plugin because of changing the esModule option to true by default we strongly recommend upgrading mini-css-extract-plugin to 1.0.0 version.

1.3.0 (2020-10-03)

Features

Bug Fixes

1.2.1 (2020-04-28)

Bug Fixes

  • hot module replacement logic for lazy type (#468) (88a5c2b)

1.2.0 (2020-04-24)

Features

  • hot module replacement for css modules (6d14e0a)

1.1.4 (2020-04-15)

Chore

  • update deps

1.1.3 (2020-01-17)

Bug Fixes

1.1.2 (2019-12-25)

Bug Fixes

  • algorithm for importing modules (#449) (91ceaf2)
  • checking that the list of modules is an array (#448) (1138ed7)

1.1.1 (2019-12-20)

Bug Fixes

  • add empty default export for linkTag value (7ee8b04)

1.1.0 (2019-12-20)

Features

Bug Fixes

1.0.2 (2019-12-17)

Bug Fixes

1.0.1 (2019-11-28)

Bug Fixes

  • compatibility linkTag with ES module syntax (#429) (2cdb9c3)

1.0.0 (2019-08-06)

Bug Fixes

Features

  • new injectType option (e2664e9)
  • remove type text/css from style and link element (#399) (b0187d6)

BREAKING CHANGES

  • minimum required Node.js version is 8.9.0
  • minimum required wepback version is 4.0.0
  • the convertToAbsoluteUrls option was removed, you don't need this anymore
  • the attrs option was renamed to the attributes option
  • the transform option was removed without replacement
  • the hmr option was removed, webpack automatically inject HMR code when it is required (when the HotModuleReplacementPlugin plugin was used)
  • the sourceMap option was removed. The loader automatically inject source maps if the previous loader emit them
  • the ref/unref api methods were removed for useable loader, please use the use/unuse api methods
  • the style-loader/url loader was removed in favor injectType option (look the documentation about the injectType option)
  • the style-loader/useable loader was removed in favor injectType option (look the documentation about the injectType option)
  • the singleton option was removed (look documentation about the injectType option)
  • the insertAt option was removed in favor the insert option (look the documentation about the insert option and examples)
  • the insertInto options was removed in favor the insert option (look the documentation about the insert option and examples)

0.23.1 (2018-10-08)

Bug Fixes

  • addStyles: support exports of transpiled transforms (options.transform) (#333) (33aebed)

0.23.0 (2018-08-27)

Features

  • useable: add insertInto support (options.insertInto) (#341) (2588aca)

0.22.1 (2018-08-08)

Bug Fixes

  • addStyles: use var instead of const (IE fix) (#338) (1ca12ab)

0.22.0 (2018-08-07)

Bug Fixes

  • insertInto and insertAt collaboration (#325) (c7d8fec)

Features

0.21.0 (2018-04-18)

Features

0.20.3 (2018-03-09)

Bug Fixes

  • package: update schema-utils v0.4.3...0.4.5 (dependencies) (#308) (9455888)

0.20.2 (2018-02-15)

Bug Fixes

0.20.1 (2018-01-26)

Bug Fixes

0.20.0 (2018-01-26)

Bug Fixes

  • addStyles: check if HTMLIFrameElement exist (#296) (9b46128)
  • index: enable HMR in case locals (css-modules) are unchanged (#298) (3a4cb53)
  • options: add transform option validation ({String}) (23c3567)
  • options: support passing a {Function} (options.insertInto) (e0c4b19)

Features

  • support passing a {Function} (options.insertInto) (#279) (0eb8fe7)

0.19.1 (2017-12-14)

Bug Fixes

  • addStyles: correctly check singleton behavior when {Boolean} (options.singleton) (#285) (2bfc93e)

0.19.0 (2017-10-03)

Features

  • add option to enable/disable HMR (options.hmr) (#264) (378e906)
  • add support for iframes (options.insertInto) (#248) (25e8e89)
  • support 'before' insertions (options.insertAt) (#253) (67120f8)

0.18.2 (2017-06-05)

Bug Fixes

  • url: use loaderUtils.stringifyRequest to avoid invalidating hashes due to absolute paths (#242) (97508ec)
  • Add null check to removeStyleElement (#245) (0a4845c)

0.18.1 (2017-05-23)

Bug Fixes

0.18.0 (2017-05-22)

Bug Fixes

  • stringify the options.transform request (#230) (5888095)

Features

0.17.0 (2017-05-01)

Features

0.16.1 (2017-03-28)

Bug Fixes

0.16.0 (2017-03-22)

Bug Fixes

  • addStyles: update for test for old IE versions (#196) (1f68495)

Features

  • Set custom attributes for tag in url mode (#198) (2c4f427)

0.15.0 (2017-03-21)

Bug Fixes

  • match parens recursively on URLs to not fix embeded calls (#192) (71e0908)

Features

0.14.1 (2017-03-15)

Bug Fixes

  • syntax error in IE10 and below because of const keyword (#190) (01080cf)

0.14.0 (2017-03-15)

Bug Fixes

  • Adds type attr. to the generated link element (2a2f261)
  • fixUrls: add param to fix relative urls (#186) (19959ee)
  • usable: Export locals if available(#128) (e280cb6)

Features

  • tag-attribute: Add support for custom tag attribute (995f3de)