css-loader 2.1.1 → 3.0.0

package/CHANGELOG.md

@@ -1,7 +1,40 @@
-# Change Log
+# 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.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)
+* `exportLocalsStyle` 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)
 

package/README.md

@@ -42,7 +42,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
     ],
@@ -65,7 +65,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         use: ['to-string-loader', 'css-loader'],
       },
     ],
@@ -95,7 +95,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         use: [
           'handlebars-loader', // handlebars loader expects raw resource string
           'extract-loader',
@@ -109,19 +109,15 @@ module.exports = {
 
 ## Options
 
-|                    Name                     |         Type          |     Default     | Description                                                              |
-| :-----------------------------------------: | :-------------------: | :-------------: | :----------------------------------------------------------------------- |
-|              **[`url`](#url)**              | `{Boolean\|Function}` |     `true`      | Enable/Disable `url()` handling                                          |
-|           **[`import`](#import)**           | `{Boolean\/Function}` |     `true`      | Enable/Disable @import handling                                          |
-|          **[`modules`](#modules)**          |  `{Boolean\|String}`  |     `false`     | Enable/Disable CSS Modules and setup mode                                |
-|   **[`localIdentName`](#localidentname)**   |      `{String}`       | `[hash:base64]` | Configure the generated ident                                            |
-|          **[`context`](#context)**          |      `{String}`       |   `undefined`   | Allow to redefine basic loader context for local ident name              |
-|       **[`hashPrefix`](#hashprefix)**       |      `{String}`       |   `undefined`   | Allow to add custom hash to generate more unique classes                 |
-|    **[`getLocalIdent`](#getlocalident)**    |     `{Function}`      |   `undefined`   | Configure the function to generate classname based on a different schema |
-|        **[`sourceMap`](#sourcemap)**        |      `{Boolean}`      |     `false`     | Enable/Disable Sourcemaps                                                |
-|        **[`camelCase`](#camelcase)**        |  `{Boolean\|String}`  |     `false`     | Export Classnames in CamelCase                                           |
-|    **[`importLoaders`](#importloaders)**    |      `{Number}`       |       `0`       | Number of loaders applied before CSS loader                              |
-| **[`exportOnlyLocals`](#exportonlylocals)** |      `{Boolean}`      |     `false`     | Export only locals                                                       |
+|                    Name                     |            Type             | Default | Description                                        |
+| :-----------------------------------------: | :-------------------------: | :-----: | :------------------------------------------------- |
+|              **[`url`](#url)**              |    `{Boolean\|Function}`    | `true`  | Enable/Disable `url()` handling                    |
+|           **[`import`](#import)**           |    `{Boolean\|Function}`    | `true`  | Enable/Disable @import handling                    |
+|          **[`modules`](#modules)**          | `{Boolean\|String\|Object}` | `false` | Enable/Disable CSS Modules and setup their options |
+|        **[`sourceMap`](#sourcemap)**        |         `{Boolean}`         | `false` | Enable/Disable Sourcemaps                          |
+|    **[`importLoaders`](#importloaders)**    |         `{Number}`          |   `0`   | Number of loaders applied before CSS loader        |
+| **[`localsConvention`](#localsconvention)** |         `{String}`          | `asIs`  | Setup style of exported classnames                 |
+|       **[`onlyLocals`](#onlylocals)**       |         `{Boolean}`         | `false` | Export only locals                                 |
 
 ### `url`
 
@@ -160,7 +156,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
           url: true,
@@ -182,14 +178,18 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
           url: (url, resourcePath) => {
             // resourcePath - path to css file
 
-            // `url()` with `img.png` stay untouched
-            return url.includes('img.png');
+            // Don't handle `img.png` urls
+            if (url.includes('img.png')) {
+              return false;
+            }
+
+            return true;
           },
         },
       },
@@ -236,7 +236,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
           import: true,
@@ -258,7 +258,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
           import: (parsedImport, resourcePath) => {
@@ -266,8 +266,12 @@ module.exports = {
             // parsedImport.media - media query of `@import`
             // resourcePath - path to css file
 
-            // `@import` with `style.css` stay untouched
-            return parsedImport.url.includes('style.css');
+            // Don't handle `style.css` import
+            if (parsedImport.url.includes('style.css')) {
+              return false;
+            }
+
+            return true;
           },
         },
       },
@@ -276,24 +280,15 @@ module.exports = {
 };
 ```
 
-### [`modules`](https://github.com/css-modules/css-modules)
+### `modules`
 
-Type: `Boolean|String`
+Type: `Boolean|String|Object`
 Default: `false`
 
-The `modules` option enables/disables the **CSS Modules** spec and setup basic behaviour.
-
-|      Name      |    Type     | Description                                                                                                                      |
-| :------------: | :---------: | :------------------------------------------------------------------------------------------------------------------------------- |
-|   **`true`**   | `{Boolean}` | Enables local scoped CSS by default (use **local** mode by default)                                                              |
-|  **`false`**   | `{Boolean}` | Disable the **CSS Modules** spec, all **CSS Modules** features (like `@value`, `:local`, `:global` and `composes`) will not work |
-| **`'local'`**  | `{String}`  | Enables local scoped CSS by default (same as `true` value)                                                                       |
-| **`'global'`** | `{String}`  | Enables global scoped CSS by default                                                                                             |
+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.
 
-You can read about **modes** below.
-
 **webpack.config.js**
 
 ```js
@@ -301,7 +296,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
           modules: true,
@@ -312,6 +307,8 @@ module.exports = {
 };
 ```
 
+#### `Features`
+
 ##### `Scope`
 
 Using `local` value requires you to specify `:global` classes.
@@ -324,7 +321,7 @@ 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)` nocation can be used to declare an explicit global 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.
@@ -437,7 +434,133 @@ To import from multiple modules use multiple `composes:` rules.
 }
 ```
 
-### `localIdentName`
+##### `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]`
@@ -452,11 +575,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          modules: true,
-          localIdentName: '[path][name]__[local]--[hash:base64:5]',
+          modules: {
+            localIdentName: '[path][name]__[local]--[hash:base64:5]',
+          },
         },
       },
     ],
@@ -464,7 +588,7 @@ module.exports = {
 };
 ```
 
-### `context`
+##### `context`
 
 Type: `String`
 Default: `undefined`
@@ -479,11 +603,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          modules: true,
-          context: path.resolve(__dirname, 'context'),
+          modules: {
+            context: path.resolve(__dirname, 'context'),
+          },
         },
       },
     ],
@@ -491,7 +616,7 @@ module.exports = {
 };
 ```
 
-### `hashPrefix`
+##### `hashPrefix`
 
 Type: `String`
 Default: `undefined`
@@ -505,11 +630,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          modules: true,
-          hashPrefix: 'hash',
+          modules: {
+            hashPrefix: 'hash',
+          },
         },
       },
     ],
@@ -517,7 +643,7 @@ module.exports = {
 };
 ```
 
-### `getLocalIdent`
+##### `getLocalIdent`
 
 Type: `Function`
 Default: `undefined`
@@ -532,12 +658,13 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          modules: true,
-          getLocalIdent: (context, localIdentName, localName, options) => {
-            return 'whatever_random_class_name';
+          modules: {
+            getLocalIdent: (context, localIdentName, localName, options) => {
+              return 'whatever_random_class_name';
+            },
           },
         },
       },
@@ -546,16 +673,10 @@ module.exports = {
 };
 ```
 
-### `sourceMap`
+##### `localIdentRegExp`
 
-Type: `Boolean`
-Default: `false`
-
-To include source maps set the `sourceMap` option.
-
-I.e. the `mini-css-extract-plugin` can handle them.
-
-They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which includes the server URL.
+Type: `String|RegExp`
+Default: `undefined`
 
 **webpack.config.js**
 
@@ -564,10 +685,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          sourceMap: true,
+          modules: {
+            localIdentRegExp: /page-(.*)\.css/i,
+          },
         },
       },
     ],
@@ -575,33 +698,18 @@ module.exports = {
 };
 ```
 
-### `camelCase`
+### `sourceMap`
 
-Type: `Boolean|String`
+Type: `Boolean`
 Default: `false`
 
-By default, the exported JSON keys mirror the class names. If you want to camelize class names (useful in JS), pass the query parameter `camelCase` to css-loader.
-
-|        Name        |    Type     | Description                                                                                                              |
-| :----------------: | :---------: | :----------------------------------------------------------------------------------------------------------------------- |
-|    **`false`**     | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals                            |
-|     **`true`**     | `{Boolean}` | Class names will be camelized                                                                                            |
-|   **`'dashes'`**   | `{String}`  | Only dashes in class names will be camelized                                                                             |
-|    **`'only'`**    | `{String}`  | Introduced in `0.27.1`. Class names will be camelized, the original class name will be removed from the locals           |
-| **`'dashesOnly'`** | `{String}`  | Introduced in `0.27.1`. Dashes in class names will be camelized, the original class name will be removed from the locals |
-
-**file.css**
+To include source maps set the `sourceMap` option.
 
-```css
-.class-name {
-}
-```
+I.e. the `mini-css-extract-plugin` can handle them.
 
-**file.js**
+They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not).
 
-```js
-import { className } from 'file.css';
-```
+In addition to that relative paths are buggy and you need to use an absolute public path which includes the server URL.
 
 **webpack.config.js**
 
@@ -610,10 +718,10 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          camelCase: true,
+          sourceMap: true,
         },
       },
     ],
@@ -635,7 +743,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         use: [
           'style-loader',
           {
@@ -655,7 +763,53 @@ module.exports = {
 
 This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
 
-### `exportOnlyLocals`
+### `localsConvention`
+
+Type: `String`
+Default: `undefined`
+
+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`
@@ -671,10 +825,10 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         loader: 'css-loader',
         options: {
-          exportOnlyLocals: true,
+          onlyLocals: true,
         },
       },
     ],
@@ -695,14 +849,14 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
         loader: 'url-loader',
         options: {
-          limit: 10000,
+          limit: 8192,
         },
       },
     ],
@@ -734,8 +888,8 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [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://img.shields.io/circleci/project/github/webpack-contrib/css-loader.svg
-[tests-url]: https://circleci.com/gh/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