draft: refactor project so it sits on top of a standalone app
This commit is contained in:
+398
@@ -0,0 +1,398 @@
|
||||
# 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.4.2](https://github.com/webpack-contrib/css-loader/compare/v3.4.1...v3.4.2) (2020-01-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* do not duplicate css on `composes` ([#1040](https://github.com/webpack-contrib/css-loader/issues/1040)) ([df79602](https://github.com/webpack-contrib/css-loader/commit/df7960277be20ec80e9be1a41ac53baf69847fa0))
|
||||
|
||||
### [3.4.1](https://github.com/webpack-contrib/css-loader/compare/v3.4.0...v3.4.1) (2020-01-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* do not output `undefined` when sourceRoot is unavailable ([#1036](https://github.com/webpack-contrib/css-loader/issues/1036)) ([ded2a79](https://github.com/webpack-contrib/css-loader/commit/ded2a797271f2adf864bf92300621c024974bc79))
|
||||
* don't output invalid es5 code when locals do not exists ([#1035](https://github.com/webpack-contrib/css-loader/issues/1035)) ([b60e62a](https://github.com/webpack-contrib/css-loader/commit/b60e62a655719cc1779fae7d577af6ad6cf42135))
|
||||
|
||||
## [3.4.0](https://github.com/webpack-contrib/css-loader/compare/v3.3.1...v3.4.0) (2019-12-17)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* `esModule` option ([#1026](https://github.com/webpack-contrib/css-loader/issues/1026)) ([d358cdb](https://github.com/webpack-contrib/css-loader/commit/d358cdbe2c026afafa0279003cb6c8a3eff4c419))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* logic for order and media queries for imports ([#1018](https://github.com/webpack-contrib/css-loader/issues/1018)) ([65450d9](https://github.com/webpack-contrib/css-loader/commit/65450d9c04790ccc9fb06eac81ea6d8f3cdbfaac))
|
||||
|
||||
### [3.3.2](https://github.com/webpack-contrib/css-loader/compare/v3.3.1...v3.3.2) (2019-12-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* logic for order and media queries for imports ([1fb5134](https://github.com/webpack-contrib/css-loader/commit/1fb51340a7719b6f5b517cb71ea85ec5d45c1199))
|
||||
|
||||
### [3.3.1](https://github.com/webpack-contrib/css-loader/compare/v3.3.0...v3.3.1) (2019-12-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* better handling url functions and an url in `@import` at-rules
|
||||
* reduce count of `require` ([#1014](https://github.com/webpack-contrib/css-loader/issues/1014)) ([e091d27](https://github.com/webpack-contrib/css-loader/commit/e091d2709c29ac57ed0106af8ec3b581cbda7a9c))
|
||||
|
||||
## [3.3.0](https://github.com/webpack-contrib/css-loader/compare/v3.2.1...v3.3.0) (2019-12-09)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support `pure` css modules ([#1008](https://github.com/webpack-contrib/css-loader/issues/1008)) ([6177af5](https://github.com/webpack-contrib/css-loader/commit/6177af5596566fead13a8f66d5abcb4dc2b744db))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* do not crash when an assert return `null` or `undefined` ([#1006](https://github.com/webpack-contrib/css-loader/issues/1006)) ([6769783](https://github.com/webpack-contrib/css-loader/commit/67697833725e1cff12a14663390bbe4c65ea36d2))
|
||||
* reduce count of `require` ([#1004](https://github.com/webpack-contrib/css-loader/issues/1004)) ([80e9662](https://github.com/webpack-contrib/css-loader/commit/80e966280f2477c5c0e4553d3be3a04511fea381))
|
||||
|
||||
### [3.2.1](https://github.com/webpack-contrib/css-loader/compare/v3.2.0...v3.2.1) (2019-12-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add an additional space after the escape sequence ([#998](https://github.com/webpack-contrib/css-loader/issues/998)) ([0961304](https://github.com/webpack-contrib/css-loader/commit/0961304020832fc9ca70cc708f4366e1f868e765))
|
||||
* compatibility with ES modules syntax and hash in `url` function ([#1001](https://github.com/webpack-contrib/css-loader/issues/1001)) ([8f4d6f5](https://github.com/webpack-contrib/css-loader/commit/8f4d6f508187513347106a436eda993f874065f1))
|
||||
|
||||
## [3.2.0](https://github.com/webpack-contrib/css-loader/compare/v3.1.0...v3.2.0) (2019-08-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* replace `.` characters in localIndent to `-` character (regression) ([#982](https://github.com/webpack-contrib/css-loader/issues/982)) ([967fb66](https://github.com/webpack-contrib/css-loader/commit/967fb66))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support es modules for assets loader ([#984](https://github.com/webpack-contrib/css-loader/issues/984)) ([9c5126c](https://github.com/webpack-contrib/css-loader/commit/9c5126c))
|
||||
|
||||
## [3.1.0](https://github.com/webpack-contrib/css-loader/compare/v3.0.0...v3.1.0) (2019-07-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* converting all (including reserved and control) filesystem characters to `-` (it was regression in `3.0.0` version) ([#972](https://github.com/webpack-contrib/css-loader/issues/972)) ([f51859b](https://github.com/webpack-contrib/css-loader/commit/f51859b))
|
||||
* default context should be undefined instead of null ([#965](https://github.com/webpack-contrib/css-loader/issues/965)) ([9c32885](https://github.com/webpack-contrib/css-loader/commit/9c32885))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* allow `modules.getLocalIdent` to return a falsy value ([#963](https://github.com/webpack-contrib/css-loader/issues/963)) ([9c3571c](https://github.com/webpack-contrib/css-loader/commit/9c3571c))
|
||||
* improved validation error messages ([65e4fc0](https://github.com/webpack-contrib/css-loader/commit/65e4fc0))
|
||||
|
||||
|
||||
|
||||
## [3.0.0](https://github.com/webpack-contrib/css-loader/compare/v2.1.1...v3.0.0) (2019-06-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* avoid the "from" argument must be of type string error ([#908](https://github.com/webpack-contrib/css-loader/issues/908)) ([e5dfd23](https://github.com/webpack-contrib/css-loader/commit/e5dfd23))
|
||||
* invert `Function` behavior for `url` and `import` options ([#939](https://github.com/webpack-contrib/css-loader/issues/939)) ([e9eb5ad](https://github.com/webpack-contrib/css-loader/commit/e9eb5ad))
|
||||
* properly export locals with escaped characters ([#917](https://github.com/webpack-contrib/css-loader/issues/917)) ([a0efcda](https://github.com/webpack-contrib/css-loader/commit/a0efcda))
|
||||
* property handle non css characters in localIdentName ([#920](https://github.com/webpack-contrib/css-loader/issues/920)) ([d3a0a3c](https://github.com/webpack-contrib/css-loader/commit/d3a0a3c))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* modules options now accepts object config ([#937](https://github.com/webpack-contrib/css-loader/issues/937)) ([1d7a464](https://github.com/webpack-contrib/css-loader/commit/1d7a464))
|
||||
* support `@value` at-rule in selectors ([#941](https://github.com/webpack-contrib/css-loader/issues/941)) ([05a42e2](https://github.com/webpack-contrib/css-loader/commit/05a42e2))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* minimum required nodejs version is 8.9.0
|
||||
* `@value` at rules now support in `selector`, recommends checking all `@values` at-rule usage (hint: you can add prefix to all `@value` at-rules, for example `@value v-foo: black;` or `@value m-foo: screen and (max-width: 12450px)`, and then do upgrade)
|
||||
* invert `{Function}` behavior for `url` and `import` options (need return `true` when you want handle `url`/`@import` and return `false` if not)
|
||||
* `camelCase` option was remove in favor `localsConvention` option, also it is accept only `{String}` value (use `camelCase` value if you previously value was `true` and `asIs` if you previously value was `false`)
|
||||
* `exportOnlyLocals` option was remove in favor `onlyLocals` option
|
||||
* `modules` option now can be `{Object}` and allow to setup `CSS Modules` options:
|
||||
* `localIdentName` option was removed in favor `modules.localIdentName` option
|
||||
* `context` option was remove in favor `modules.context` option
|
||||
* `hashPrefix` option was removed in favor `modules.hashPrefix` option
|
||||
* `getLocalIdent` option was removed in favor `modules.getLocalIdent` option
|
||||
* `localIdentRegExp` option was removed in favor `modules.localIdentRegExp` option
|
||||
|
||||
|
||||
|
||||
<a name="2.1.1"></a>
|
||||
## [2.1.1](https://github.com/webpack-contrib/css-loader/compare/v2.1.0...v2.1.1) (2019-03-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* do not break selector with escaping ([#896](https://github.com/webpack-contrib/css-loader/issues/896)) ([0ba8c66](https://github.com/webpack-contrib/css-loader/commit/0ba8c66))
|
||||
* source map generation when `sourceRoot` is present ([#901](https://github.com/webpack-contrib/css-loader/issues/901)) ([e9ce745](https://github.com/webpack-contrib/css-loader/commit/e9ce745))
|
||||
* sourcemap generating when previous loader pass sourcemap as string ([#905](https://github.com/webpack-contrib/css-loader/issues/905)) ([3797e4d](https://github.com/webpack-contrib/css-loader/commit/3797e4d))
|
||||
|
||||
|
||||
|
||||
<a name="2.1.0"></a>
|
||||
# [2.1.0](https://github.com/webpack-contrib/css-loader/compare/v2.0.2...v2.1.0) (2018-12-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support `image-set` without `url` ([#879](https://github.com/webpack-contrib/css-loader/issues/879)) ([21884e2](https://github.com/webpack-contrib/css-loader/commit/21884e2))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.2"></a>
|
||||
## [2.0.2](https://github.com/webpack-contrib/css-loader/compare/v2.0.1...v2.0.2) (2018-12-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* inappropriate modification of animation keywords ([#876](https://github.com/webpack-contrib/css-loader/issues/876)) ([dfb2f8e](https://github.com/webpack-contrib/css-loader/commit/dfb2f8e))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.1"></a>
|
||||
# [2.0.1](https://github.com/webpack-contrib/css-loader/compare/v2.0.0...v2.0.1) (2018-12-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* safe checking if params are present for at rule ([#871](https://github.com/webpack-contrib/css-loader/issues/871)) ([a88fed1](https://github.com/webpack-contrib/css-loader/commit/a88fed1))
|
||||
* `getLocalIdent` now accepts `false` value ([#865](https://github.com/webpack-contrib/css-loader/issues/865)) ([1825e8a](https://github.com/webpack-contrib/css-loader/commit/1825e8a))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0"></a>
|
||||
# [2.0.0](https://github.com/webpack-contrib/css-loader/compare/v1.0.1...v2.0.0) (2018-12-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* broken unucode characters ([#850](https://github.com/webpack-contrib/css-loader/issues/850)) ([f599c70](https://github.com/webpack-contrib/css-loader/commit/f599c70))
|
||||
* correctly processing `urls()` with `?#hash` ([#803](https://github.com/webpack-contrib/css-loader/issues/803)) ([417d105](https://github.com/webpack-contrib/css-loader/commit/417d105))
|
||||
* don't break loader on invalid or not exists url or import token ([#827](https://github.com/webpack-contrib/css-loader/issues/827)) ([9e52d26](https://github.com/webpack-contrib/css-loader/commit/9e52d26))
|
||||
* don't duplicate import with same media in different case ([#819](https://github.com/webpack-contrib/css-loader/issues/819)) ([9f66e33](https://github.com/webpack-contrib/css-loader/commit/9f66e33))
|
||||
* emit warnings on broken `import` at-rules ([#806](https://github.com/webpack-contrib/css-loader/issues/806)) ([4bdf08b](https://github.com/webpack-contrib/css-loader/commit/4bdf08b))
|
||||
* handle uppercase `URL` in `import` at-rules ([#818](https://github.com/webpack-contrib/css-loader/issues/818)) ([3ebdcd5](https://github.com/webpack-contrib/css-loader/commit/3ebdcd5))
|
||||
* inconsistent generate class names for css modules on difference os ([#812](https://github.com/webpack-contrib/css-loader/issues/812)) ([0bdf9b7](https://github.com/webpack-contrib/css-loader/commit/0bdf9b7))
|
||||
* reduce number of `require` for `urls()` ([#854](https://github.com/webpack-contrib/css-loader/issues/854)) ([3338656](https://github.com/webpack-contrib/css-loader/commit/3338656))
|
||||
* support deduplication of string module ids (optimization.namedModules) ([#789](https://github.com/webpack-contrib/css-loader/issues/789)) ([e3bb83a](https://github.com/webpack-contrib/css-loader/commit/e3bb83a))
|
||||
* support module resolution in `composes` ([#845](https://github.com/webpack-contrib/css-loader/issues/845)) ([453248f](https://github.com/webpack-contrib/css-loader/commit/453248f))
|
||||
* same `urls()` resolving logic for `modules` (`local` and `global`) and without modules ([#843](https://github.com/webpack-contrib/css-loader/issues/843)) ([fdcf687](https://github.com/webpack-contrib/css-loader/commit/fdcf687))
|
||||
|
||||
### Features
|
||||
|
||||
* allow to disable css modules and **disable their by default** ([#842](https://github.com/webpack-contrib/css-loader/issues/842)) ([889dc7f](https://github.com/webpack-contrib/css-loader/commit/889dc7f))
|
||||
* disable `import` option doesn't affect on `composes` ([#822](https://github.com/webpack-contrib/css-loader/issues/822)) ([f9aa73c](https://github.com/webpack-contrib/css-loader/commit/f9aa73c))
|
||||
* allow to filter `urls` ([#856](https://github.com/webpack-contrib/css-loader/issues/856)) ([5e702e7](https://github.com/webpack-contrib/css-loader/commit/5e702e7))
|
||||
* allow to filter `import` at-rules ([#857](https://github.com/webpack-contrib/css-loader/issues/857)) ([5e6034c](https://github.com/webpack-contrib/css-loader/commit/5e6034c))
|
||||
* emit warning on invalid `urls()` ([#832](https://github.com/webpack-contrib/css-loader/issues/832)) ([da95db8](https://github.com/webpack-contrib/css-loader/commit/da95db8))
|
||||
* added `exportOnlyLocals` option ([#824](https://github.com/webpack-contrib/css-loader/issues/824)) ([e9327c0](https://github.com/webpack-contrib/css-loader/commit/e9327c0))
|
||||
* reuse `postcss` ast from other loaders (i.e `postcss-loader`) ([#840](https://github.com/webpack-contrib/css-loader/issues/840)) ([1dad1fb](https://github.com/webpack-contrib/css-loader/commit/1dad1fb))
|
||||
* schema options ([b97d997](https://github.com/webpack-contrib/css-loader/commit/b97d997))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* resolving logic for `url()` and `import` at-rules works the same everywhere, it does not matter whether css modules are enabled (with `global` and `local` module) or not. Examples - `url('image.png')` as `require('./image.png')`, `url('./image.png')` as `require('./image.png')`, `url('~module/image.png')` as `require('module/image.png')`.
|
||||
* by default css modules are disabled (now `modules: false` disable all css modules features), you can return old behaviour change this on `modules: 'global'`
|
||||
* `css-loader/locals` was dropped in favor `exportOnlyLocals` option
|
||||
* `import` option only affect on `import` at-rules and doesn't affect on `composes` declarations
|
||||
* invalid `@import` at rules now emit warnings
|
||||
* use `postcss@7`
|
||||
|
||||
|
||||
|
||||
<a name="1.0.1"></a>
|
||||
## [1.0.1](https://github.com/webpack-contrib/css-loader/compare/v1.0.0...v1.0.1) (2018-10-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **loader:** trim unquoted import urls ([#783](https://github.com/webpack-contrib/css-loader/issues/783)) ([21fcddf](https://github.com/webpack-contrib/css-loader/commit/21fcddf))
|
||||
|
||||
|
||||
|
||||
<a name="1.0.0"></a>
|
||||
# [1.0.0](https://github.com/webpack-contrib/css-loader/compare/v0.28.11...v1.0.0) (2018-07-06)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* remove `minimize` option, use [`postcss-loader`](https://github.com/postcss/postcss-loader) with [`cssnano`](https://github.com/cssnano/cssnano) or use [`optimize-cssnano-plugin`](https://github.com/intervolga/optimize-cssnano-plugin) plugin
|
||||
* remove `module` option, use `modules` option instead
|
||||
* remove `camelcase` option, use `camelCase` option instead
|
||||
* remove `root` option, use [`postcss-loader`](https://github.com/postcss/postcss-loader) with [`postcss-url`](https://github.com/postcss/postcss-url) plugin
|
||||
* remove `alias` option, use [`resolve.alias`](https://webpack.js.org/configuration/resolve/) feature or use [`postcss-loader`](https://github.com/postcss/postcss-loader) with [`postcss-url`](https://github.com/postcss/postcss-url) plugin
|
||||
* update `postcss` to `6` version
|
||||
* minimum require `nodejs` version is `6.9`
|
||||
* minimum require `webpack` version is `4`
|
||||
|
||||
|
||||
|
||||
<a name="0.28.11"></a>
|
||||
## [0.28.11](https://github.com/webpack-contrib/css-loader/compare/v0.28.10...v0.28.11) (2018-03-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **lib/processCss:** don't check `mode` for `url` handling (`options.modules`) ([#698](https://github.com/webpack-contrib/css-loader/issues/698)) ([c788450](https://github.com/webpack-contrib/css-loader/commit/c788450))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.10"></a>
|
||||
## [0.28.10](https://github.com/webpack-contrib/css-loader/compare/v0.28.9...v0.28.10) (2018-02-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **getLocalIdent:** add `rootContext` support (`webpack >= v4.0.0`) ([#681](https://github.com/webpack-contrib/css-loader/issues/681)) ([9f876d2](https://github.com/webpack-contrib/css-loader/commit/9f876d2))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.9"></a>
|
||||
## [0.28.9](https://github.com/webpack-contrib/css-loader/compare/v0.28.8...v0.28.9) (2018-01-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* ignore invalid URLs (`url()`) ([#663](https://github.com/webpack-contrib/css-loader/issues/663)) ([d1d8221](https://github.com/webpack-contrib/css-loader/commit/d1d8221))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.8"></a>
|
||||
## [0.28.8](https://github.com/webpack-contrib/css-loader/compare/v0.28.7...v0.28.8) (2018-01-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **loader:** correctly check if source map is `undefined` ([#641](https://github.com/webpack-contrib/css-loader/issues/641)) ([0dccfa9](https://github.com/webpack-contrib/css-loader/commit/0dccfa9))
|
||||
* proper URL escaping and wrapping (`url()`) ([#627](https://github.com/webpack-contrib/css-loader/issues/627)) ([8897d44](https://github.com/webpack-contrib/css-loader/commit/8897d44))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.7"></a>
|
||||
## [0.28.7](https://github.com/webpack/css-loader/compare/v0.28.6...v0.28.7) (2017-08-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* pass resolver to `localsLoader` (`options.alias`) ([#601](https://github.com/webpack/css-loader/issues/601)) ([8f1b57c](https://github.com/webpack/css-loader/commit/8f1b57c))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.6"></a>
|
||||
## [0.28.6](https://github.com/webpack/css-loader/compare/v0.28.5...v0.28.6) (2017-08-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add support for aliases starting with `/` (`options.alias`) ([#597](https://github.com/webpack/css-loader/issues/597)) ([63567f2](https://github.com/webpack/css-loader/commit/63567f2))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.5"></a>
|
||||
## [0.28.5](https://github.com/webpack/css-loader/compare/v0.28.4...v0.28.5) (2017-08-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* match mutliple dashes (`options.camelCase`) ([#556](https://github.com/webpack/css-loader/issues/556)) ([1fee601](https://github.com/webpack/css-loader/commit/1fee601))
|
||||
* stricter `[@import](https://github.com/import)` tolerance ([#593](https://github.com/webpack/css-loader/issues/593)) ([2e4ec09](https://github.com/webpack/css-loader/commit/2e4ec09))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.4"></a>
|
||||
## [0.28.4](https://github.com/webpack/css-loader/compare/v0.28.3...v0.28.4) (2017-05-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* preserve leading underscore in class names ([#543](https://github.com/webpack/css-loader/issues/543)) ([f6673c8](https://github.com/webpack/css-loader/commit/f6673c8))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.3"></a>
|
||||
## [0.28.3](https://github.com/webpack/css-loader/compare/v0.28.2...v0.28.3) (2017-05-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* correct plugin order for CSS Modules ([#534](https://github.com/webpack/css-loader/issues/534)) ([b90f492](https://github.com/webpack/css-loader/commit/b90f492))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.2"></a>
|
||||
## [0.28.2](https://github.com/webpack/css-loader/compare/v0.28.1...v0.28.2) (2017-05-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* source maps path on `windows` ([#532](https://github.com/webpack/css-loader/issues/532)) ([c3d0d91](https://github.com/webpack/css-loader/commit/c3d0d91))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.1"></a>
|
||||
## [0.28.1](https://github.com/webpack/css-loader/compare/v0.28.0...v0.28.1) (2017-05-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* allow to specify a full hostname as a root URL ([#521](https://github.com/webpack/css-loader/issues/521)) ([06d27a1](https://github.com/webpack/css-loader/commit/06d27a1))
|
||||
* case insensitivity of [@import](https://github.com/import) ([#514](https://github.com/webpack/css-loader/issues/514)) ([de4356b](https://github.com/webpack/css-loader/commit/de4356b))
|
||||
* don't handle empty [@import](https://github.com/import) and url() ([#513](https://github.com/webpack/css-loader/issues/513)) ([868fc94](https://github.com/webpack/css-loader/commit/868fc94))
|
||||
* imported variables are replaced in exports if followed by a comma ([#504](https://github.com/webpack/css-loader/issues/504)) ([956bad7](https://github.com/webpack/css-loader/commit/956bad7))
|
||||
* loader now correctly handles `url` with space(s) ([#495](https://github.com/webpack/css-loader/issues/495)) ([534ea55](https://github.com/webpack/css-loader/commit/534ea55))
|
||||
* url with a trailing space is now handled correctly ([#494](https://github.com/webpack/css-loader/issues/494)) ([e1ec4f2](https://github.com/webpack/css-loader/commit/e1ec4f2))
|
||||
* use `btoa` instead `Buffer` ([#501](https://github.com/webpack/css-loader/issues/501)) ([fbb0714](https://github.com/webpack/css-loader/commit/fbb0714))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* generate source maps only when explicitly set ([#478](https://github.com/webpack/css-loader/issues/478)) ([b8f5c8f](https://github.com/webpack/css-loader/commit/b8f5c8f))
|
||||
|
||||
|
||||
|
||||
<a name="0.28.0"></a>
|
||||
# [0.28.0](https://github.com/webpack/css-loader/compare/v0.27.3...v0.28.0) (2017-03-30)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add alias feature to rewrite URLs ([#274](https://github.com/webpack/css-loader/issues/274)) ([c8db489](https://github.com/webpack/css-loader/commit/c8db489))
|
||||
|
||||
|
||||
|
||||
<a name="0.27.3"></a>
|
||||
## [0.27.3](https://github.com/webpack/css-loader/compare/v0.27.2...v0.27.3) (2017-03-13)
|
||||
|
||||
|
||||
|
||||
<a name="0.27.2"></a>
|
||||
# [0.27.2](https://github.com/webpack/css-loader/compare/v0.27.1...v0.27.2) (2017-03-12)
|
||||
|
||||
<a name="0.27.1"></a>
|
||||
# [0.27.1](https://github.com/webpack/css-loader/compare/v0.27.0...v0.27.1) (2017-03-10)
|
||||
|
||||
<a name="0.27.0"></a>
|
||||
# [0.27.0](https://github.com/webpack/css-loader/compare/v0.26.2...v0.27.0) (2017-03-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **sourcemaps:** use abs paths & remove sourceRoot ([c769ac3](https://github.com/webpack/css-loader/commit/c769ac3))
|
||||
* `minimizeOptions` should be `query.minimize`! ([16c0858](https://github.com/webpack/css-loader/commit/16c0858))
|
||||
* do not export duplicate keys ([#420](https://github.com/webpack/css-loader/issues/420)) ([a2b85d7](https://github.com/webpack/css-loader/commit/a2b85d7))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* allow removal of original class name ([#445](https://github.com/webpack/css-loader/issues/445)) ([3f78361](https://github.com/webpack/css-loader/commit/3f78361))
|
||||
* Include the sourceMappingURL & sourceURL when toString() ([6da7e90](https://github.com/webpack/css-loader/commit/6da7e90))
|
||||
+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.
|
||||
+989
@@ -0,0 +1,989 @@
|
||||
<div align="center">
|
||||
<img width="180" height="180" vspace="20"
|
||||
src="https://cdn.worldvectorlogo.com/logos/css-3.svg">
|
||||
<a href="https://github.com/webpack/webpack">
|
||||
<img width="200" height="200"
|
||||
src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
</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]
|
||||
|
||||
# css-loader
|
||||
|
||||
The `css-loader` interprets `@import` and `url()` like `import/require()` and will resolve them.
|
||||
|
||||
## Getting Started
|
||||
|
||||
To begin, you'll need to install `css-loader`:
|
||||
|
||||
```console
|
||||
npm install --save-dev css-loader
|
||||
```
|
||||
|
||||
Then add the plugin to your `webpack` config. For example:
|
||||
|
||||
**file.js**
|
||||
|
||||
```js
|
||||
import css from 'file.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Good loaders for requiring your assets are the [file-loader](https://github.com/webpack/file-loader) and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see [below](https://github.com/webpack-contrib/css-loader#assets)).
|
||||
|
||||
And run `webpack` via your preferred method.
|
||||
|
||||
### `toString`
|
||||
|
||||
You can also use the css-loader results directly as a string, such as in Angular's component style.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['to-string-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```js
|
||||
const css = require('./test.css').toString();
|
||||
|
||||
console.log(css); // {String}
|
||||
```
|
||||
|
||||
If there are SourceMaps, they will also be included in the result string.
|
||||
|
||||
If, for one reason or another, you need to extract CSS as a
|
||||
plain string resource (i.e. not wrapped in a JS module) you
|
||||
might want to check out the [extract-loader](https://github.com/peerigon/extract-loader).
|
||||
It's useful when you, for instance, need to post process the CSS as a string.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
'handlebars-loader', // handlebars loader expects raw resource string
|
||||
'extract-loader',
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| :-----------------------------------------: | :-------------------------: | :------: | :--------------------------------------------------------------------- |
|
||||
| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enables/Disables `url`/`image-set` functions handling |
|
||||
| **[`import`](#import)** | `{Boolean\|Function}` | `true` | Enables/Disables `@import` at-rules handling |
|
||||
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `false` | Enables/Disables CSS Modules and their configuration |
|
||||
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `false` | Enables/Disables generation of source maps |
|
||||
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Enables/Disables or setups number of loaders applied before CSS loader |
|
||||
| **[`localsConvention`](#localsconvention)** | `{String}` | `'asIs'` | Style of exported classnames |
|
||||
| **[`onlyLocals`](#onlylocals)** | `{Boolean}` | `false` | Export only locals |
|
||||
| **[`esModule`](#esmodule)** | `{Boolean}` | `false` | Use ES modules syntax |
|
||||
|
||||
### `url`
|
||||
|
||||
Type: `Boolean|Function`
|
||||
Default: `true`
|
||||
|
||||
Enables/Disables `url`/`image-set` functions handling.
|
||||
Control `url()` resolving. Absolute URLs and root-relative URLs are not resolving.
|
||||
|
||||
Examples resolutions:
|
||||
|
||||
```
|
||||
url(image.png) => require('./image.png')
|
||||
url('image.png') => require('./image.png')
|
||||
url(./image.png) => require('./image.png')
|
||||
url('./image.png') => require('./image.png')
|
||||
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
|
||||
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')
|
||||
```
|
||||
|
||||
To import assets from a `node_modules` path (include `resolve.modules`) and for `alias`, prefix it with a `~`:
|
||||
|
||||
```
|
||||
url(~module/image.png) => require('module/image.png')
|
||||
url('~module/image.png') => require('module/image.png')
|
||||
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
|
||||
```
|
||||
|
||||
#### `Boolean`
|
||||
|
||||
Enable/disable `url()` resolving.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
url: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `Function`
|
||||
|
||||
Allow to filter `url()`. All filtered `url()` will not be resolved (left in the code as they were written).
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
url: (url, resourcePath) => {
|
||||
// resourcePath - path to css file
|
||||
|
||||
// Don't handle `img.png` urls
|
||||
if (url.includes('img.png')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `import`
|
||||
|
||||
Type: `Boolean|Function`
|
||||
Default: `true`
|
||||
|
||||
Enables/Disables `@import` at-rules handling.
|
||||
Control `@import` resolving. Absolute urls in `@import` will be moved in runtime code.
|
||||
|
||||
Examples resolutions:
|
||||
|
||||
```
|
||||
@import 'style.css' => require('./style.css')
|
||||
@import url(style.css) => require('./style.css')
|
||||
@import url('style.css') => require('./style.css')
|
||||
@import './style.css' => require('./style.css')
|
||||
@import url(./style.css) => require('./style.css')
|
||||
@import url('./style.css') => require('./style.css')
|
||||
@import url('http://dontwritehorriblecode.com/style.css') => @import url('http://dontwritehorriblecode.com/style.css') in runtime
|
||||
```
|
||||
|
||||
To import styles from a `node_modules` path (include `resolve.modules`) and for `alias`, prefix it with a `~`:
|
||||
|
||||
```
|
||||
@import url(~module/style.css) => require('module/style.css')
|
||||
@import url('~module/style.css') => require('module/style.css')
|
||||
@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')
|
||||
```
|
||||
|
||||
#### `Boolean`
|
||||
|
||||
Enable/disable `@import` resolving.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
import: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `Function`
|
||||
|
||||
Allow to filter `@import`. All filtered `@import` will not be resolved (left in the code as they were written).
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
import: (parsedImport, resourcePath) => {
|
||||
// parsedImport.url - url of `@import`
|
||||
// parsedImport.media - media query of `@import`
|
||||
// resourcePath - path to css file
|
||||
|
||||
// Don't handle `style.css` import
|
||||
if (parsedImport.url.includes('style.css')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `modules`
|
||||
|
||||
Type: `Boolean|String|Object`
|
||||
Default: `false`
|
||||
|
||||
Enables/Disables CSS Modules and their configuration.
|
||||
|
||||
The `modules` option enables/disables the **[CSS Modules](https://github.com/css-modules/css-modules)** specification and setup basic behaviour.
|
||||
|
||||
Using `false` value increase performance because we avoid parsing **CSS Modules** features, it will be useful for developers who use vanilla css or use other technologies.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `Features`
|
||||
|
||||
##### `Scope`
|
||||
|
||||
Using `local` value requires you to specify `:global` classes.
|
||||
Using `global` value requires you to specify `:local` classes.
|
||||
Using `pure` value requires selectors must contain at least one local class or id.
|
||||
|
||||
You can find more information [here](https://github.com/css-modules/css-modules).
|
||||
|
||||
Styles can be locally scoped to avoid globally scoping styles.
|
||||
|
||||
The syntax `:local(.className)` can be used to declare `className` in the local scope. The local identifiers are exported by the module.
|
||||
|
||||
With `:local` (without brackets) local mode can be switched on for this selector.
|
||||
The `:global(.className)` notation can be used to declare an explicit global selector.
|
||||
With `:global` (without brackets) global mode can be switched on for this selector.
|
||||
|
||||
The loader replaces local selectors with unique identifiers. The chosen unique identifiers are exported by the module.
|
||||
|
||||
```css
|
||||
:local(.className) {
|
||||
background: red;
|
||||
}
|
||||
:local .className {
|
||||
color: green;
|
||||
}
|
||||
:local(.className .subClass) {
|
||||
color: green;
|
||||
}
|
||||
:local .className .subClass :global(.global-class-name) {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
._23_aKvs-b8bW2Vg3fwHozO {
|
||||
background: red;
|
||||
}
|
||||
._23_aKvs-b8bW2Vg3fwHozO {
|
||||
color: green;
|
||||
}
|
||||
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 {
|
||||
color: green;
|
||||
}
|
||||
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
> ℹ️ Identifiers are exported
|
||||
|
||||
```js
|
||||
exports.locals = {
|
||||
className: '_23_aKvs-b8bW2Vg3fwHozO',
|
||||
subClass: '_13LGdX8RMStbBE9w-t0gZ1',
|
||||
};
|
||||
```
|
||||
|
||||
CamelCase is recommended for local selectors. They are easier to use within the imported JS module.
|
||||
|
||||
You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
|
||||
|
||||
##### `Composing`
|
||||
|
||||
When declaring a local classname you can compose a local class from another local classname.
|
||||
|
||||
```css
|
||||
:local(.className) {
|
||||
background: red;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
:local(.subClass) {
|
||||
composes: className;
|
||||
background: blue;
|
||||
}
|
||||
```
|
||||
|
||||
This doesn't result in any change to the CSS itself but exports multiple classnames.
|
||||
|
||||
```js
|
||||
exports.locals = {
|
||||
className: '_23_aKvs-b8bW2Vg3fwHozO',
|
||||
subClass: '_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO',
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
._23_aKvs-b8bW2Vg3fwHozO {
|
||||
background: red;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
._13LGdX8RMStbBE9w-t0gZ1 {
|
||||
background: blue;
|
||||
}
|
||||
```
|
||||
|
||||
##### `Importing`
|
||||
|
||||
To import a local classname from another module.
|
||||
|
||||
```css
|
||||
:local(.continueButton) {
|
||||
composes: button from 'library/button.css';
|
||||
background: red;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:local(.nameEdit) {
|
||||
composes: edit highlight from './edit.css';
|
||||
background: red;
|
||||
}
|
||||
```
|
||||
|
||||
To import from multiple modules use multiple `composes:` rules.
|
||||
|
||||
```css
|
||||
:local(.className) {
|
||||
composes: edit hightlight from './edit.css';
|
||||
composes: button from 'module/button.css';
|
||||
composes: classFromThisModule;
|
||||
background: red;
|
||||
}
|
||||
```
|
||||
|
||||
##### `Values`
|
||||
|
||||
You can use `@value` to specific values to be reused throughout a document.
|
||||
|
||||
We recommend use prefix `v-` for values, `s-` for selectors and `m-` for media at-rules.
|
||||
|
||||
```css
|
||||
@value v-primary: #BF4040;
|
||||
@value s-black: black-selector;
|
||||
@value m-large: (min-width: 960px);
|
||||
|
||||
.header {
|
||||
color: v-primary;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.s-black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media m-large {
|
||||
.header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### `Boolean`
|
||||
|
||||
Enable **CSS Modules** features.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `String`
|
||||
|
||||
Enable **CSS Modules** features and setup `mode`.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
// Using `local` value has same effect like using `modules: true`
|
||||
modules: 'global',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `Object`
|
||||
|
||||
Enable **CSS Modules** features and setup options for them.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
mode: 'local',
|
||||
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
||||
context: path.resolve(__dirname, 'src'),
|
||||
hashPrefix: 'my-custom-hash',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### `mode`
|
||||
|
||||
Type: `String`
|
||||
Default: `'local'`
|
||||
|
||||
Setup `mode` option. You can omit the value when you want `local` mode.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
mode: 'global',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### `localIdentName`
|
||||
|
||||
Type: `String`
|
||||
Default: `'[hash:base64]'`
|
||||
|
||||
You can configure the generated ident with the `localIdentName` query parameter.
|
||||
See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options.
|
||||
|
||||
Recommendations:
|
||||
|
||||
- use `'[path][name]__[local]'` for development
|
||||
- use `'[hash:base64]'` for production
|
||||
|
||||
The `[local]` placeholder contains original class.
|
||||
|
||||
**Note:** all reserved (`<>:"/\|?*`) and control filesystem characters (excluding characters in the `[local]` placeholder) will be converted to `-`.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### `context`
|
||||
|
||||
Type: `String`
|
||||
Default: `undefined`
|
||||
|
||||
Allow to redefine basic loader context for local ident name.
|
||||
By default we use `rootContext` of loader.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
context: path.resolve(__dirname, 'context'),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### `hashPrefix`
|
||||
|
||||
Type: `String`
|
||||
Default: `undefined`
|
||||
|
||||
Allow to add custom hash to generate more unique classes.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
hashPrefix: 'hash',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### `getLocalIdent`
|
||||
|
||||
Type: `Function`
|
||||
Default: `undefined`
|
||||
|
||||
You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema.
|
||||
By default we use built-in function to generate a classname.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
getLocalIdent: (context, localIdentName, localName, options) => {
|
||||
return 'whatever_random_class_name';
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### `localIdentRegExp`
|
||||
|
||||
Type: `String|RegExp`
|
||||
Default: `undefined`
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
localIdentRegExp: /page-(.*)\.css/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `sourceMap`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `false`
|
||||
|
||||
Enables/Disables generation of source maps.
|
||||
|
||||
To include source maps set the `sourceMap` option.
|
||||
|
||||
They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not).
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `importLoaders`
|
||||
|
||||
Type: `Number`
|
||||
Default: `0`
|
||||
|
||||
Enables/Disables or setups number of loaders applied before CSS loader.
|
||||
|
||||
The option `importLoaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 2,
|
||||
// 0 => no loaders (default);
|
||||
// 1 => postcss-loader;
|
||||
// 2 => postcss-loader, sass-loader
|
||||
},
|
||||
},
|
||||
'postcss-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
|
||||
|
||||
### `localsConvention`
|
||||
|
||||
Type: `String`
|
||||
Default: `'asIs'`
|
||||
|
||||
Style of exported classnames.
|
||||
|
||||
By default, the exported JSON keys mirror the class names (i.e `asIs` value).
|
||||
|
||||
| Name | Type | Description |
|
||||
| :-------------------: | :--------: | :----------------------------------------------------------------------------------------------- |
|
||||
| **`'asIs'`** | `{String}` | Class names will be exported as is. |
|
||||
| **`'camelCase'`** | `{String}` | Class names will be camelized, the original class name will not to be removed from the locals |
|
||||
| **`'camelCaseOnly'`** | `{String}` | Class names will be camelized, the original class name will be removed from the locals |
|
||||
| **`'dashes'`** | `{String}` | Only dashes in class names will be camelized |
|
||||
| **`'dashesOnly'`** | `{String}` | Dashes in class names will be camelized, the original class name will be removed from the locals |
|
||||
|
||||
**file.css**
|
||||
|
||||
```css
|
||||
.class-name {
|
||||
}
|
||||
```
|
||||
|
||||
**file.js**
|
||||
|
||||
```js
|
||||
import { className } from 'file.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
localsConvention: 'camelCase',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `onlyLocals`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `false`
|
||||
|
||||
Export only locals.
|
||||
|
||||
**Useful** when you use **css modules** for pre-rendering (for example SSR).
|
||||
For pre-rendering with `mini-css-extract-plugin` you should use this option instead of `style-loader!css-loader` **in the pre-rendering bundle**.
|
||||
It doesn't embed CSS but only exports the identifier mappings.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
onlyLocals: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `esModule`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `false`
|
||||
|
||||
By default, `css-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
|
||||
|
||||
### Assets
|
||||
|
||||
The following `webpack.config.js` can load CSS files, embed small PNG/JPG/GIF/SVG images as well as fonts as [Data URLs](https://tools.ietf.org/html/rfc2397) and copy larger files to the output directory.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 8192,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Extract
|
||||
|
||||
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) to extract the CSS when running in production mode.
|
||||
|
||||
- As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
|
||||
|
||||
### CSS modules and pure CSS
|
||||
|
||||
When you have pure CSS (without CSS modules) and CSS modules in project you can use this setup:
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
// For pure CSS (without CSS modules)
|
||||
test: /\.css$/i,
|
||||
exclude: /\.module\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
// For CSS modules
|
||||
test: /\.module\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 8192,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 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/css-loader.svg
|
||||
[npm-url]: https://npmjs.com/package/css-loader
|
||||
[node]: https://img.shields.io/node/v/css-loader.svg
|
||||
[node-url]: https://nodejs.org
|
||||
[deps]: https://david-dm.org/webpack-contrib/css-loader.svg
|
||||
[deps-url]: https://david-dm.org/webpack-contrib/css-loader
|
||||
[tests]: https://dev.azure.com/webpack-contrib/css-loader/_apis/build/status/webpack-contrib.css-loader?branchName=master
|
||||
[tests-url]: https://dev.azure.com/webpack-contrib/css-loader/_build/latest?definitionId=2&branchName=master
|
||||
[cover]: https://codecov.io/gh/webpack-contrib/css-loader/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack-contrib/css-loader
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
[size]: https://packagephobia.now.sh/badge?p=css-loader
|
||||
[size-url]: https://packagephobia.now.sh/result?p=css-loader
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
class CssSyntaxError extends Error {
|
||||
constructor(error) {
|
||||
super(error);
|
||||
const {
|
||||
reason,
|
||||
line,
|
||||
column
|
||||
} = error;
|
||||
this.name = 'CssSyntaxError'; // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132
|
||||
// We don't need `plugin` and `file` properties.
|
||||
|
||||
this.message = `${this.name}\n\n`;
|
||||
|
||||
if (typeof line !== 'undefined') {
|
||||
this.message += `(${line}:${column}) `;
|
||||
}
|
||||
|
||||
this.message += `${reason}`;
|
||||
const code = error.showSourceCode();
|
||||
|
||||
if (code) {
|
||||
this.message += `\n\n${code}\n`;
|
||||
} // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
|
||||
|
||||
|
||||
this.stack = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.default = CssSyntaxError;
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
class Warning extends Error {
|
||||
constructor(warning) {
|
||||
super(warning);
|
||||
const {
|
||||
text,
|
||||
line,
|
||||
column
|
||||
} = warning;
|
||||
this.name = 'Warning'; // Based on https://github.com/postcss/postcss/blob/master/lib/warning.es6#L74
|
||||
// We don't need `plugin` properties.
|
||||
|
||||
this.message = `${this.name}\n\n`;
|
||||
|
||||
if (typeof line !== 'undefined') {
|
||||
this.message += `(${line}:${column}) `;
|
||||
}
|
||||
|
||||
this.message += `${text}`; // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
|
||||
|
||||
this.stack = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.default = Warning;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
"use strict";
|
||||
|
||||
const loader = require('./index');
|
||||
|
||||
module.exports = loader.default;
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = loader;
|
||||
|
||||
var _schemaUtils = _interopRequireDefault(require("schema-utils"));
|
||||
|
||||
var _postcss = _interopRequireDefault(require("postcss"));
|
||||
|
||||
var _package = _interopRequireDefault(require("postcss/package.json"));
|
||||
|
||||
var _loaderUtils = require("loader-utils");
|
||||
|
||||
var _options = _interopRequireDefault(require("./options.json"));
|
||||
|
||||
var _plugins = require("./plugins");
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
||||
var _Warning = _interopRequireDefault(require("./Warning"));
|
||||
|
||||
var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
function loader(content, map, meta) {
|
||||
const options = (0, _loaderUtils.getOptions)(this) || {};
|
||||
(0, _schemaUtils.default)(_options.default, options, {
|
||||
name: 'CSS Loader',
|
||||
baseDataPath: 'options'
|
||||
});
|
||||
const callback = this.async();
|
||||
const sourceMap = options.sourceMap || false;
|
||||
const plugins = [];
|
||||
|
||||
if (options.modules) {
|
||||
plugins.push(...(0, _utils.getModulesPlugins)(options, this));
|
||||
}
|
||||
|
||||
const exportType = options.onlyLocals ? 'locals' : 'full';
|
||||
plugins.push((0, _plugins.icssParser)());
|
||||
|
||||
if (options.import !== false && exportType === 'full') {
|
||||
plugins.push((0, _plugins.importParser)({
|
||||
filter: (0, _utils.getFilter)(options.import, this.resourcePath)
|
||||
}));
|
||||
}
|
||||
|
||||
if (options.url !== false && exportType === 'full') {
|
||||
plugins.push((0, _plugins.urlParser)({
|
||||
filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value))
|
||||
}));
|
||||
} // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
|
||||
|
||||
|
||||
if (meta) {
|
||||
const {
|
||||
ast
|
||||
} = meta;
|
||||
|
||||
if (ast && ast.type === 'postcss' && ast.version === _package.default.version) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
content = ast.root;
|
||||
}
|
||||
}
|
||||
|
||||
(0, _postcss.default)(plugins).process(content, {
|
||||
from: this.remainingRequest.split('!').pop(),
|
||||
to: this.currentRequest.split('!').pop(),
|
||||
map: options.sourceMap ? {
|
||||
// Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
|
||||
prev: sourceMap && map ? (0, _utils.normalizeSourceMap)(map) : null,
|
||||
inline: false,
|
||||
annotation: false
|
||||
} : false
|
||||
}).then(result => {
|
||||
result.warnings().forEach(warning => this.emitWarning(new _Warning.default(warning)));
|
||||
const imports = [];
|
||||
const exports = [];
|
||||
const replacers = [];
|
||||
|
||||
for (const message of result.messages) {
|
||||
// eslint-disable-next-line default-case
|
||||
switch (message.type) {
|
||||
case 'import':
|
||||
imports.push(message.value);
|
||||
break;
|
||||
|
||||
case 'export':
|
||||
exports.push(message.value);
|
||||
break;
|
||||
|
||||
case 'replacer':
|
||||
replacers.push(message.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
importLoaders,
|
||||
localsConvention
|
||||
} = options;
|
||||
const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
|
||||
const importCode = (0, _utils.getImportCode)(this, imports, exportType, sourceMap, importLoaders, esModule);
|
||||
const moduleCode = (0, _utils.getModuleCode)(this, result, exportType, sourceMap, replacers);
|
||||
const exportCode = (0, _utils.getExportCode)(this, exports, exportType, replacers, localsConvention, esModule);
|
||||
return callback(null, [importCode, moduleCode, exportCode].join(''));
|
||||
}).catch(error => {
|
||||
callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);
|
||||
});
|
||||
}
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"url": {
|
||||
"description": "Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"import": {
|
||||
"description": "Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"modules": {
|
||||
"description": "Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"enum": ["local", "global", "pure"]
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"mode": {
|
||||
"enum": ["local", "global", "pure"]
|
||||
},
|
||||
"localIdentName": {
|
||||
"type": "string"
|
||||
},
|
||||
"localIdentRegExp": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "RegExp"
|
||||
}
|
||||
]
|
||||
},
|
||||
"context": {
|
||||
"type": "string"
|
||||
},
|
||||
"hashPrefix": {
|
||||
"type": "string"
|
||||
},
|
||||
"getLocalIdent": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceMap": {
|
||||
"description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
|
||||
"type": "boolean"
|
||||
},
|
||||
"importLoaders": {
|
||||
"description": "Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"type": "number"
|
||||
}
|
||||
]
|
||||
},
|
||||
"localsConvention": {
|
||||
"description": "Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention).",
|
||||
"enum": ["asIs", "camelCase", "camelCaseOnly", "dashes", "dashesOnly"]
|
||||
},
|
||||
"onlyLocals": {
|
||||
"description": "Export only locals (https://github.com/webpack-contrib/css-loader#onlylocals).",
|
||||
"type": "boolean"
|
||||
},
|
||||
"esModule": {
|
||||
"description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"type": "object"
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "importParser", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _postcssImportParser.default;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(exports, "icssParser", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _postcssIcssParser.default;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(exports, "urlParser", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _postcssUrlParser.default;
|
||||
}
|
||||
});
|
||||
|
||||
var _postcssImportParser = _interopRequireDefault(require("./postcss-import-parser"));
|
||||
|
||||
var _postcssIcssParser = _interopRequireDefault(require("./postcss-icss-parser"));
|
||||
|
||||
var _postcssUrlParser = _interopRequireDefault(require("./postcss-url-parser"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _postcss = _interopRequireDefault(require("postcss"));
|
||||
|
||||
var _icssUtils = require("icss-utils");
|
||||
|
||||
var _loaderUtils = require("loader-utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
const pluginName = 'postcss-icss-parser';
|
||||
|
||||
function normalizeIcssImports(icssImports) {
|
||||
return Object.keys(icssImports).reduce((accumulator, url) => {
|
||||
const tokensMap = icssImports[url];
|
||||
const tokens = Object.keys(tokensMap);
|
||||
|
||||
if (tokens.length === 0) {
|
||||
return accumulator;
|
||||
}
|
||||
|
||||
const normalizedUrl = (0, _loaderUtils.urlToRequest)(url);
|
||||
|
||||
if (!accumulator[normalizedUrl]) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
accumulator[normalizedUrl] = tokensMap;
|
||||
} else {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],
|
||||
...tokensMap
|
||||
};
|
||||
}
|
||||
|
||||
return accumulator;
|
||||
}, {});
|
||||
}
|
||||
|
||||
var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {
|
||||
const importReplacements = Object.create(null);
|
||||
const {
|
||||
icssImports,
|
||||
icssExports
|
||||
} = (0, _icssUtils.extractICSS)(css);
|
||||
const normalizedIcssImports = normalizeIcssImports(icssImports);
|
||||
Object.keys(normalizedIcssImports).forEach((url, importIndex) => {
|
||||
const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
|
||||
result.messages.push({
|
||||
pluginName,
|
||||
type: 'import',
|
||||
value: {
|
||||
type: 'icss-import',
|
||||
importName,
|
||||
url
|
||||
}
|
||||
});
|
||||
const tokenMap = normalizedIcssImports[url];
|
||||
const tokens = Object.keys(tokenMap);
|
||||
tokens.forEach((token, replacementIndex) => {
|
||||
const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
|
||||
const localName = tokenMap[token];
|
||||
importReplacements[token] = replacementName;
|
||||
result.messages.push({
|
||||
pluginName,
|
||||
type: 'replacer',
|
||||
value: {
|
||||
type: 'icss-import',
|
||||
importName,
|
||||
replacementName,
|
||||
localName
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (Object.keys(importReplacements).length > 0) {
|
||||
(0, _icssUtils.replaceSymbols)(css, importReplacements);
|
||||
}
|
||||
|
||||
Object.keys(icssExports).forEach(name => {
|
||||
const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
|
||||
result.messages.push({
|
||||
pluginName,
|
||||
type: 'export',
|
||||
value: {
|
||||
name,
|
||||
value
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
exports.default = _default;
|
||||
+133
@@ -0,0 +1,133 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _postcss = _interopRequireDefault(require("postcss"));
|
||||
|
||||
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
|
||||
|
||||
var _loaderUtils = require("loader-utils");
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
const pluginName = 'postcss-import-parser';
|
||||
|
||||
function getParsedValue(node) {
|
||||
if (node.type === 'function' && node.value.toLowerCase() === 'url') {
|
||||
const {
|
||||
nodes
|
||||
} = node;
|
||||
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
|
||||
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
|
||||
return {
|
||||
url,
|
||||
isStringValue
|
||||
};
|
||||
}
|
||||
|
||||
if (node.type === 'string') {
|
||||
const url = node.value;
|
||||
return {
|
||||
url,
|
||||
isStringValue: true
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseImport(params) {
|
||||
const {
|
||||
nodes
|
||||
} = (0, _postcssValueParser.default)(params);
|
||||
|
||||
if (nodes.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value = getParsedValue(nodes[0]);
|
||||
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let {
|
||||
url
|
||||
} = value;
|
||||
|
||||
if (url.trim().length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ((0, _loaderUtils.isUrlRequest)(url)) {
|
||||
const {
|
||||
isStringValue
|
||||
} = value;
|
||||
url = (0, _utils.normalizeUrl)(url, isStringValue);
|
||||
}
|
||||
|
||||
return {
|
||||
url,
|
||||
media: _postcssValueParser.default.stringify(nodes.slice(1)).trim().toLowerCase()
|
||||
};
|
||||
}
|
||||
|
||||
function walkAtRules(css, result, filter) {
|
||||
const items = [];
|
||||
css.walkAtRules(/^import$/i, atRule => {
|
||||
// Convert only top-level @import
|
||||
if (atRule.parent.type !== 'root') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (atRule.nodes) {
|
||||
result.warn("It looks like you didn't end your @import statement correctly. " + 'Child nodes are attached to it.', {
|
||||
node: atRule
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const parsed = parseImport(atRule.params);
|
||||
|
||||
if (!parsed) {
|
||||
// eslint-disable-next-line consistent-return
|
||||
return result.warn(`Unable to find uri in '${atRule.toString()}'`, {
|
||||
node: atRule
|
||||
});
|
||||
}
|
||||
|
||||
if (filter && !filter(parsed)) {
|
||||
return;
|
||||
}
|
||||
|
||||
atRule.remove();
|
||||
items.push(parsed);
|
||||
});
|
||||
return items;
|
||||
}
|
||||
|
||||
var _default = _postcss.default.plugin(pluginName, options => function process(css, result) {
|
||||
const items = walkAtRules(css, result, options.filter);
|
||||
items.forEach(item => {
|
||||
const {
|
||||
url,
|
||||
media
|
||||
} = item;
|
||||
result.messages.push({
|
||||
pluginName,
|
||||
type: 'import',
|
||||
value: {
|
||||
type: '@import',
|
||||
url,
|
||||
media
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
exports.default = _default;
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _postcss = _interopRequireDefault(require("postcss"));
|
||||
|
||||
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
const pluginName = 'postcss-url-parser';
|
||||
const isUrlFunc = /url/i;
|
||||
const isImageSetFunc = /^(?:-webkit-)?image-set$/i;
|
||||
const needParseDecl = /(?:url|(?:-webkit-)?image-set)\(/i;
|
||||
|
||||
function getNodeFromUrlFunc(node) {
|
||||
return node.nodes && node.nodes[0];
|
||||
}
|
||||
|
||||
function walkUrls(parsed, callback) {
|
||||
parsed.walk(node => {
|
||||
if (node.type !== 'function') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isUrlFunc.test(node.value)) {
|
||||
const {
|
||||
nodes
|
||||
} = node;
|
||||
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
|
||||
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
|
||||
callback(getNodeFromUrlFunc(node), url, false, isStringValue); // Do not traverse inside `url`
|
||||
// eslint-disable-next-line consistent-return
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isImageSetFunc.test(node.value)) {
|
||||
node.nodes.forEach(nNode => {
|
||||
const {
|
||||
type,
|
||||
value
|
||||
} = nNode;
|
||||
|
||||
if (type === 'function' && isUrlFunc.test(value)) {
|
||||
const {
|
||||
nodes
|
||||
} = nNode;
|
||||
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
|
||||
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
|
||||
callback(getNodeFromUrlFunc(nNode), url, false, isStringValue);
|
||||
}
|
||||
|
||||
if (type === 'string') {
|
||||
callback(nNode, value, true, true);
|
||||
}
|
||||
}); // Do not traverse inside `image-set`
|
||||
// eslint-disable-next-line consistent-return
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getUrlsFromValue(value, result, filter, decl) {
|
||||
if (!needParseDecl.test(value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parsed = (0, _postcssValueParser.default)(value);
|
||||
const urls = [];
|
||||
walkUrls(parsed, (node, url, needQuotes, isStringValue) => {
|
||||
if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
|
||||
result.warn(`Unable to find uri in '${decl ? decl.toString() : value}'`, {
|
||||
node: decl
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (filter && !filter(url)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const splittedUrl = url.split(/(\?)?#/);
|
||||
const [urlWithoutHash, singleQuery, hashValue] = splittedUrl;
|
||||
const hash = singleQuery || hashValue ? `${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}` : '';
|
||||
const normalizedUrl = (0, _utils.normalizeUrl)(urlWithoutHash, isStringValue);
|
||||
urls.push({
|
||||
node,
|
||||
url: normalizedUrl,
|
||||
hash,
|
||||
needQuotes
|
||||
});
|
||||
}); // eslint-disable-next-line consistent-return
|
||||
|
||||
return {
|
||||
parsed,
|
||||
urls
|
||||
};
|
||||
}
|
||||
|
||||
function walkDecls(css, result, filter) {
|
||||
const items = [];
|
||||
css.walkDecls(decl => {
|
||||
const item = getUrlsFromValue(decl.value, result, filter, decl);
|
||||
|
||||
if (!item || item.urls.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.push({
|
||||
decl,
|
||||
parsed: item.parsed,
|
||||
urls: item.urls
|
||||
});
|
||||
});
|
||||
return items;
|
||||
}
|
||||
|
||||
function flatten(array) {
|
||||
return array.reduce((a, b) => a.concat(b), []);
|
||||
}
|
||||
|
||||
function collectUniqueUrlsWithNodes(array) {
|
||||
return array.reduce((accumulator, currentValue) => {
|
||||
const {
|
||||
url,
|
||||
needQuotes,
|
||||
hash,
|
||||
node
|
||||
} = currentValue;
|
||||
const found = accumulator.find(item => url === item.url && needQuotes === item.needQuotes && hash === item.hash);
|
||||
|
||||
if (!found) {
|
||||
accumulator.push({
|
||||
url,
|
||||
hash,
|
||||
needQuotes,
|
||||
nodes: [node]
|
||||
});
|
||||
} else {
|
||||
found.nodes.push(node);
|
||||
}
|
||||
|
||||
return accumulator;
|
||||
}, []);
|
||||
}
|
||||
|
||||
var _default = _postcss.default.plugin(pluginName, options => function process(css, result) {
|
||||
const traversed = walkDecls(css, result, options.filter);
|
||||
const flattenTraversed = flatten(traversed.map(item => item.urls));
|
||||
const urlsWithNodes = collectUniqueUrlsWithNodes(flattenTraversed);
|
||||
const replacers = new Map();
|
||||
urlsWithNodes.forEach((urlWithNodes, index) => {
|
||||
const {
|
||||
url,
|
||||
hash,
|
||||
needQuotes,
|
||||
nodes
|
||||
} = urlWithNodes;
|
||||
const replacementName = `___CSS_LOADER_URL_REPLACEMENT_${index}___`;
|
||||
result.messages.push({
|
||||
pluginName,
|
||||
type: 'import',
|
||||
value: {
|
||||
type: 'url',
|
||||
replacementName,
|
||||
url,
|
||||
needQuotes,
|
||||
hash
|
||||
}
|
||||
}, {
|
||||
pluginName,
|
||||
type: 'replacer',
|
||||
value: {
|
||||
type: 'url',
|
||||
replacementName
|
||||
}
|
||||
});
|
||||
nodes.forEach(node => {
|
||||
replacers.set(node, replacementName);
|
||||
});
|
||||
});
|
||||
traversed.forEach(item => {
|
||||
walkUrls(item.parsed, node => {
|
||||
const replacementName = replacers.get(node);
|
||||
|
||||
if (!replacementName) {
|
||||
return;
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
|
||||
node.type = 'word'; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
node.value = replacementName;
|
||||
}); // eslint-disable-next-line no-param-reassign
|
||||
|
||||
item.decl.value = item.parsed.toString();
|
||||
});
|
||||
});
|
||||
|
||||
exports.default = _default;
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
"use strict";
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
// css base code, injected by the css-loader
|
||||
// eslint-disable-next-line func-names
|
||||
module.exports = function (useSourceMap) {
|
||||
var list = []; // return the list of modules as css string
|
||||
|
||||
list.toString = function toString() {
|
||||
return this.map(function (item) {
|
||||
var content = cssWithMappingToString(item, useSourceMap);
|
||||
|
||||
if (item[2]) {
|
||||
return "@media ".concat(item[2], " {").concat(content, "}");
|
||||
}
|
||||
|
||||
return content;
|
||||
}).join('');
|
||||
}; // import a list of modules into the list
|
||||
// eslint-disable-next-line func-names
|
||||
|
||||
|
||||
list.i = function (modules, mediaQuery, dedupe) {
|
||||
if (typeof modules === 'string') {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
modules = [[null, modules, '']];
|
||||
}
|
||||
|
||||
var alreadyImportedModules = {};
|
||||
|
||||
if (dedupe) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
var id = this[i][0];
|
||||
|
||||
if (id != null) {
|
||||
alreadyImportedModules[id] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var _i = 0; _i < modules.length; _i++) {
|
||||
var item = [].concat(modules[_i]);
|
||||
|
||||
if (dedupe && alreadyImportedModules[item[0]]) {
|
||||
// eslint-disable-next-line no-continue
|
||||
continue;
|
||||
}
|
||||
|
||||
if (mediaQuery) {
|
||||
if (!item[2]) {
|
||||
item[2] = mediaQuery;
|
||||
} else {
|
||||
item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
|
||||
}
|
||||
}
|
||||
|
||||
list.push(item);
|
||||
}
|
||||
};
|
||||
|
||||
return list;
|
||||
};
|
||||
|
||||
function cssWithMappingToString(item, useSourceMap) {
|
||||
var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
|
||||
|
||||
var cssMapping = item[3];
|
||||
|
||||
if (!cssMapping) {
|
||||
return content;
|
||||
}
|
||||
|
||||
if (useSourceMap && typeof btoa === 'function') {
|
||||
var sourceMapping = toComment(cssMapping);
|
||||
var sourceURLs = cssMapping.sources.map(function (source) {
|
||||
return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */");
|
||||
});
|
||||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
||||
}
|
||||
|
||||
return [content].join('\n');
|
||||
} // Adapted from convert-source-map (MIT)
|
||||
|
||||
|
||||
function toComment(sourceMap) {
|
||||
// eslint-disable-next-line no-undef
|
||||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
||||
var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
|
||||
return "/*# ".concat(data, " */");
|
||||
}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
"use strict";
|
||||
|
||||
module.exports = function (url, options) {
|
||||
if (!options) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
options = {};
|
||||
} // eslint-disable-next-line no-underscore-dangle, no-param-reassign
|
||||
|
||||
|
||||
url = url && url.__esModule ? url.default : url;
|
||||
|
||||
if (typeof url !== 'string') {
|
||||
return url;
|
||||
} // If url is already wrapped in quotes, remove them
|
||||
|
||||
|
||||
if (/^['"].*['"]$/.test(url)) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
url = url.slice(1, -1);
|
||||
}
|
||||
|
||||
if (options.hash) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
url += options.hash;
|
||||
} // Should url be wrapped?
|
||||
// See https://drafts.csswg.org/css-values-3/#urls
|
||||
|
||||
|
||||
if (/["'() \t\n]/.test(url) || options.needQuotes) {
|
||||
return "\"".concat(url.replace(/"/g, '\\"').replace(/\n/g, '\\n'), "\"");
|
||||
}
|
||||
|
||||
return url;
|
||||
};
|
||||
+397
@@ -0,0 +1,397 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.normalizeUrl = normalizeUrl;
|
||||
exports.getFilter = getFilter;
|
||||
exports.getModulesPlugins = getModulesPlugins;
|
||||
exports.normalizeSourceMap = normalizeSourceMap;
|
||||
exports.getImportCode = getImportCode;
|
||||
exports.getModuleCode = getModuleCode;
|
||||
exports.getExportCode = getExportCode;
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _loaderUtils = _interopRequireWildcard(require("loader-utils"));
|
||||
|
||||
var _normalizePath = _interopRequireDefault(require("normalize-path"));
|
||||
|
||||
var _cssesc = _interopRequireDefault(require("cssesc"));
|
||||
|
||||
var _postcssModulesValues = _interopRequireDefault(require("postcss-modules-values"));
|
||||
|
||||
var _postcssModulesLocalByDefault = _interopRequireDefault(require("postcss-modules-local-by-default"));
|
||||
|
||||
var _postcssModulesExtractImports = _interopRequireDefault(require("postcss-modules-extract-imports"));
|
||||
|
||||
var _postcssModulesScope = _interopRequireDefault(require("postcss-modules-scope"));
|
||||
|
||||
var _camelcase = _interopRequireDefault(require("camelcase"));
|
||||
|
||||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
||||
|
||||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
const whitespace = '[\\x20\\t\\r\\n\\f]';
|
||||
const unescapeRegExp = new RegExp(`\\\\([\\da-f]{1,6}${whitespace}?|(${whitespace})|.)`, 'ig');
|
||||
|
||||
function unescape(str) {
|
||||
return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
|
||||
const high = `0x${escaped}` - 0x10000;
|
||||
/* eslint-disable line-comment-position */
|
||||
// NaN means non-codepoint
|
||||
// Workaround erroneous numeric interpretation of +"0x"
|
||||
// eslint-disable-next-line no-self-compare
|
||||
|
||||
return high !== high || escapedWhitespace ? escaped : high < 0 ? // BMP codepoint
|
||||
String.fromCharCode(high + 0x10000) : // Supplemental Plane codepoint (surrogate pair)
|
||||
// eslint-disable-next-line no-bitwise
|
||||
String.fromCharCode(high >> 10 | 0xd800, high & 0x3ff | 0xdc00);
|
||||
/* eslint-enable line-comment-position */
|
||||
});
|
||||
} // eslint-disable-next-line no-control-regex
|
||||
|
||||
|
||||
const filenameReservedRegex = /[<>:"/\\|?*\x00-\x1F]/g; // eslint-disable-next-line no-control-regex
|
||||
|
||||
const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
|
||||
const reRelativePath = /^\.+/;
|
||||
|
||||
function getLocalIdent(loaderContext, localIdentName, localName, options) {
|
||||
if (!options.context) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
options.context = loaderContext.rootContext;
|
||||
}
|
||||
|
||||
const request = (0, _normalizePath.default)(_path.default.relative(options.context || '', loaderContext.resourcePath)); // eslint-disable-next-line no-param-reassign
|
||||
|
||||
options.content = `${options.hashPrefix + request}+${unescape(localName)}`; // Using `[path]` placeholder outputs `/` we need escape their
|
||||
// Also directories can contains invalid characters for css we need escape their too
|
||||
|
||||
return (0, _cssesc.default)(_loaderUtils.default.interpolateName(loaderContext, localIdentName, options) // For `[hash]` placeholder
|
||||
.replace(/^((-?[0-9])|--)/, '_$1').replace(filenameReservedRegex, '-').replace(reControlChars, '-').replace(reRelativePath, '-').replace(/\./g, '-'), {
|
||||
isIdentifier: true
|
||||
}).replace(/\\\[local\\\]/gi, localName);
|
||||
}
|
||||
|
||||
function normalizeUrl(url, isStringValue) {
|
||||
let normalizedUrl = url;
|
||||
|
||||
if (isStringValue && /\\[\n]/.test(normalizedUrl)) {
|
||||
normalizedUrl = normalizedUrl.replace(/\\[\n]/g, '');
|
||||
}
|
||||
|
||||
return (0, _loaderUtils.urlToRequest)(decodeURIComponent(unescape(normalizedUrl)));
|
||||
}
|
||||
|
||||
function getFilter(filter, resourcePath, defaultFilter = null) {
|
||||
return item => {
|
||||
if (defaultFilter && !defaultFilter(item)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof filter === 'function') {
|
||||
return filter(item, resourcePath);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
function getModulesPlugins(options, loaderContext) {
|
||||
let modulesOptions = {
|
||||
mode: 'local',
|
||||
localIdentName: '[hash:base64]',
|
||||
getLocalIdent,
|
||||
hashPrefix: '',
|
||||
localIdentRegExp: null
|
||||
};
|
||||
|
||||
if (typeof options.modules === 'boolean' || typeof options.modules === 'string') {
|
||||
modulesOptions.mode = typeof options.modules === 'string' ? options.modules : 'local';
|
||||
} else {
|
||||
modulesOptions = Object.assign({}, modulesOptions, options.modules);
|
||||
}
|
||||
|
||||
return [_postcssModulesValues.default, (0, _postcssModulesLocalByDefault.default)({
|
||||
mode: modulesOptions.mode
|
||||
}), (0, _postcssModulesExtractImports.default)(), (0, _postcssModulesScope.default)({
|
||||
generateScopedName: function generateScopedName(exportName) {
|
||||
let localIdent = modulesOptions.getLocalIdent(loaderContext, modulesOptions.localIdentName, exportName, {
|
||||
context: modulesOptions.context,
|
||||
hashPrefix: modulesOptions.hashPrefix,
|
||||
regExp: modulesOptions.localIdentRegExp
|
||||
});
|
||||
|
||||
if (!localIdent) {
|
||||
localIdent = getLocalIdent(loaderContext, modulesOptions.localIdentName, exportName, {
|
||||
context: modulesOptions.context,
|
||||
hashPrefix: modulesOptions.hashPrefix,
|
||||
regExp: modulesOptions.localIdentRegExp
|
||||
});
|
||||
}
|
||||
|
||||
return localIdent;
|
||||
}
|
||||
})];
|
||||
}
|
||||
|
||||
function normalizeSourceMap(map) {
|
||||
let newMap = map; // Some loader emit source map as string
|
||||
// Strip any JSON XSSI avoidance prefix from the string (as documented in the source maps specification), and then parse the string as JSON.
|
||||
|
||||
if (typeof newMap === 'string') {
|
||||
newMap = JSON.parse(newMap);
|
||||
} // Source maps should use forward slash because it is URLs (https://github.com/mozilla/source-map/issues/91)
|
||||
// We should normalize path because previous loaders like `sass-loader` using backslash when generate source map
|
||||
|
||||
|
||||
if (newMap.file) {
|
||||
newMap.file = (0, _normalizePath.default)(newMap.file);
|
||||
}
|
||||
|
||||
if (newMap.sourceRoot) {
|
||||
newMap.sourceRoot = (0, _normalizePath.default)(newMap.sourceRoot);
|
||||
}
|
||||
|
||||
if (newMap.sources) {
|
||||
newMap.sources = newMap.sources.map(source => (0, _normalizePath.default)(source));
|
||||
}
|
||||
|
||||
return newMap;
|
||||
}
|
||||
|
||||
function getImportPrefix(loaderContext, importLoaders) {
|
||||
if (importLoaders === false) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const numberImportedLoaders = parseInt(importLoaders, 10) || 0;
|
||||
const loadersRequest = loaderContext.loaders.slice(loaderContext.loaderIndex, loaderContext.loaderIndex + 1 + numberImportedLoaders).map(x => x.request).join('!');
|
||||
return `-!${loadersRequest}!`;
|
||||
}
|
||||
|
||||
function getImportCode(loaderContext, imports, exportType, sourceMap, importLoaders, esModule) {
|
||||
const importItems = [];
|
||||
const codeItems = [];
|
||||
const atRuleImportNames = new Map();
|
||||
const urlImportNames = new Map();
|
||||
let importPrefix;
|
||||
|
||||
if (exportType === 'full') {
|
||||
importItems.push(esModule ? `import ___CSS_LOADER_API_IMPORT___ from ${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))};` : `var ___CSS_LOADER_API_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))});`);
|
||||
codeItems.push(esModule ? `var exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});` : `exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`);
|
||||
}
|
||||
|
||||
imports.forEach(item => {
|
||||
// eslint-disable-next-line default-case
|
||||
switch (item.type) {
|
||||
case '@import':
|
||||
{
|
||||
const {
|
||||
url,
|
||||
media
|
||||
} = item;
|
||||
const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
|
||||
|
||||
if (!(0, _loaderUtils.isUrlRequest)(url)) {
|
||||
codeItems.push(`exports.push([module.id, ${JSON.stringify(`@import url(${url});`)}${preparedMedia}]);`);
|
||||
return;
|
||||
}
|
||||
|
||||
let importName = atRuleImportNames.get(url);
|
||||
|
||||
if (!importName) {
|
||||
if (!importPrefix) {
|
||||
importPrefix = getImportPrefix(loaderContext, importLoaders);
|
||||
}
|
||||
|
||||
importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
|
||||
importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
|
||||
atRuleImportNames.set(url, importName);
|
||||
}
|
||||
|
||||
codeItems.push(`exports.i(${importName}${preparedMedia});`);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'url':
|
||||
{
|
||||
if (urlImportNames.size === 0) {
|
||||
importItems.push(esModule ? `import ___CSS_LOADER_GET_URL_IMPORT___ from ${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))};` : `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))});`);
|
||||
}
|
||||
|
||||
const {
|
||||
replacementName,
|
||||
url,
|
||||
hash,
|
||||
needQuotes
|
||||
} = item;
|
||||
let importName = urlImportNames.get(url);
|
||||
|
||||
if (!importName) {
|
||||
importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
|
||||
importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, url)});`);
|
||||
urlImportNames.set(url, importName);
|
||||
}
|
||||
|
||||
const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? 'needQuotes: true' : []);
|
||||
const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(', ')} }` : '';
|
||||
codeItems.push(`var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});`);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'icss-import':
|
||||
{
|
||||
const {
|
||||
importName,
|
||||
url,
|
||||
media
|
||||
} = item;
|
||||
const preparedMedia = media ? `, ${JSON.stringify(media)}` : ', ""';
|
||||
|
||||
if (!importPrefix) {
|
||||
importPrefix = getImportPrefix(loaderContext, importLoaders);
|
||||
}
|
||||
|
||||
importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
|
||||
|
||||
if (exportType === 'full') {
|
||||
codeItems.push(`exports.i(${importName}${preparedMedia}, true);`);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
const items = importItems.concat(codeItems);
|
||||
return items.length > 0 ? `// Imports\n${items.join('\n')}\n` : '';
|
||||
}
|
||||
|
||||
function getModuleCode(loaderContext, result, exportType, sourceMap, replacers) {
|
||||
if (exportType !== 'full') {
|
||||
return '';
|
||||
}
|
||||
|
||||
const {
|
||||
css,
|
||||
map
|
||||
} = result;
|
||||
const sourceMapValue = sourceMap && map ? `,${map}` : '';
|
||||
let cssCode = JSON.stringify(css);
|
||||
replacers.forEach(replacer => {
|
||||
const {
|
||||
type,
|
||||
replacementName
|
||||
} = replacer;
|
||||
|
||||
if (type === 'url') {
|
||||
cssCode = cssCode.replace(new RegExp(replacementName, 'g'), () => `" + ${replacementName} + "`);
|
||||
}
|
||||
|
||||
if (type === 'icss-import') {
|
||||
const {
|
||||
importName,
|
||||
localName
|
||||
} = replacer;
|
||||
cssCode = cssCode.replace(new RegExp(replacementName, 'g'), () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
|
||||
}
|
||||
});
|
||||
return `// Module\nexports.push([module.id, ${cssCode}, ""${sourceMapValue}]);\n`;
|
||||
}
|
||||
|
||||
function dashesCamelCase(str) {
|
||||
return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
|
||||
}
|
||||
|
||||
function getExportCode(loaderContext, exports, exportType, replacers, localsConvention, esModule) {
|
||||
const exportItems = [];
|
||||
let exportLocalsCode;
|
||||
|
||||
if (exports.length > 0) {
|
||||
const exportLocals = [];
|
||||
|
||||
const addExportedLocal = (name, value) => {
|
||||
exportLocals.push(`\t${JSON.stringify(name)}: ${JSON.stringify(value)}`);
|
||||
};
|
||||
|
||||
exports.forEach(item => {
|
||||
const {
|
||||
name,
|
||||
value
|
||||
} = item;
|
||||
|
||||
switch (localsConvention) {
|
||||
case 'camelCase':
|
||||
{
|
||||
addExportedLocal(name, value);
|
||||
const modifiedName = (0, _camelcase.default)(name);
|
||||
|
||||
if (modifiedName !== name) {
|
||||
addExportedLocal(modifiedName, value);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'camelCaseOnly':
|
||||
{
|
||||
addExportedLocal((0, _camelcase.default)(name), value);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'dashes':
|
||||
{
|
||||
addExportedLocal(name, value);
|
||||
const modifiedName = dashesCamelCase(name);
|
||||
|
||||
if (modifiedName !== name) {
|
||||
addExportedLocal(modifiedName, value);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'dashesOnly':
|
||||
{
|
||||
addExportedLocal(dashesCamelCase(name), value);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'asIs':
|
||||
default:
|
||||
addExportedLocal(name, value);
|
||||
break;
|
||||
}
|
||||
});
|
||||
exportLocalsCode = exportLocals.join(',\n');
|
||||
replacers.forEach(replacer => {
|
||||
if (replacer.type === 'icss-import') {
|
||||
const {
|
||||
replacementName,
|
||||
importName,
|
||||
localName
|
||||
} = replacer;
|
||||
exportLocalsCode = exportLocalsCode.replace(new RegExp(replacementName, 'g'), () => exportType === 'locals' ? `" + ${importName}[${JSON.stringify(localName)}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (exportType === 'locals') {
|
||||
exportItems.push(`${esModule ? 'export default' : 'module.exports ='} ${exportLocalsCode ? `{\n${exportLocalsCode}\n}` : '{}'};`);
|
||||
} else {
|
||||
if (exportLocalsCode) {
|
||||
exportItems.push(`exports.locals = {\n${exportLocalsCode}\n};`);
|
||||
}
|
||||
|
||||
exportItems.push(`${esModule ? 'export default' : 'module.exports ='} exports;`);
|
||||
}
|
||||
|
||||
return `// Exports\n${exportItems.join('\n')}\n`;
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
{
|
||||
"_from": "css-loader@*",
|
||||
"_id": "css-loader@3.4.2",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==",
|
||||
"_location": "/css-loader",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "css-loader@*",
|
||||
"name": "css-loader",
|
||||
"escapedName": "css-loader",
|
||||
"rawSpec": "*",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "*"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#DEV:/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
|
||||
"_shasum": "d3fdb3358b43f233b78501c5ed7b1c6da6133202",
|
||||
"_spec": "css-loader@*",
|
||||
"_where": "O:\\zero\\zero.Web",
|
||||
"author": {
|
||||
"name": "Tobias Koppers @sokra"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/webpack-contrib/css-loader/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"camelcase": "^5.3.1",
|
||||
"cssesc": "^3.0.0",
|
||||
"icss-utils": "^4.1.1",
|
||||
"loader-utils": "^1.2.3",
|
||||
"normalize-path": "^3.0.0",
|
||||
"postcss": "^7.0.23",
|
||||
"postcss-modules-extract-imports": "^2.0.0",
|
||||
"postcss-modules-local-by-default": "^3.0.2",
|
||||
"postcss-modules-scope": "^2.1.1",
|
||||
"postcss-modules-values": "^3.0.0",
|
||||
"postcss-value-parser": "^4.0.2",
|
||||
"schema-utils": "^2.6.0"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "css loader module for webpack",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.7.7",
|
||||
"@babel/core": "^7.7.7",
|
||||
"@babel/preset-env": "^7.7.7",
|
||||
"@commitlint/cli": "^8.3.4",
|
||||
"@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",
|
||||
"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.19.1",
|
||||
"file-loader": "^5.0.2",
|
||||
"husky": "^4.0.6",
|
||||
"jest": "^24.9.0",
|
||||
"jest-junit": "^10.0.0",
|
||||
"lint-staged": "^9.5.0",
|
||||
"memfs": "^3.0.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"prettier": "^1.19.1",
|
||||
"sass": "^1.24.4",
|
||||
"sass-loader": "^8.0.1",
|
||||
"standard-version": "^7.0.1",
|
||||
"strip-ansi": "^6.0.0",
|
||||
"url-loader": "^3.0.0",
|
||||
"webpack": "^4.41.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"homepage": "https://github.com/webpack-contrib/css-loader",
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"css",
|
||||
"loader",
|
||||
"url",
|
||||
"import"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs.js",
|
||||
"name": "css-loader",
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0 || ^5.0.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/webpack-contrib/css-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:only": "cross-env NODE_ENV=test jest",
|
||||
"test:watch": "npm run test:only -- --watch",
|
||||
"validate:runtime": "es-check es5 \"dist/runtime/**/*.js\""
|
||||
},
|
||||
"version": "3.4.2"
|
||||
}
|
||||
Reference in New Issue
Block a user