🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

style-loader

Package Overview
Dependencies
Maintainers
3
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

style-loader - npm Package Compare versions

Comparing version

0.23.1
to
3.3.3

dist/cjs.js
dist/index.js
dist/options.json
dist/runtime/injectStylesIntoLinkTag.js
dist/runtime/injectStylesIntoStyleTag.js
dist/runtime/insertBySelector.js
dist/runtime/insertStyleElement.js
dist/runtime/isEqualLocals.js
dist/runtime/isOldIE.js
dist/runtime/setAttributesWithAttributes.js
dist/runtime/setAttributesWithAttributesAndNonce.js
dist/runtime/setAttributesWithoutAttributes.js
dist/runtime/singletonStyleDomAPI.js
dist/runtime/styleDomAPI.js
dist/runtime/styleTagTransform.js
dist/utils.js

109

package.json
{
"name": "style-loader",
"version": "0.23.1",
"version": "3.3.3",
"description": "style loader module for webpack",
"license": "MIT",
"repository": "webpack-contrib/style-loader",
"author": "Tobias Koppers @sokra",
"description": "style loader module for webpack",
"homepage": "https://github.com/webpack-contrib/style-loader",
"bugs": "https://github.com/webpack-contrib/style-loader/issues",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"main": "dist/cjs.js",
"engines": {
"node": ">= 0.12.0"
"node": ">= 12.13.0"
},
"main": "index.js",
"scripts": {
"start": "npm run build -- -w",
"clean": "del-cli dist",
"validate:runtime": "es-check es3 \"dist/runtime/**/*.js\"",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
"postbuild": "npm run validate:runtime",
"commitlint": "commitlint --from=master",
"security": "npm audit --production",
"lint:prettier": "prettier --list-different .",
"lint:js": "eslint --cache .",
"lint:spelling": "cspell \"**/*.*\"",
"lint": "npm-run-all -l -p \"lint:**\"",
"fix:js": "npm run lint:js -- --fix",
"fix:prettier": "npm run lint:prettier -- --write",
"fix": "npm-run-all -l fix:js fix:prettier",
"test:only": "cross-env NODE_ENV=test jest",
"test:watch": "npm run test:only -- --watch",
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
"test:manual": "npm run build && webpack serve ./test/manual/src/index.js --open --config test/manual/webpack.config.js",
"pretest": "npm run lint",
"test": "npm run test:coverage",
"prepare": "husky install && npm run build",
"release": "standard-version"
},
"files": [
"lib",
"url.js",
"index.js",
"useable.js",
"options.json"
"dist"
],
"dependencies": {
"loader-utils": "^1.1.0",
"schema-utils": "^1.0.0"
"peerDependencies": {
"webpack": "^5.0.0"
},
"devDependencies": {
"css-loader": "^0.28.0",
"file-loader": "^1.0.0",
"istanbul": "^0.4.5",
"jsdom": "^9.0.0",
"memory-fs": "^0.4.0",
"mocha": "^4.0.0",
"nsp": "^3.2.1",
"sinon": "^4.0.0",
"standard-version": "^4.0.0",
"webpack": "^2.0.0"
"@babel/cli": "^7.21.5",
"@babel/core": "^7.21.5",
"@babel/preset-env": "^7.21.5",
"@commitlint/cli": "^16.3.0",
"@commitlint/config-conventional": "^16.2.4",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^28.1.3",
"cross-env": "^7.0.3",
"cspell": "^6.31.1",
"css-loader": "^6.7.4",
"del": "^6.1.1",
"del-cli": "^4.0.1",
"es-check": "^7.1.1",
"eslint": "^8.39.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
"file-loader": "^6.2.0",
"husky": "^7.0.1",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"jsdom": "^18.1.1",
"lint-staged": "^12.5.0",
"memfs": "^3.5.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"sass": "^1.62.1",
"sass-loader": "^12.4.0",
"semver": "^7.5.0",
"standard-version": "^9.5.0",
"webpack": "^5.83.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.13.3"
},
"scripts": {
"test": "mocha",
"test:coverage": "istanbul cover node_modules/mocha/bin/_mocha",
"ci:test": "npm run test",
"ci:coverage": "npm run test:coverage",
"release": "standard-version",
"security": "nsp check"
},
"repository": "https://github.com/webpack-contrib/style-loader.git",
"bugs": "https://github.com/webpack-contrib/style-loader/issues",
"homepage": "https://github.com/webpack-contrib/style-loader#readme",
"license": "MIT"
"keywords": [
"webpack"
]
}

1347

README.md

@@ -1,6 +0,1 @@

[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![chat][chat]][chat-url]
<div align="center">

@@ -12,104 +7,265 @@ <a href="https://github.com/webpack/webpack">

<h1>Style Loader</h1>
<p>Adds CSS to the DOM by injecting a <code>&lt;style&gt;</code> tag</p>
</div>
<h2 align="center">Install</h2>
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![discussion][discussion]][discussion-url]
[![size][size]][size-url]
```bash
npm install style-loader --save-dev
# style-loader
Inject CSS into the DOM.
## Getting Started
To begin, you'll need to install `style-loader`:
```console
npm install --save-dev style-loader
```
<h2 align="center">Usage</h2>
or
It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack/css-loader)
```console
yarn add -D style-loader
```
or
```console
pnpm add -D style-loader
```
It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
Then add the loader to your `webpack` config. For example:
**style.css**
```css
body {
background: green;
}
```
**component.js**
```js
import style from './file.css'
import "./style.css";
```
**webpack.config.js**
```js
{
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
```
#### `Locals (CSS Modules)`
## Options
When using [local scoped CSS](https://github.com/webpack/css-loader#css-scope) the module exports the generated identifiers (locals).
- [**`injectType`**](#injecttype)
- [**`attributes`**](#attributes)
- [**`insert`**](#insert)
- [**`styleTagTransform`**](#styleTagTransform)
- [**`base`**](#base)
- [**`esModule`**](#esmodule)
### `injectType`
Type:
```ts
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**
```js
import style from './file.css'
style.className === "z849f98ca812"
import "./styles.css";
```
### `Url`
Example with Locals (CSS Modules):
It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of inlining the CSS `{String}` with `<style></style>` tag.
**component-with-css-modules.js**
```js
import url from 'file.css'
import styles from "./styles.css";
const divElement = document.createElement("div");
divElement.className = styles["my-class"];
```
All locals (class names) stored in imported object.
**webpack.config.js**
```js
{
module.exports = {
module: {
rules: [
{
test: /\.css$/,
test: /\.css$/i,
use: [
{ loader: "style-loader/url" },
{ loader: "file-loader" }
]
}
]
}
}
// The `injectType` option can be avoided because it is default behaviour
{ loader: "style-loader", options: { injectType: "styleTag" } },
"css-loader",
],
},
],
},
};
```
The loader inject styles like:
```html
<link rel="stylesheet" href="path/to/file.css">
<style>
.foo {
color: red;
}
</style>
<style>
.bar {
color: blue;
}
</style>
```
> ℹ️ Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
#### `singletonStyleTag`
### `Useable`
Automatically injects styles into the DOM using one `<style></style>`.
The `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`
> **Warning**
>
> Source maps do not work.
By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
**component.js**
```js
import "./styles.css";
```
**component-with-css-modules.js**
```js
import styles from "./styles.css";
const divElement = document.createElement("div");
divElement.className = styles["my-class"];
```
All locals (class names) stored in imported object.
**webpack.config.js**
```js
{
module.exports = {
module: {
rules: [
{
test: /\.css$/,
test: /\.css$/i,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "style-loader",
options: { injectType: "singletonStyleTag" },
},
"css-loader",
],
},
],
},
};
```
The loader inject styles like:
```html
<style>
.foo {
color: red;
}
.bar {
color: blue;
}
</style>
```
#### `autoStyleTag`
Works the same as a [`styleTag`](#styleTag), but if the code is executed in IE6-9, turns on the [`singletonStyleTag`](#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**
```js
import styles from "./styles.lazy.css";
styles.use();
// For removing styles you can use
// styles.unuse();
```
**component-with-css-modules.js**
```js
import styles from "./styles.lazy.css";
styles.use();
const divElement = document.createElement("div");
divElement.className = styles.locals["my-class"];
```
All locals (class names) stored in `locals` property of imported object.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.useable\.css$/,
test: /\.css$/i,
exclude: /\.lazy\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.lazy\.css$/i,
use: [
{
loader: "style-loader/useable"
},
{ loader: "css-loader" },
{ loader: "style-loader", options: { injectType: "lazyStyleTag" } },
"css-loader",
],

@@ -119,103 +275,166 @@ },

},
}
};
```
#### `Reference Counter API`
The loader inject styles like:
```html
<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**
```js
import style from './file.css'
import styles from "./styles.css";
style.use(); // = style.ref();
style.unuse(); // = style.unref();
styles.use();
// For removing styles you can use
// styles.unuse();
```
Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
**component-with-css-modules.js**
> ⚠️ Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
```js
import styles from "./styles.lazy.css";
<h2 align="center">Options</h2>
styles.use();
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
|**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
|**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
|**`insertInto`**|`{String\|Function}`|`<head>`|Inserts `<style></style>` into the given position|
|**`singleton`**|`{Boolean}`|`undefined`|Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module.|
|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
const divElement = document.createElement("div");
divElement.className = styles.locals["my-class"];
```
### `hmr`
All locals (class names) stored in `locals` property of imported object.
Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
This could be used for non local development and production.
**webpack.config.js**
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
hmr: false
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" },
},
"css-loader",
],
},
],
},
};
```
The loader generate this:
```html
<style>
.foo {
color: red;
}
}
.bar {
color: blue;
}
</style>
```
### `base`
#### `lazyAutoStyleTag`
This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'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.:
Works the same as a [`lazyStyleTag`](#lazyStyleTag), but if the code is executed in IE6-9, turns on the [`lazySingletonStyleTag`](#lazySingletonStyleTag) mode.
**webpack.dll1.config.js**
#### `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](https://webpack.js.org/plugins/mini-css-extract-plugin/) if you want to include a static `<link href="path/to/file.css" rel="stylesheet">`.
```js
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
import "./styles.css";
import "./other-styles.css";
```
**webpack.dll2.config.js**
**webpack.config.js**
```js
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { base: 1000 } },
'css-loader'
]
}
module.exports = {
module: {
rules: [
{
test: /\.link\.css$/i,
use: [
{ loader: "style-loader", options: { injectType: "linkTag" } },
{ loader: "file-loader" },
],
},
],
},
};
```
**webpack.app.config.js**
The loader generate this:
```html
<link rel="stylesheet" href="path/to/style.css" />
<link rel="stylesheet" href="path/to/other-styles.css" />
```
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { base: 2000 } },
'css-loader'
]
}
### `attributes`
Type:
```ts
type attributes = HTMLAttributes;
```
### `attrs`
Default: `{}`
If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
If defined, the `style-loader` will attach given attributes with their values on `<style>` / `<link>` element.
**component.js**
```js
import style from './file.css'
import style from "./file.css";
```
**webpack.config.js**
```js
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { attrs: { id: 'id' } } }
{ loader: 'css-loader' }
]
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: "style-loader", options: { attributes: { id: "id" } } },
{ loader: "css-loader" },
],
},
],
},
};
```

@@ -227,243 +446,817 @@

#### `Url`
### `insert`
**component.js**
```js
import link from './file.css'
Type:
```ts
type insert =
| string
| ((htmlElement: HTMLElement, options: Record<string, any>) => void);
```
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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
#### `string`
##### `Selector`
Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) where styles inject into the DOM.
**webpack.config.js**
```js
{
test: /\.css$/,
use: [
{ loader: 'style-loader/url', options: { attrs: { id: 'id' } } }
{ loader: 'file-loader' }
]
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: "body",
},
},
"css-loader",
],
},
],
},
};
```
### `transform`
##### `Absolute path to function`
A `transform` is a function that can modify the css just before it is loaded into the page by the style-loader.
This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css.
If the return value of the `transform` function is falsy, the css will not be loaded into the page at all.
Allows to setup absolute path to custom function that allows to override default behavior and insert styles at any position.
> ⚠️ In case you are using ES Module syntax in `tranform.js` then, you **need to transpile** it or otherwise it will throw an `{Error}`.
> **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`](https://webpack.js.org/loaders/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](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
transform: 'path/to/transform.js'
}
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: require.resolve("modulePath"),
},
},
"css-loader",
],
},
],
},
};
```
**transform.js**
A new `<style>`/`<link>` elements will be inserted into at bottom of `body` tag.
#### `function`
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 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](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
**webpack.config.js**
```js
module.exports = function (css) {
// Here we can change the original css
const transformed = css.replace('.classNameA', '.classNameB')
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector("head");
// eslint-disable-next-line no-underscore-dangle
var lastInsertedElement =
window._lastElementInsertedByStyleLoader;
return transformed
}
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;
},
},
},
"css-loader",
],
},
],
},
};
```
#### `Conditional`
Insert styles at top of `head` tag.
You can pass any parameters to `style.use(options)` and this value will be passed to `insert` and `styleTagTransform` functions.
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
transform: 'path/to/conditional.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: function insertIntoTarget(element, options) {
var parent = options.target || document.head;
parent.appendChild(element);
},
},
},
"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**
```css
div {
width: 50px;
height: 50px;
background-color: red;
}
```
**conditional.js**
**custom-square.js**
```js
module.exports = function (css) {
// If the condition is matched load [and transform] the CSS
if (css.includes('something I want to check')) {
return css;
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
}
// If a falsy value is returned, the CSS won't be loaded
return false
}
customElements.define("custom-square", CustomSquare);
export default CustomSquare;
```
### `insertAt`
### `styleTagTransform`
By default, the style-loader appends `<style>` elements to the end of the style target, which is the `<head>` tag of the page unless specified by `insertInto`. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g
Type:
```ts
type styleTagTransform =
| string
| ((
css: string,
styleElement: HTMLStyleElement,
options: Record<string, any>
) => void);
```
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
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
injectType: "styleTag",
styleTagTransform: require.resolve("module-path"),
},
},
"css-loader",
],
},
],
},
};
```
A new `<style>` element can be inserted before a specific element by passing an object, e.g.
#### `function`
Transform tag and css when insert 'style' tag into the DOM.
> **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](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
insertAt: {
before: '#id'
}
}
}
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",
],
},
],
},
};
```
### `insertInto`
By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an [IFrame](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
### `base`
You can also pass function to override default behavior and insert styles in your container, e.g
```ts
type base = number;
```
This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.me.uk/posts/webpack-dll-plugins/)'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**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
```
**webpack.dll2.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: "style-loader", options: { base: 1000 } },
"css-loader",
],
},
],
},
};
```
**webpack.app.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: "style-loader", options: { base: 2000 } },
"css-loader",
],
},
],
},
};
```
### `esModule`
Type:
```ts
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](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
You can enable a CommonJS modules syntax using:
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
insertInto: () => document.querySelector("#root"),
}
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "style-loader",
options: {
esModule: false,
},
},
],
},
};
```
Using function you can insert the styles into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), e.g
## 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](https://github.com/webpack-contrib/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**
```js
{
loader: 'style-loader',
options: {
insertInto: () => document.querySelector("#root").shadowRoot,
}
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**
>
> Names of locals are converted to `camelCase`.
> **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.
**styles.css**
```css
.foo-baz {
color: red;
}
.bar {
color: blue;
}
```
### `singleton`
**index.js**
If defined, the style-loader will reuse a single `<style></style>` element, instead of adding/removing individual elements for each required module.
```js
import { fooBaz, bar } from "./styles.css";
> ℹ️ This option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton option.
console.log(fooBaz, bar);
```
You can enable a ES module named export using:
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
singleton: true
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**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
{ loader: "css-loader", options: { sourceMap: true } },
],
},
],
},
};
```
### Nonce
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**
```js
import "./style.css";
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
attributes: {
nonce: "12345678",
},
},
},
"css-loader",
],
},
],
},
};
```
The loader generate:
```html
<style nonce="12345678">
.foo {
color: red;
}
}
</style>
```
### `sourceMap`
#### `__webpack_nonce__`
Enable/Disable source map loading
**create-nonce.js**
```js
__webpack_nonce__ = "12345678";
```
**component.js**
```js
import "./create-nonce.js";
import "./style.css";
```
Alternative example for `require`:
**component.js**
```js
__webpack_nonce__ = "12345678";
require("./style.css");
```
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
sourceMap: true
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
```
The loader generate:
```html
<style nonce="12345678">
.foo {
color: red;
}
}
</style>
```
### `convertToAbsoluteUrls`
#### Insert styles at top
If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves [an issue](https://github.com/webpack/style-loader/pull/96) where relative resources fail to load when source maps are enabled. You can enable it with the convertToAbsoluteUrls option.
Inserts styles at top of `head` tag.
**webpack.config.js**
```js
{
loader: 'style-loader',
options: {
sourceMap: true,
convertToAbsoluteUrls: true
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: 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;
},
},
},
"css-loader",
],
},
],
},
};
```
#### Insert styles before target element
Inserts styles before `#id` element.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
insert: 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;
},
},
},
"css-loader",
],
},
],
},
};
```
#### Custom Elements (Shadow DOM)
You can define custom target for your styles for the `lazyStyleTag` type.
**webpack.config.js**
```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: function insertIntoTarget(element, options) {
var parent = options.target || document.head;
parent.appendChild(element);
},
},
},
"css-loader",
],
},
],
},
};
```
Insert styles to the provided element or to the `head` tag if target isn't provided.
**custom-square.css**
```css
div {
width: 50px;
height: 50px;
background-color: red;
}
```
**custom-square.js**
```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;
```
<h2 align="center">Maintainers</h2>
## Contributing
<table>
<tbody>
<tr>
<td align="center">
<a href="https://github.com/bebraw">
<img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
</br>
Juho Vepsäläinen
</a>
</td>
<td align="center">
<a href="https://github.com/d3viant0ne">
<img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
</br>
Joshua Wiens
</a>
</td>
<td align="center">
<a href="https://github.com/sapegin">
<img width="150" height="150" src="https://github.com/sapegin.png?v=3&s=150">
</br>
Artem Sapegin
</a>
</td>
<td align="center">
<a href="https://github.com/michael-ciniawsky">
<img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
</br>
Michael Ciniawsky
</a>
</td>
<td align="center">
<a href="https://github.com/evilebottnawi">
<img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
</br>
Alexander Krasnoyarov
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/sokra">
<img width="150" height="150" src="https://github.com/sokra.png?v=3&s=150">
</br>
Tobias Koppers
</a>
</td>
<td align="center">
<a href="https://github.com/SpaceK33z">
<img width="150" height="150" src="https://github.com/SpaceK33z.png?v=3&s=150">
</br>
Kees Kluskens
</a>
</td>
<tr>
<tbody>
</table>
Please take a moment to read our contributing guidelines if you haven't yet done so.
[CONTRIBUTING](./.github/CONTRIBUTING.md)
## License
[MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/style-loader.svg
[npm-url]: https://npmjs.com/package/style-loader
[node]: https://img.shields.io/node/v/style-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack/style-loader.svg
[deps-url]: https://david-dm.org/webpack/file-loader
[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
[tests]: https://github.com/webpack-contrib/style-loader/workflows/style-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/style-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/style-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/style-loader
[discussion]: https://img.shields.io/github/discussions/webpack/webpack
[discussion-url]: https://github.com/webpack/webpack/discussions
[size]: https://packagephobia.now.sh/badge?p=style-loader
[size-url]: https://packagephobia.now.sh/result?p=style-loader
CHANGELOG.md
index.js
lib/addStyles.js
lib/addStyleUrl.js
lib/urls.js
options.json
url.js
useable.js