draft: refactor project so it sits on top of a standalone app
This commit is contained in:
+321
@@ -0,0 +1,321 @@
|
||||
# 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.
|
||||
|
||||
### [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)
|
||||
|
||||
|
||||
<a name="0.23.1"></a>
|
||||
## [0.23.1](https://github.com/webpack-contrib/style-loader/compare/v0.23.0...v0.23.1) (2018-10-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** support exports of transpiled transforms (`options.transform`) ([#333](https://github.com/webpack-contrib/style-loader/issues/333)) ([33aebed](https://github.com/webpack-contrib/style-loader/commit/33aebed))
|
||||
|
||||
|
||||
|
||||
<a name="0.23.0"></a>
|
||||
# [0.23.0](https://github.com/webpack-contrib/style-loader/compare/v0.22.1...v0.23.0) (2018-08-27)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **useable:** add `insertInto` support (`options.insertInto`) ([#341](https://github.com/webpack-contrib/style-loader/issues/341)) ([2588aca](https://github.com/webpack-contrib/style-loader/commit/2588aca))
|
||||
|
||||
|
||||
|
||||
<a name="0.22.1"></a>
|
||||
## [0.22.1](https://github.com/webpack-contrib/style-loader/compare/v0.22.0...v0.22.1) (2018-08-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** use `var` instead of `const` (IE fix) ([#338](https://github.com/webpack-contrib/style-loader/issues/338)) ([1ca12ab](https://github.com/webpack-contrib/style-loader/commit/1ca12ab))
|
||||
|
||||
|
||||
|
||||
<a name="0.22.0"></a>
|
||||
# [0.22.0](https://github.com/webpack-contrib/style-loader/compare/v0.21.0...v0.22.0) (2018-08-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* insertInto and insertAt collaboration ([#325](https://github.com/webpack-contrib/style-loader/issues/325)) ([c7d8fec](https://github.com/webpack-contrib/style-loader/commit/c7d8fec))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add support for __webpack_nonce__ ([#319](https://github.com/webpack-contrib/style-loader/issues/319)) ([fc24512](https://github.com/webpack-contrib/style-loader/commit/fc24512))
|
||||
|
||||
|
||||
|
||||
<a name="0.21.0"></a>
|
||||
# [0.21.0](https://github.com/webpack-contrib/style-loader/compare/v0.20.3...v0.21.0) (2018-04-18)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* enable tag type configuration ([#316](https://github.com/webpack-contrib/style-loader/issues/316)) ([892cba5](https://github.com/webpack-contrib/style-loader/commit/892cba5))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.3"></a>
|
||||
## [0.20.3](https://github.com/webpack-contrib/style-loader/compare/v0.20.2...v0.20.3) (2018-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **package:** update `schema-utils` v0.4.3...0.4.5 (`dependencies`) ([#308](https://github.com/webpack-contrib/style-loader/issues/308)) ([9455888](https://github.com/webpack-contrib/style-loader/commit/9455888))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.2"></a>
|
||||
## [0.20.2](https://github.com/webpack-contrib/style-loader/compare/v0.20.1...v0.20.2) (2018-02-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **urls:** skip empty `url()` handling ([#304](https://github.com/webpack-contrib/style-loader/issues/304)) ([64f12dc](https://github.com/webpack-contrib/style-loader/commit/64f12dc))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.1"></a>
|
||||
## [0.20.1](https://github.com/webpack-contrib/style-loader/compare/v0.20.0...v0.20.1) (2018-01-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **index:** source code indentation ([#299](https://github.com/webpack-contrib/style-loader/issues/299)) ([b4642e7](https://github.com/webpack-contrib/style-loader/commit/b4642e7))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.0"></a>
|
||||
# [0.20.0](https://github.com/webpack-contrib/style-loader/compare/v0.19.1...v0.20.0) (2018-01-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** check if `HTMLIFrameElement` exist ([#296](https://github.com/webpack-contrib/style-loader/issues/296)) ([9b46128](https://github.com/webpack-contrib/style-loader/commit/9b46128))
|
||||
* **index:** enable HMR in case `locals` (`css-modules`) are unchanged ([#298](https://github.com/webpack-contrib/style-loader/issues/298)) ([3a4cb53](https://github.com/webpack-contrib/style-loader/commit/3a4cb53))
|
||||
* **options:** add `transform` option validation (`{String}`) ([23c3567](https://github.com/webpack-contrib/style-loader/commit/23c3567))
|
||||
* **options:** support passing a `{Function}` (`options.insertInto`) ([e0c4b19](https://github.com/webpack-contrib/style-loader/commit/e0c4b19))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support passing a `{Function}` (`options.insertInto`) ([#279](https://github.com/webpack-contrib/style-loader/issues/279)) ([0eb8fe7](https://github.com/webpack-contrib/style-loader/commit/0eb8fe7))
|
||||
|
||||
|
||||
|
||||
<a name="0.19.1"></a>
|
||||
## [0.19.1](https://github.com/webpack/style-loader/compare/v0.19.0...v0.19.1) (2017-12-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** correctly check `singleton` behavior when `{Boolean}` (`options.singleton`) ([#285](https://github.com/webpack/style-loader/issues/285)) ([2bfc93e](https://github.com/webpack/style-loader/commit/2bfc93e))
|
||||
|
||||
|
||||
|
||||
<a name="0.19.0"></a>
|
||||
# [0.19.0](https://github.com/webpack/style-loader/compare/v0.18.2...v0.19.0) (2017-10-03)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add option to enable/disable HMR (`options.hmr`) ([#264](https://github.com/webpack/style-loader/issues/264)) ([378e906](https://github.com/webpack/style-loader/commit/378e906))
|
||||
* add support for iframes (`options.insertInto`) ([#248](https://github.com/webpack/style-loader/issues/248)) ([25e8e89](https://github.com/webpack/style-loader/commit/25e8e89))
|
||||
* support 'before' insertions (`options.insertAt`) ([#253](https://github.com/webpack/style-loader/issues/253)) ([67120f8](https://github.com/webpack/style-loader/commit/67120f8))
|
||||
|
||||
|
||||
|
||||
<a name="0.18.2"></a>
|
||||
## [0.18.2](https://github.com/webpack/style-loader/compare/v0.18.1...v0.18.2) (2017-06-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **url:** use `loaderUtils.stringifyRequest` to avoid invalidating hashes due to absolute paths ([#242](https://github.com/webpack/style-loader/issues/242)) ([97508ec](https://github.com/webpack/style-loader/commit/97508ec))
|
||||
* Add `null` check to `removeStyleElement` ([#245](https://github.com/webpack/style-loader/issues/245)) ([0a4845c](https://github.com/webpack/style-loader/commit/0a4845c))
|
||||
|
||||
|
||||
|
||||
<a name="0.18.1"></a>
|
||||
## [0.18.1](https://github.com/webpack/style-loader/compare/v0.18.0...v0.18.1) (2017-05-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** revert merged loops ([#236](https://github.com/webpack/style-loader/issues/236)) ([fbd04b1](https://github.com/webpack/style-loader/commit/fbd04b1))
|
||||
|
||||
|
||||
|
||||
<a name="0.18.0"></a>
|
||||
# [0.18.0](https://github.com/webpack/style-loader/compare/v0.17.0...v0.18.0) (2017-05-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* stringify the options.transform request ([#230](https://github.com/webpack/style-loader/issues/230)) ([5888095](https://github.com/webpack/style-loader/commit/5888095))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add options validation ([#224](https://github.com/webpack/style-loader/issues/224)) ([4b6b70d](https://github.com/webpack/style-loader/commit/4b6b70d))
|
||||
|
||||
|
||||
|
||||
<a name="0.17.0"></a>
|
||||
# [0.17.0](https://github.com/webpack/style-loader/compare/v0.16.1...v0.17.0) (2017-05-01)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add option.base ([#164](https://github.com/webpack/style-loader/issues/164)) ([e4ac886](https://github.com/webpack/style-loader/commit/e4ac886))
|
||||
* add option.transform ([#146](https://github.com/webpack/style-loader/issues/146)) ([1c3943f](https://github.com/webpack/style-loader/commit/1c3943f))
|
||||
|
||||
|
||||
|
||||
<a name="0.16.1"></a>
|
||||
## [0.16.1](https://github.com/webpack/style-loader/compare/v0.16.0...v0.16.1) (2017-03-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* negative refs ([#122](https://github.com/webpack/style-loader/issues/122)) ([f6f577a](https://github.com/webpack/style-loader/commit/f6f577a))
|
||||
|
||||
|
||||
|
||||
<a name="0.16.0"></a>
|
||||
# [0.16.0](https://github.com/webpack/style-loader/compare/v0.15.0...v0.16.0) (2017-03-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** update for test for old IE versions ([#196](https://github.com/webpack/style-loader/issues/196)) ([1f68495](https://github.com/webpack/style-loader/commit/1f68495))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Set custom attributes for tag in url mode ([#198](https://github.com/webpack/style-loader/issues/198)) ([2c4f427](https://github.com/webpack/style-loader/commit/2c4f427))
|
||||
|
||||
|
||||
|
||||
<a name="0.15.0"></a>
|
||||
# [0.15.0](https://github.com/webpack/style-loader/compare/v0.14.1...v0.15.0) (2017-03-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* match parens recursively on URLs to not fix embeded calls ([#192](https://github.com/webpack/style-loader/issues/192)) ([71e0908](https://github.com/webpack/style-loader/commit/71e0908))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add insertInto option ([#135](https://github.com/webpack/style-loader/issues/135)) ([6636868](https://github.com/webpack/style-loader/commit/6636868))
|
||||
|
||||
|
||||
|
||||
<a name="0.14.1"></a>
|
||||
## [0.14.1](https://github.com/webpack/style-loader/compare/v0.14.0...v0.14.1) (2017-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* syntax error in IE10 and below because of `const` keyword ([#190](https://github.com/webpack/style-loader/issues/190)) ([01080cf](https://github.com/webpack/style-loader/commit/01080cf))
|
||||
|
||||
|
||||
|
||||
<a name="0.14.0"></a>
|
||||
# [0.14.0](https://github.com/webpack/style-loader/compare/v0.13.1...v0.14.0) (2017-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Adds type attr. to the generated link element ([2a2f261](https://github.com/webpack/style-loader/commit/2a2f261))
|
||||
* **fixUrls:** add param to fix relative urls ([#186](https://github.com/webpack/style-loader/issues/186)) ([19959ee](https://github.com/webpack/style-loader/commit/19959ee))
|
||||
* **usable:** Export locals if available([#128](https://github.com/webpack/style-loader/issues/128)) ([e280cb6](https://github.com/webpack/style-loader/commit/e280cb6))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **tag-attribute:** Add support for custom tag attribute ([995f3de](https://github.com/webpack/style-loader/commit/995f3de))
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+817
@@ -0,0 +1,817 @@
|
||||
<div align="center">
|
||||
<a href="https://github.com/webpack/webpack">
|
||||
<img width="200" height="200"
|
||||
src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
<h1>Style Loader</h1>
|
||||
</div>
|
||||
|
||||
[![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`** | `{String}` | `styleTag` | Allows to setup how styles will be injected into the DOM |
|
||||
| **`attributes`** | `{Object}` | `{}` | Adds custom attributes to tag |
|
||||
| **`insert`** | `{String\|Function}` | `head` | Inserts tag at the given position into the DOM |
|
||||
| **`base`** | `{Number}` | `true` | Sets module ID base (DLLPlugin) |
|
||||
| **`esModule`** | `{Boolean}` | `false` | Use ES modules syntax |
|
||||
|
||||
### `injectType`
|
||||
|
||||
Type: `String`
|
||||
Default: `styleTag`
|
||||
|
||||
Allows to setup how styles will be injected into the DOM.
|
||||
|
||||
Possible values:
|
||||
|
||||
- `styleTag`
|
||||
- `singletonStyleTag`
|
||||
- `lazyStyleTag`
|
||||
- `lazySingletonStyleTag`
|
||||
- `linkTag`
|
||||
|
||||
#### `styleTag`
|
||||
|
||||
Automatically injects styles into the DOM using multiple `<style></style>`. 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
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `singletonStyleTag`
|
||||
|
||||
Automatically injects styles into the DOM using one `<style></style>`.
|
||||
|
||||
> ⚠ 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
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `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: /\.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
|
||||
<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 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
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `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
|
||||
import './styles.css';
|
||||
import './other-styles.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.link\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { injectType: 'linkTag' } },
|
||||
{ loader: 'file-loader' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader generate this:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="path/to/style.css" />
|
||||
<link rel="stylesheet" href="path/to/other-styles.css" />
|
||||
```
|
||||
|
||||
### `attributes`
|
||||
|
||||
Type: `Object`
|
||||
Default: `{}`
|
||||
|
||||
If defined, the `style-loader` will attach given attributes with their values on `<style>` / `<link>` element.
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import style from './file.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { attributes: { id: 'id' } } },
|
||||
{ loader: 'css-loader' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```html
|
||||
<style id="id"></style>
|
||||
```
|
||||
|
||||
### `insert`
|
||||
|
||||
Type: `String|Function`
|
||||
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`
|
||||
|
||||
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
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
insert: 'body',
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
> ⚠ 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
|
||||
> ⚠ 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 = {
|
||||
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;
|
||||
|
||||
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',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Insert styles at top of `head` tag.
|
||||
|
||||
### `base`
|
||||
|
||||
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.:
|
||||
|
||||
**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: `Boolean`
|
||||
Default: `false`
|
||||
|
||||
By default, `style-loader` generates JS modules that use the CommonJS 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 ES module syntax using:
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
esModule: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### 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
|
||||
|
||||
> ⚠ 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>
|
||||
```
|
||||
|
||||
#### `__webpack_nonce__`
|
||||
|
||||
**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
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader generate:
|
||||
|
||||
```html
|
||||
<style nonce="12345678">
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### Insert styles at top
|
||||
|
||||
Inserts styles at top of `head` tag.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
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',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
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-contrib/style-loader.svg
|
||||
[deps-url]: https://david-dm.org/webpack-contrib/style-loader
|
||||
[tests]: https://dev.azure.com/webpack-contrib/style-loader/_apis/build/status/webpack-contrib.style-loader?branchName=master
|
||||
[tests-url]: https://dev.azure.com/webpack-contrib/style-loader/_build/latest?definitionId=18&branchName=master
|
||||
[cover]: https://codecov.io/gh/webpack-contrib/style-loader/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack-contrib/style-loader
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
[size]: https://packagephobia.now.sh/badge?p=style-loader
|
||||
[size-url]: https://packagephobia.now.sh/result?p=style-loader
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
"use strict";
|
||||
|
||||
const loader = require('./index');
|
||||
|
||||
module.exports = loader.default;
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _loaderUtils = _interopRequireDefault(require("loader-utils"));
|
||||
|
||||
var _schemaUtils = _interopRequireDefault(require("schema-utils"));
|
||||
|
||||
var _options = _interopRequireDefault(require("./options.json"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
const loaderApi = () => {};
|
||||
|
||||
loaderApi.pitch = function loader(request) {
|
||||
const options = _loaderUtils.default.getOptions(this) || {};
|
||||
(0, _schemaUtils.default)(_options.default, options, {
|
||||
name: 'Style Loader',
|
||||
baseDataPath: 'options'
|
||||
});
|
||||
const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === 'string' ? JSON.stringify(options.insert) : options.insert.toString();
|
||||
const injectType = options.injectType || 'styleTag';
|
||||
const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
|
||||
delete options.esModule;
|
||||
|
||||
switch (injectType) {
|
||||
case 'linkTag':
|
||||
{
|
||||
const hmrCode = this.hot ? `
|
||||
if (module.hot) {
|
||||
module.hot.accept(
|
||||
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
|
||||
function() {
|
||||
${esModule ? `update(content);` : `var newContent = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
|
||||
newContent = newContent.__esModule ? newContent.default : newContent;
|
||||
|
||||
update(newContent);`}
|
||||
}
|
||||
);
|
||||
|
||||
module.hot.dispose(function() {
|
||||
update();
|
||||
});
|
||||
}` : '';
|
||||
return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`)};
|
||||
import content from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`)});
|
||||
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
|
||||
content = content.__esModule ? content.default : content;`}
|
||||
|
||||
var options = ${JSON.stringify(options)};
|
||||
|
||||
options.insert = ${insert};
|
||||
|
||||
var update = api(content, options);
|
||||
|
||||
${hmrCode}
|
||||
|
||||
${esModule ? `export default {}` : ''}`;
|
||||
}
|
||||
|
||||
case 'lazyStyleTag':
|
||||
case 'lazySingletonStyleTag':
|
||||
{
|
||||
const isSingleton = injectType === 'lazySingletonStyleTag';
|
||||
const hmrCode = this.hot ? `
|
||||
if (module.hot) {
|
||||
var lastRefs = module.hot.data && module.hot.data.refs || 0;
|
||||
|
||||
if (lastRefs) {
|
||||
exported.use();
|
||||
|
||||
if (!content.locals) {
|
||||
refs = lastRefs;
|
||||
}
|
||||
}
|
||||
|
||||
if (!content.locals) {
|
||||
module.hot.accept();
|
||||
}
|
||||
|
||||
module.hot.dispose(function(data) {
|
||||
data.refs = content.locals ? 0 : refs;
|
||||
|
||||
if (dispose) {
|
||||
dispose();
|
||||
}
|
||||
});
|
||||
}` : '';
|
||||
return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)};
|
||||
import content from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
|
||||
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
|
||||
content = content.__esModule ? content.default : content;
|
||||
|
||||
if (typeof content === 'string') {
|
||||
content = [[module.id, content, '']];
|
||||
}`}
|
||||
|
||||
var refs = 0;
|
||||
var dispose;
|
||||
var options = ${JSON.stringify(options)};
|
||||
|
||||
options.insert = ${insert};
|
||||
options.singleton = ${isSingleton};
|
||||
|
||||
var exported = {};
|
||||
|
||||
if (content.locals) {
|
||||
exported.locals = content.locals;
|
||||
}
|
||||
|
||||
exported.use = function() {
|
||||
if (!(refs++)) {
|
||||
dispose = api(content, options);
|
||||
}
|
||||
|
||||
return exported;
|
||||
};
|
||||
|
||||
exported.unuse = function() {
|
||||
if (refs > 0 && !--refs) {
|
||||
dispose();
|
||||
dispose = null;
|
||||
}
|
||||
};
|
||||
|
||||
${hmrCode}
|
||||
|
||||
${esModule ? 'export default' : 'module.exports ='} exported;`;
|
||||
}
|
||||
|
||||
case 'styleTag':
|
||||
case 'singletonStyleTag':
|
||||
default:
|
||||
{
|
||||
const isSingleton = injectType === 'singletonStyleTag';
|
||||
const hmrCode = this.hot ? `
|
||||
if (module.hot) {
|
||||
if (!content.locals) {
|
||||
module.hot.accept(
|
||||
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
|
||||
function () {
|
||||
${esModule ? `update(content);` : `var newContent = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
|
||||
newContent = newContent.__esModule ? newContent.default : newContent;
|
||||
|
||||
if (typeof newContent === 'string') {
|
||||
newContent = [[module.id, newContent, '']];
|
||||
}
|
||||
|
||||
update(newContent);`}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
module.hot.dispose(function() {
|
||||
update();
|
||||
});
|
||||
}` : '';
|
||||
return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)};
|
||||
import content from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};
|
||||
var clonedContent = content;` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
|
||||
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
|
||||
content = content.__esModule ? content.default : content;
|
||||
|
||||
if (typeof content === 'string') {
|
||||
content = [[module.id, content, '']];
|
||||
}`}
|
||||
|
||||
var options = ${JSON.stringify(options)};
|
||||
|
||||
options.insert = ${insert};
|
||||
options.singleton = ${isSingleton};
|
||||
|
||||
var update = api(content, options);
|
||||
|
||||
var exported = content.locals ? content.locals : {};
|
||||
|
||||
${hmrCode}
|
||||
|
||||
${esModule ? 'export default' : 'module.exports ='} exported;`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var _default = loaderApi;
|
||||
exports.default = _default;
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"injectType": {
|
||||
"description": "Allows to setup how styles will be injected into DOM (https://github.com/webpack-contrib/style-loader#injecttype).",
|
||||
"enum": [
|
||||
"styleTag",
|
||||
"singletonStyleTag",
|
||||
"lazyStyleTag",
|
||||
"lazySingletonStyleTag",
|
||||
"linkTag"
|
||||
]
|
||||
},
|
||||
"attributes": {
|
||||
"description": "Adds custom attributes to tag (https://github.com/webpack-contrib/style-loader#attributes).",
|
||||
"type": "object"
|
||||
},
|
||||
"insert": {
|
||||
"description": "Inserts `<style>`/`<link>` at the given position (https://github.com/webpack-contrib/style-loader#insert).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"base": {
|
||||
"description": "Sets module ID base for DLLPlugin (https://github.com/webpack-contrib/style-loader#base).",
|
||||
"type": "number"
|
||||
},
|
||||
"esModule": {
|
||||
"description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
"use strict";
|
||||
|
||||
var getTarget = function getTarget() {
|
||||
var memo = {};
|
||||
return function memorize(target) {
|
||||
if (typeof memo[target] === 'undefined') {
|
||||
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
|
||||
|
||||
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
|
||||
try {
|
||||
// This will throw an exception if access to iframe is blocked
|
||||
// due to cross-origin restrictions
|
||||
styleTarget = styleTarget.contentDocument.head;
|
||||
} catch (e) {
|
||||
// istanbul ignore next
|
||||
styleTarget = null;
|
||||
}
|
||||
}
|
||||
|
||||
memo[target] = styleTarget;
|
||||
}
|
||||
|
||||
return memo[target];
|
||||
};
|
||||
}();
|
||||
|
||||
module.exports = function (url, options) {
|
||||
options = options || {};
|
||||
options.attributes = typeof options.attributes === 'object' ? options.attributes : {};
|
||||
|
||||
if (typeof options.attributes.nonce === 'undefined') {
|
||||
var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
|
||||
|
||||
if (nonce) {
|
||||
options.attributes.nonce = nonce;
|
||||
}
|
||||
}
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
Object.keys(options.attributes).forEach(function (key) {
|
||||
link.setAttribute(key, options.attributes[key]);
|
||||
});
|
||||
|
||||
if (typeof options.insert === 'function') {
|
||||
options.insert(link);
|
||||
} else {
|
||||
var target = getTarget(options.insert || 'head');
|
||||
|
||||
if (!target) {
|
||||
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
|
||||
}
|
||||
|
||||
target.appendChild(link);
|
||||
}
|
||||
|
||||
return function (newUrl) {
|
||||
if (typeof newUrl === 'string') {
|
||||
link.href = newUrl;
|
||||
} else {
|
||||
link.parentNode.removeChild(link);
|
||||
}
|
||||
};
|
||||
};
|
||||
+269
@@ -0,0 +1,269 @@
|
||||
"use strict";
|
||||
|
||||
var isOldIE = function isOldIE() {
|
||||
var memo;
|
||||
return function memorize() {
|
||||
if (typeof memo === 'undefined') {
|
||||
// Test for IE <= 9 as proposed by Browserhacks
|
||||
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||
// Tests for existence of standard globals is to allow style-loader
|
||||
// to operate correctly into non-standard environments
|
||||
// @see https://github.com/webpack-contrib/style-loader/issues/177
|
||||
memo = Boolean(window && document && document.all && !window.atob);
|
||||
}
|
||||
|
||||
return memo;
|
||||
};
|
||||
}();
|
||||
|
||||
var getTarget = function getTarget() {
|
||||
var memo = {};
|
||||
return function memorize(target) {
|
||||
if (typeof memo[target] === 'undefined') {
|
||||
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
|
||||
|
||||
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
|
||||
try {
|
||||
// This will throw an exception if access to iframe is blocked
|
||||
// due to cross-origin restrictions
|
||||
styleTarget = styleTarget.contentDocument.head;
|
||||
} catch (e) {
|
||||
// istanbul ignore next
|
||||
styleTarget = null;
|
||||
}
|
||||
}
|
||||
|
||||
memo[target] = styleTarget;
|
||||
}
|
||||
|
||||
return memo[target];
|
||||
};
|
||||
}();
|
||||
|
||||
var stylesInDom = [];
|
||||
|
||||
function getIndexByIdentifier(identifier) {
|
||||
var result = -1;
|
||||
|
||||
for (var i = 0; i < stylesInDom.length; i++) {
|
||||
if (stylesInDom[i].identifier === identifier) {
|
||||
result = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function modulesToDom(list, options) {
|
||||
var idCountMap = {};
|
||||
var identifiers = [];
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var item = list[i];
|
||||
var id = options.base ? item[0] + options.base : item[0];
|
||||
var count = idCountMap[id] || 0;
|
||||
var identifier = "".concat(id, " ").concat(count);
|
||||
idCountMap[id] = count + 1;
|
||||
var index = getIndexByIdentifier(identifier);
|
||||
var obj = {
|
||||
css: item[1],
|
||||
media: item[2],
|
||||
sourceMap: item[3]
|
||||
};
|
||||
|
||||
if (index !== -1) {
|
||||
stylesInDom[index].references++;
|
||||
stylesInDom[index].updater(obj);
|
||||
} else {
|
||||
stylesInDom.push({
|
||||
identifier: identifier,
|
||||
updater: addStyle(obj, options),
|
||||
references: 1
|
||||
});
|
||||
}
|
||||
|
||||
identifiers.push(identifier);
|
||||
}
|
||||
|
||||
return identifiers;
|
||||
}
|
||||
|
||||
function insertStyleElement(options) {
|
||||
var style = document.createElement('style');
|
||||
var attributes = options.attributes || {};
|
||||
|
||||
if (typeof attributes.nonce === 'undefined') {
|
||||
var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
|
||||
|
||||
if (nonce) {
|
||||
attributes.nonce = nonce;
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(attributes).forEach(function (key) {
|
||||
style.setAttribute(key, attributes[key]);
|
||||
});
|
||||
|
||||
if (typeof options.insert === 'function') {
|
||||
options.insert(style);
|
||||
} else {
|
||||
var target = getTarget(options.insert || 'head');
|
||||
|
||||
if (!target) {
|
||||
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
|
||||
}
|
||||
|
||||
target.appendChild(style);
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
function removeStyleElement(style) {
|
||||
// istanbul ignore if
|
||||
if (style.parentNode === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
style.parentNode.removeChild(style);
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
|
||||
|
||||
var replaceText = function replaceText() {
|
||||
var textStore = [];
|
||||
return function replace(index, replacement) {
|
||||
textStore[index] = replacement;
|
||||
return textStore.filter(Boolean).join('\n');
|
||||
};
|
||||
}();
|
||||
|
||||
function applyToSingletonTag(style, index, remove, obj) {
|
||||
var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = replaceText(index, css);
|
||||
} else {
|
||||
var cssNode = document.createTextNode(css);
|
||||
var childNodes = style.childNodes;
|
||||
|
||||
if (childNodes[index]) {
|
||||
style.removeChild(childNodes[index]);
|
||||
}
|
||||
|
||||
if (childNodes.length) {
|
||||
style.insertBefore(cssNode, childNodes[index]);
|
||||
} else {
|
||||
style.appendChild(cssNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyToTag(style, options, obj) {
|
||||
var css = obj.css;
|
||||
var media = obj.media;
|
||||
var sourceMap = obj.sourceMap;
|
||||
|
||||
if (media) {
|
||||
style.setAttribute('media', media);
|
||||
} else {
|
||||
style.removeAttribute('media');
|
||||
}
|
||||
|
||||
if (sourceMap && btoa) {
|
||||
css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
|
||||
} // For old IE
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = css;
|
||||
} else {
|
||||
while (style.firstChild) {
|
||||
style.removeChild(style.firstChild);
|
||||
}
|
||||
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
var singleton = null;
|
||||
var singletonCounter = 0;
|
||||
|
||||
function addStyle(obj, options) {
|
||||
var style;
|
||||
var update;
|
||||
var remove;
|
||||
|
||||
if (options.singleton) {
|
||||
var styleIndex = singletonCounter++;
|
||||
style = singleton || (singleton = insertStyleElement(options));
|
||||
update = applyToSingletonTag.bind(null, style, styleIndex, false);
|
||||
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
|
||||
} else {
|
||||
style = insertStyleElement(options);
|
||||
update = applyToTag.bind(null, style, options);
|
||||
|
||||
remove = function remove() {
|
||||
removeStyleElement(style);
|
||||
};
|
||||
}
|
||||
|
||||
update(obj);
|
||||
return function updateStyle(newObj) {
|
||||
if (newObj) {
|
||||
if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
|
||||
return;
|
||||
}
|
||||
|
||||
update(obj = newObj);
|
||||
} else {
|
||||
remove();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = function (list, options) {
|
||||
options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
||||
// tags it will allow on a page
|
||||
|
||||
if (!options.singleton && typeof options.singleton !== 'boolean') {
|
||||
options.singleton = isOldIE();
|
||||
}
|
||||
|
||||
list = list || [];
|
||||
var lastIdentifiers = modulesToDom(list, options);
|
||||
return function update(newList) {
|
||||
newList = newList || [];
|
||||
|
||||
if (Object.prototype.toString.call(newList) !== '[object Array]') {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < lastIdentifiers.length; i++) {
|
||||
var identifier = lastIdentifiers[i];
|
||||
var index = getIndexByIdentifier(identifier);
|
||||
stylesInDom[index].references--;
|
||||
}
|
||||
|
||||
var newLastIdentifiers = modulesToDom(newList, options);
|
||||
|
||||
for (var _i = 0; _i < lastIdentifiers.length; _i++) {
|
||||
var _identifier = lastIdentifiers[_i];
|
||||
|
||||
var _index = getIndexByIdentifier(_identifier);
|
||||
|
||||
if (stylesInDom[_index].references === 0) {
|
||||
stylesInDom[_index].updater();
|
||||
|
||||
stylesInDom.splice(_index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
lastIdentifiers = newLastIdentifiers;
|
||||
};
|
||||
};
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"_from": "style-loader@*",
|
||||
"_id": "style-loader@1.1.3",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==",
|
||||
"_location": "/style-loader",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "style-loader@*",
|
||||
"name": "style-loader",
|
||||
"escapedName": "style-loader",
|
||||
"rawSpec": "*",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "*"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#DEV:/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.1.3.tgz",
|
||||
"_shasum": "9e826e69c683c4d9bf9db924f85e9abb30d5e200",
|
||||
"_spec": "style-loader@*",
|
||||
"_where": "O:\\zero\\zero.Web",
|
||||
"author": {
|
||||
"name": "Tobias Koppers @sokra"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/webpack-contrib/style-loader/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"schema-utils": "^2.6.4"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "style loader module for webpack",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.8.3",
|
||||
"@babel/core": "^7.8.3",
|
||||
"@babel/preset-env": "^7.8.3",
|
||||
"@commitlint/cli": "^8.3.5",
|
||||
"@commitlint/config-conventional": "^8.3.4",
|
||||
"@webpack-contrib/defaults": "^6.3.0",
|
||||
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
|
||||
"babel-jest": "^24.9.0",
|
||||
"commitlint-azure-pipelines-cli": "^1.0.3",
|
||||
"cross-env": "^6.0.3",
|
||||
"css-loader": "^3.4.2",
|
||||
"del": "^5.1.0",
|
||||
"del-cli": "^3.0.0",
|
||||
"es-check": "^5.1.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-prettier": "^6.9.0",
|
||||
"eslint-plugin-import": "^2.20.0",
|
||||
"file-loader": "^5.0.2",
|
||||
"husky": "^3.1.0",
|
||||
"jest": "^24.9.0",
|
||||
"jest-junit": "^10.0.0",
|
||||
"jsdom": "^15.2.1",
|
||||
"lint-staged": "^9.5.0",
|
||||
"memfs": "^3.0.4",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^1.19.1",
|
||||
"sass": "^1.24.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"semver": "^7.1.1",
|
||||
"standard-version": "^7.0.1",
|
||||
"webpack": "^4.41.5",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.10.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"homepage": "https://github.com/webpack-contrib/style-loader",
|
||||
"keywords": [
|
||||
"webpack"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs.js",
|
||||
"name": "style-loader",
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0 || ^5.0.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/webpack-contrib/style-loader.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
|
||||
"clean": "del-cli dist",
|
||||
"commitlint": "commitlint --from=master",
|
||||
"defaults": "webpack-defaults",
|
||||
"lint": "npm-run-all -l -p \"lint:**\"",
|
||||
"lint:js": "eslint --cache .",
|
||||
"lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
|
||||
"postbuild": "npm run validate:runtime",
|
||||
"prebuild": "npm run clean",
|
||||
"prepare": "npm run build",
|
||||
"pretest": "npm run lint",
|
||||
"release": "standard-version",
|
||||
"security": "npm audit",
|
||||
"start": "npm run build -- -w",
|
||||
"test": "npm run test:coverage",
|
||||
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
|
||||
"test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
|
||||
"test:only": "cross-env NODE_ENV=test jest",
|
||||
"test:watch": "npm run test:only -- --watch",
|
||||
"validate:runtime": "es-check es3 \"dist/runtime/**/*.js\""
|
||||
},
|
||||
"version": "1.1.3"
|
||||
}
|
||||
Reference in New Issue
Block a user