NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #1768 most downloaded on npm
style loader module for webpack
Last release 2 years ago
no release in 18 months
Release timing varies
gaps range from 8 days to 1.4 years
Most releases are documented
notes for 43 of the last 60 stable releases
Nothing withdrawn
no release was ever pulled
14 years old
76 releases · first in 2012
minimum supported webpack version is 5.27.0
5.27.018.12.0insert option can only be a selector or the path to the moduleMigration:
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",
],
},
],
},
};styleTagTransform option can only be the path to the moduleMigration:
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",
],
},
],
},
};One column per quarter.
5.27.018.12.0insert option can only be a selector or the path to the moduleMigration:
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",
],
},
],
},
};
styleTagTransform option can only be the path to the moduleMigration:
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",
],
},
],
},
};
3.3.4 (2024-01-09) Bug Fixes css experiments logic
compatibility with built-in CSS support
noop in environment without DOM API
3.3.1 (2021-10-21) Bug Fixes small perf improvement
added support for supports() , layer() and media from @import at-rules
supports(), layer() and media from @import at-rules (b9a600c)insert function through style.use() (#535) (f8ef63b)added the styletagtransform option when it is a module to addBuildDependency
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
insert option from file, we strongly recommend do it, using the insert option from file will reduce your bundle size, example (#521) (56fc8f0)styleTagTransform option from file, we strongly recommend do it, using the styleTagTransform option from file will reduce your bundle size, exampleminimum supported Node.js version is 12.13.0
Node.js version is 12.13.0webpack version is 5.0.0modules.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 itstyleTag 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)autoStyleTag and lazyAutoStyleTag values for the injectType option for compatibility of work modern and IE8-IE9 browsersstyleTagTransform option for custom processing style tags (useful if you need ponyfill CSS custom properties for IE8-IE10)minimum supported Node.js version is 10.13.0
Node.js version is 10.13.0esModule 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)String instead of Array (#491) (7a0ce4c)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.
check if btoa exists for old IE versions
hot module replacement logic for lazy type
hot module replacement for css modules
linkTag value (7ee8b04)### 1.1.4 (2020-04-15) # Chore * update deps
### 1.1.3 (2020-01-17) ### Bug Fixes * injection algorithm
add empty default export for linkTag value
### Features * esModule option (#441) (3415266) ### Bug Fixes * order of imported styles
### 1.0.2 (2019-12-17) ### Bug Fixes * support ES module syntax
compatibility linkTag with ES module syntax
restore original hot reloading behaviour for locals
8.9.0wepback version is 4.0.0convertToAbsoluteUrls option was removed, you don't need this anymoreattrs option was renamed to the attributes optiontransform option was removed without replacementhmr option was removed, webpack automatically inject HMR code when it is required (when the HotModuleReplacementPlugin plugin was used)sourceMap option was removed. The loader automatically inject source maps if the previous loader emit themref/unref api methods were removed for useable loader, please use the use/unuse api methodsstyle-loader/url loader was removed in favor injectType option (look the documentation about the injectType option)style-loader/useable loader was removed in favor injectType option (look the documentation about the injectType option)singleton option was removed (look documentation about the injectType option)insertAt option was removed in favor the insert option (look the documentation about the insert option and examples)insertInto options was removed in favor the insert option (look the documentation about the insert option and examples)addStyles: support exports of transpiled transforms (options.transform)
Bug Fixesuseable: add insertInto support (options.insertInto)
addStyles: use var instead of const (IE fix)
<a name="0.22.0"></a>
<a name="0.21.0"></a>
<a name="0.20.3"></a>
insertInto and insertAt collaboration
## 2018-04-18 ### Features * enable tag type configuration
package: update schema-utils v0.4.3...0.4.5 (dependencies)
urls: skip empty url() handling
## 2018-01-26 ### Bug Fixes * index: source code indentation
<a name="0.20.0"></a>
HTMLIFrameElement exist (#296) (9b46128)locals (css-modules) are unchanged (#298) (3a4cb53)transform option validation ({String}) (23c3567){Function} (options.insertInto) (e0c4b19)<a name="0.19.1"></a>
addStyles: check if HTMLIFrameElement exist
addStyles: correctly check singleton behavior when {Boolean} (options.singleton)
Bug Fixes<a name="0.19.0"></a>
options.hmr) (#264) (378e906)options.insertInto) (#248) (25e8e89)options.insertAt) (#253) (67120f8)<a name="0.18.2"></a>
add option to enable/disable HMR (options.hmr)
url: use loaderUtils.stringifyRequest to avoid invalidating hashes due to absolute paths
## 2017-05-23 ### Bug Fixes * addStyles: revert merged loops
<a name="0.18.0"></a>
<a name="0.17.0"></a>
<a name="0.16.1"></a>
stringify the options.transform request
## 2017-05-01 ### Features * add option.base (#164) (e4ac886) * add option.transform
## 2017-03-28 ### Bug Fixes * negative refs
<a name="0.16.0"></a>
<a name="0.15.0"></a>
<a name="0.14.1"></a>
addStyles: update for test for old IE versions
match parens recursively on URLs to not fix embeded calls
syntax error in IE10 and below because of const keyword
<a name="0.14.0"></a>
Adds type attr. to the generated link element
package: fix loader util deprecation warning
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →