pax_global_header 0000666 0000000 0000000 00000000064 14134300407 0014506 g ustar 00root root 0000000 0000000 52 comment=46634166f2ace8894ba6ec1e464832325db29fb9
style-loader-3.3.1/ 0000775 0000000 0000000 00000000000 14134300407 0014116 5 ustar 00root root 0000000 0000000 style-loader-3.3.1/.editorconfig 0000664 0000000 0000000 00000000303 14134300407 0016567 0 ustar 00root root 0000000 0000000 # editorconfig.org
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
style-loader-3.3.1/.eslintignore 0000664 0000000 0000000 00000000054 14134300407 0016620 0 ustar 00root root 0000000 0000000 /coverage
/dist
/node_modules
/test/fixtures style-loader-3.3.1/.eslintrc.js 0000664 0000000 0000000 00000001302 14134300407 0016351 0 ustar 00root root 0000000 0000000 module.exports = {
root: true,
extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
overrides: [
{
files: ["src/runtime/**/*.js"],
env: {
browser: true,
node: true,
},
globals: {
__webpack_nonce__: "readonly",
},
rules: {
"no-underscore-dangle": "off",
"no-plusplus": "off",
"consistent-return": "off",
"no-param-reassign": "off",
camelcase: [
"error",
{ properties: "never", allow: ["__webpack_nonce__"] },
],
// avoid unnecessary `babel` helpers
"prefer-destructuring": "off",
"prefer-rest-params": "off",
},
},
],
};
style-loader-3.3.1/.gitattributes 0000664 0000000 0000000 00000000172 14134300407 0017011 0 ustar 00root root 0000000 0000000 # Treats the lock file as binary & prevents conflict hell
yarn.lock -diff
* text=auto
package-lock.json -diff
bin/* eol=lf style-loader-3.3.1/.github/ 0000775 0000000 0000000 00000000000 14134300407 0015456 5 ustar 00root root 0000000 0000000 style-loader-3.3.1/.github/CODEOWNERS 0000664 0000000 0000000 00000000307 14134300407 0017051 0 ustar 00root root 0000000 0000000 # These are the default owners for everything in
# webpack-contrib
@webpack-contrib/org-maintainers
# Add repository specific users / groups
# below here for libs that are not maintained by the org. style-loader-3.3.1/.github/CONTRIBUTING.md 0000664 0000000 0000000 00000016075 14134300407 0017720 0 ustar 00root root 0000000 0000000 # Contributing in @webpack-contrib
We'd always love contributions to further improve the webpack / webpack-contrib ecosystem!
Here are the guidelines we'd like you to follow:
- [Questions and Problems](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Pull Request Submission Guidelines](#submit-pr)
- [Commit Message Conventions](#commit)
## ():
```
The **header** is mandatory and the **scope** of the header is optional.
Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
to read on GitHub as well as in various git tools.
The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
Examples:
```
docs(readme): update install instructions
```
```
fix: refer to the `entrypoint` instead of the first `module`
```
### Revert
If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit.
In the body it should say: `This reverts commit .`, where the hash is the SHA of the commit being reverted.
### Type
Must be one of the following:
- **build**: Changes that affect the build system or external dependencies (example scopes: babel, npm)
- **chore**: Changes that fall outside of build / docs that do not effect source code (example scopes: package, defaults)
- **ci**: Changes to our CI configuration files and scripts (example scopes: circleci, travis)
- **docs**: Documentation only changes (example scopes: readme, changelog)
- **feat**: A new feature
- **fix**: A bug fix
- **perf**: A code change that improves performance
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **revert**: Used when reverting a committed change
- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons)
- **test**: Addition of or updates to Jest tests
### Scope
The scope is subjective & depends on the `type` see above. A good example would be a change to a particular class / module.
### Subject
The subject contains a succinct description of the change:
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize the first letter
- no dot (.) at the end
### Body
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
The body should include the motivation for the change and contrast this with previous behavior.
### Footer
The footer should contain any information about **Breaking Changes** and is also the place to
reference GitHub issues that this commit **Closes**.
**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
Example
```
BREAKING CHANGE: Updates to `Chunk.mapModules`.
This release is not backwards compatible with `Webpack 2.x` due to breaking changes in webpack/webpack#4764
Migration: see webpack/webpack#5225
```
## Testing Your Pull Request
You may have the need to test your changes in a real-world project or dependent
module. Thankfully, Github provides a means to do this. Add a dependency to the
`package.json` for such a project as follows:
```json
{
"devDependencies": {
"style-loader": "webpack-contrib/style-loader#{id}/head"
}
}
```
Where `{id}` is the # ID of your Pull Request.
## Contributor License Agreement
When submitting your contribution, a CLA (Contributor License Agreement) bot will come by to verify that you signed the [CLA](https://cla.js.foundation/webpack-contrib/style-loader).
If it is your first time, it will link you to the right place to sign it.
However, if you have committed your contributions using an email that is not the same as your email used on GitHub, the CLA bot can't accept your contribution.
Run `git config user.email` to see your Git email, and verify it with [your GitHub email](https://github.com/settings/emails).
## Thanks
For your interest, time, understanding, and for following this simple guide.
style-loader-3.3.1/.github/FUNDING.yml 0000664 0000000 0000000 00000000031 14134300407 0017265 0 ustar 00root root 0000000 0000000 open_collective: webpack
style-loader-3.3.1/.github/ISSUE_TEMPLATE.md 0000664 0000000 0000000 00000001316 14134300407 0020164 0 ustar 00root root 0000000 0000000
style-loader-3.3.1/.github/ISSUE_TEMPLATE/ 0000775 0000000 0000000 00000000000 14134300407 0017641 5 ustar 00root root 0000000 0000000 style-loader-3.3.1/.github/ISSUE_TEMPLATE/BUG.md 0000664 0000000 0000000 00000002674 14134300407 0020611 0 ustar 00root root 0000000 0000000 ---
name: 🐛 Bug Report
about: Something went awry and you'd like to tell us about it.
---
### Bug report
### Actual Behavior
### Expected Behavior
### How Do We Reproduce?
### Please paste the results of `npx webpack-cli info` here, and mention other relevant information
style-loader-3.3.1/.github/ISSUE_TEMPLATE/DOCS.md 0000664 0000000 0000000 00000001530 14134300407 0020712 0 ustar 00root root 0000000 0000000 ---
name: 📚 Documentation
about: Are the docs lacking or missing something? Do they need some new 🔥 hotness? Tell us here.
---
Documentation Is:
- [ ] Missing
- [ ] Needed
- [ ] Confusing
- [ ] Not Sure?
### Please Explain in Detail...
### Your Proposal for Changes
style-loader-3.3.1/.github/ISSUE_TEMPLATE/FEATURE.md 0000664 0000000 0000000 00000001330 14134300407 0021253 0 ustar 00root root 0000000 0000000 ---
name: ✨ Feature Request
about: Suggest an idea for this project
---
### Feature Proposal
### Feature Use Case
### Please paste the results of `npx webpack-cli info` here, and mention other relevant information
style-loader-3.3.1/.github/ISSUE_TEMPLATE/MODIFICATION.md 0000664 0000000 0000000 00000001527 14134300407 0022035 0 ustar 00root root 0000000 0000000 ---
name: 🔧 Modification Request
about: Would you like something work differently? Have an alternative approach? This is the template for you.
---
### Modification Proposal
### Expected Behavior / Situation
### Actual Behavior / Situation
### Please paste the results of `npx webpack-cli info` here, and mention other relevant information
style-loader-3.3.1/.github/ISSUE_TEMPLATE/SUPPORT.md 0000664 0000000 0000000 00000001005 14134300407 0021333 0 ustar 00root root 0000000 0000000 ---
name: 🆘 Support, Help, and Advice
about: 👉🏽 Need support, help, or advice? Don't open an issue! Head to https://github.com/webpack/webpack/discussions, StackOverflow or https://gitter.im/webpack/webpack.
---
Hey there! If you need support, help, or advice then this is not the place to ask.
Please visit [Discussions](https://github.com/webpack/webpack/discussions), [StackOverflow](https://stackoverflow.com/questions/tagged/webpack)
or [the Webpack Gitter](https://gitter.im/webpack/webpack) instead.
style-loader-3.3.1/.github/PULL_REQUEST_TEMPLATE.md 0000664 0000000 0000000 00000001563 14134300407 0021264 0 ustar 00root root 0000000 0000000
This PR contains a:
- [ ] **bugfix**
- [ ] new **feature**
- [ ] **code refactor**
- [ ] **test update**
- [ ] **typo fix**
- [ ] **metadata update**
### Motivation / Use-Case
### Breaking Changes
### Additional Info
style-loader-3.3.1/.github/workflows/ 0000775 0000000 0000000 00000000000 14134300407 0017513 5 ustar 00root root 0000000 0000000 style-loader-3.3.1/.github/workflows/nodejs.yml 0000664 0000000 0000000 00000004411 14134300407 0021520 0 ustar 00root root 0000000 0000000 name: style-loader
on:
push:
branches:
- master
- next
pull_request:
branches:
- master
- next
jobs:
lint:
name: Lint - ${{ matrix.os }} - Node v${{ matrix.node-version }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
strategy:
matrix:
os: [ubuntu-latest]
node-version: [12.x]
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- name: Use latest NPM
run: sudo npm i -g npm
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Security audit
run: npm run security
- name: Check commit message
uses: wagoid/commitlint-github-action@v4
test:
name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack ${{ matrix.webpack-version }}
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [12.x, 14.x, 16.x]
webpack-version: [latest]
runs-on: ${{ matrix.os }}
steps:
- name: Setup Git
if: matrix.os == 'windows-latest'
run: git config --global core.autocrlf input
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- name: Use latest NPM on ubuntu/macos
if: matrix.os == 'ubuntu-latest' || matrix.os == 'macos-latest'
run: sudo npm i -g npm
- name: Use latest NPM on windows
if: matrix.os == 'windows-latest'
run: npm i -g npm
- name: Install dependencies
run: npm ci
- name: Install webpack ${{ matrix.webpack-version }}
run: npm i webpack@${{ matrix.webpack-version }}
- name: Run tests for webpack version ${{ matrix.webpack-version }}
run: npm run test:coverage -- --ci
- name: Submit coverage data to codecov
uses: codecov/codecov-action@v2
with:
token: ${{ secrets.CODECOV_TOKEN }}
style-loader-3.3.1/.gitignore 0000664 0000000 0000000 00000000251 14134300407 0016104 0 ustar 00root root 0000000 0000000 /node_modules
.idea/
/coverage
logs
*.log
npm-debug.log*
.eslintcache
/dist
/local
/reports
.DS_Store
Thumbs.db
.idea
*.iml
.vscode
*.sublime-project
*.sublime-workspace style-loader-3.3.1/.husky/ 0000775 0000000 0000000 00000000000 14134300407 0015337 5 ustar 00root root 0000000 0000000 style-loader-3.3.1/.husky/.gitignore 0000664 0000000 0000000 00000000002 14134300407 0017317 0 ustar 00root root 0000000 0000000 _
style-loader-3.3.1/.husky/commit-msg 0000664 0000000 0000000 00000000120 14134300407 0017327 0 ustar 00root root 0000000 0000000 #!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
style-loader-3.3.1/.husky/pre-commit 0000664 0000000 0000000 00000000107 14134300407 0017334 0 ustar 00root root 0000000 0000000 #!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged
style-loader-3.3.1/.npmignore 0000664 0000000 0000000 00000000012 14134300407 0016106 0 ustar 00root root 0000000 0000000 fixtures/
style-loader-3.3.1/.prettierignore 0000664 0000000 0000000 00000000071 14134300407 0017157 0 ustar 00root root 0000000 0000000 /coverage
/dist
/node_modules
/test/fixtures
CHANGELOG.md style-loader-3.3.1/CHANGELOG.md 0000664 0000000 0000000 00000050347 14134300407 0015740 0 ustar 00root root 0000000 0000000 # Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [3.3.1](https://github.com/webpack-contrib/style-loader/compare/v3.3.0...v3.3.1) (2021-10-21)
### Bug Fixes
* small perf improvement ([#544](https://github.com/webpack-contrib/style-loader/issues/544)) ([610524e](https://github.com/webpack-contrib/style-loader/commit/610524ef6266c27e147d3c0003e7825b08f17454))
## [3.3.0](https://github.com/webpack-contrib/style-loader/compare/v3.2.1...v3.3.0) (2021-09-21)
### Features
* added support for `supports()`, `layer()` and `media` from `@import` at-rules ([b9a600c](https://github.com/webpack-contrib/style-loader/commit/b9a600c87aa3f68caabcaa80f0a1c340e739e30e))
* allow to pass options to `insert` function through `style.use()` ([#535](https://github.com/webpack-contrib/style-loader/issues/535)) ([f8ef63b](https://github.com/webpack-contrib/style-loader/commit/f8ef63b86a603232395f7708c508d6c3b639e92d))
### [3.2.1](https://github.com/webpack-contrib/style-loader/compare/v3.2.0...v3.2.1) (2021-07-20)
### Bug Fixes
* added the `styletagtransform` option when it is a module to `addBuildDependency` ([#528](https://github.com/webpack-contrib/style-loader/issues/528)) ([270513f](https://github.com/webpack-contrib/style-loader/commit/270513fa76e13c96a36c2ae11e4dd526dfb9d72f))
## [3.2.0](https://github.com/webpack-contrib/style-loader/compare/v3.1.0...v3.2.0) (2021-07-20)
### Features
* add link field in schema ([#525](https://github.com/webpack-contrib/style-loader/issues/525)) ([7ed3456](https://github.com/webpack-contrib/style-loader/commit/7ed345678cc1d01e3a93bf18ca2014d7b5419481))
### Bug Fixes
* added the `insert` option when it is a module to `addBuildDependency` ([#527](https://github.com/webpack-contrib/style-loader/issues/527)) ([3963c0b](https://github.com/webpack-contrib/style-loader/commit/3963c0bae298112754d8cc3fd1536499cefa65a6))
## [3.1.0](https://github.com/webpack-contrib/style-loader/compare/v3.0.0...v3.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](https://github.com/webpack-contrib/style-loader#absolute-path-to-function) ([#521](https://github.com/webpack-contrib/style-loader/issues/521)) ([56fc8f0](https://github.com/webpack-contrib/style-loader/commit/56fc8f021c69407e4ad03a5d345c614b04789389))
* 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](https://github.com/webpack-contrib/style-loader#string-1)
### Bug Fixes
* reduce runtime ([#519](https://github.com/webpack-contrib/style-loader/issues/519)) ([8a26186](https://github.com/webpack-contrib/style-loader/commit/8a26186c364b45028fb6baeb4a05365c4d3526e2))
* reduce runtime when you use custom options ([#520](https://github.com/webpack-contrib/style-loader/issues/520)) ([21c80c8](https://github.com/webpack-contrib/style-loader/commit/21c80c8c2f2ca751124f26f5984195e20f2ac665))
## [3.0.0](https://github.com/webpack-contrib/style-loader/compare/v2.0.0...v3.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](https://www.telerik.com/blogs/internet-explorer-css-limits)), 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](https://github.com/webpack-contrib/style-loader/compare/v1.3.0...v2.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](https://github.com/webpack-contrib/style-loader/issues/489)) ([727a24d](https://github.com/webpack-contrib/style-loader/commit/727a24d173a4d71a4100ffc2a37ab6c6684a6301))
* removed support for loaders returning `String` instead of `Array` ([#491](https://github.com/webpack-contrib/style-loader/issues/491)) ([7a0ce4c](https://github.com/webpack-contrib/style-loader/commit/7a0ce4cfd19a2be6ad8ffe274d38618a77b22199))
### ⚠ 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](https://github.com/webpack-contrib/style-loader/compare/v1.2.1...v1.3.0) (2020-10-03)
### Features
* added `modules.namedExport` ([#485](https://github.com/webpack-contrib/style-loader/issues/485)) ([15889db](https://github.com/webpack-contrib/style-loader/commit/15889db9a2d5d51712fc12e03b12a60c22fc33f4))
### Bug Fixes
* check if `btoa` exists for old IE versions ([#479](https://github.com/webpack-contrib/style-loader/issues/479)) ([732ef8b](https://github.com/webpack-contrib/style-loader/commit/732ef8bcb60ae72c3a84d3fa639f1eae6f26bbdc))
* esModule option issue ([#476](https://github.com/webpack-contrib/style-loader/issues/476)) ([c623f27](https://github.com/webpack-contrib/style-loader/commit/c623f2750b0358492c7bf2dde0326a1c71c46f4f))
### [1.2.1](https://github.com/webpack-contrib/style-loader/compare/v1.2.0...v1.2.1) (2020-04-28)
### Bug Fixes
* hot module replacement logic for lazy type ([#468](https://github.com/webpack-contrib/style-loader/issues/468)) ([88a5c2b](https://github.com/webpack-contrib/style-loader/commit/88a5c2bdb3405aa5cb889726f3908747106a6c01))
## [1.2.0](https://github.com/webpack-contrib/style-loader/compare/v1.1.4...v1.2.0) (2020-04-24)
### Features
* hot module replacement for css modules ([6d14e0a](https://github.com/webpack-contrib/style-loader/commit/6d14e0aa7bac1d8ba8e60b4d12f7cd33078763b7))
### [1.1.4](https://github.com/webpack-contrib/style-loader/compare/v1.1.3...v1.1.4) (2020-04-15)
# Chore
* update deps
### [1.1.3](https://github.com/webpack-contrib/style-loader/compare/v1.1.2...v1.1.3) (2020-01-17)
### Bug Fixes
* injection algorithm ([#456](https://github.com/webpack-contrib/style-loader/issues/456)) ([236b243](https://github.com/webpack-contrib/style-loader/commit/236b2436fb0003eeba5f0aa33e7caf9f35d4fc7a))
### [1.1.2](https://github.com/webpack-contrib/style-loader/compare/v1.1.1...v1.1.2) (2019-12-25)
### Bug Fixes
* algorithm for importing modules ([#449](https://github.com/webpack-contrib/style-loader/issues/449)) ([91ceaf2](https://github.com/webpack-contrib/style-loader/commit/91ceaf2b7e03f065d2a8cace1b733777848d4e86))
* checking that the list of modules is an array ([#448](https://github.com/webpack-contrib/style-loader/issues/448)) ([1138ed7](https://github.com/webpack-contrib/style-loader/commit/1138ed7e04848b570a70e493b410902cfc4a9076))
### [1.1.1](https://github.com/webpack-contrib/style-loader/compare/v1.1.0...v1.1.1) (2019-12-20)
### Bug Fixes
* add empty default export for `linkTag` value ([7ee8b04](https://github.com/webpack-contrib/style-loader/commit/7ee8b04fd519847cef93052c31efa0d0012ed54e))
## [1.1.0](https://github.com/webpack-contrib/style-loader/compare/v1.0.2...v1.1.0) (2019-12-20)
### Features
* `esModule` option ([#441](https://github.com/webpack-contrib/style-loader/issues/441)) ([3415266](https://github.com/webpack-contrib/style-loader/commit/3415266f58f2be00bec1d66ae9e658437e0d0a6c))
### Bug Fixes
* order of imported styles ([#443](https://github.com/webpack-contrib/style-loader/issues/443)) ([c7d6e3a](https://github.com/webpack-contrib/style-loader/commit/c7d6e3a3fba63a76e8f342d84e00b69af92c7ebc))
### [1.0.2](https://github.com/webpack-contrib/style-loader/compare/v1.0.1...v1.0.2) (2019-12-17)
### Bug Fixes
* support ES module syntax ([#435](https://github.com/webpack-contrib/style-loader/issues/435)) ([dcbfadb](https://github.com/webpack-contrib/style-loader/commit/dcbfadb4245e7f0ce888aafc138cbac27d053915))
### [1.0.1](https://github.com/webpack-contrib/style-loader/compare/v1.0.0...v1.0.1) (2019-11-28)
### Bug Fixes
* compatibility `linkTag` with ES module syntax ([#429](https://github.com/webpack-contrib/style-loader/issues/429)) ([2cdb9c3](https://github.com/webpack-contrib/style-loader/commit/2cdb9c3f51edebec69e8b22ff43b520a5e1c679b))
## [1.0.0](https://github.com/webpack-contrib/style-loader/compare/v0.23.1...v1.0.0) (2019-08-06)
### Bug Fixes
* es3 compatibility ([#390](https://github.com/webpack-contrib/style-loader/issues/390)) ([ae24ec2](https://github.com/webpack-contrib/style-loader/commit/ae24ec2))
* restore original hot reloading behaviour for locals ([#419](https://github.com/webpack-contrib/style-loader/issues/419)) ([f026429](https://github.com/webpack-contrib/style-loader/commit/f026429))
* better handle source maps ([#383](https://github.com/webpack-contrib/style-loader/issues/383)) ([84ec8e5](https://github.com/webpack-contrib/style-loader/commit/84ec8e5))
### Features
* new `injectType` option ([e2664e9](https://github.com/webpack-contrib/style-loader/commit/e2664e9))
* remove type `text/css` from style and link element ([#399](https://github.com/webpack-contrib/style-loader/issues/399)) ([b0187d6](https://github.com/webpack-contrib/style-loader/commit/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)
Style Loader
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]
# 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
```
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.css";
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
```
## Options
| Name | Type | Default | Description |
| :-------------------------------------------: | :------------------: | :---------: | :--------------------------------------------------------- |
| [**`injectType`**](#injecttype) | `{String}` | `styleTag` | Allows to setup how styles will be injected into the DOM |
| [**`attributes`**](#attributes) | `{Object}` | `{}` | Adds custom attributes to tag |
| [**`insert`**](#insert) | `{String\|Function}` | `head` | Inserts tag at the given position into the DOM |
| [**`styleTagTransform`**](#styleTagTransform) | `{String\|Function}` | `undefined` | Transform tag and css when insert 'style' tag into the DOM |
| [**`base`**](#base) | `{Number}` | `true` | Sets module ID base (DLLPlugin) |
| [**`esModule`**](#esmodule) | `{Boolean}` | `true` | Use ES modules syntax |
### `injectType`
Type: `String`
Default: `styleTag`
Allows to setup how styles will be injected into the DOM.
Possible values:
- `styleTag`
- `singletonStyleTag`
- `autoStyleTag`
- `lazyStyleTag`
- `lazySingletonStyleTag`
- `lazyAutoStyleTag`
- `linkTag`
#### `styleTag`
Automatically injects styles into the DOM using multiple ``. It is **default** behaviour.
**component.js**
```js
import "./styles.css";
```
Example with Locals (CSS Modules):
**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$/i,
use: [
// 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
```
#### `singletonStyleTag`
Automatically injects styles into the DOM using one ``.
> ⚠ Source maps do not work.
**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$/i,
use: [
{
loader: "style-loader",
options: { injectType: "singletonStyleTag" },
},
"css-loader",
],
},
],
},
};
```
The loader inject styles like:
```html
```
#### `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 `` 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: /\.css$/i,
exclude: /\.lazy\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.lazy\.css$/i,
use: [
{ loader: "style-loader", options: { injectType: "lazyStyleTag" } },
"css-loader",
],
},
],
},
};
```
The loader inject styles like:
```html
```
#### `lazySingletonStyleTag`
Injects styles into the DOM using one `` 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 styles from "./styles.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: /\.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
```
#### `lazyAutoStyleTag`
Works the same as a [`lazyStyleTag`](#lazyStyleTag), but if the code is executed in IE6-9, turns on the [`lazySingletonStyleTag`](#lazySingletonStyleTag) mode.
#### `linkTag`
Injects styles into the DOM using multiple `Body