css-loader 4.2.0 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 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.
 
+## [5.0.0](https://github.com/webpack-contrib/css-loader/compare/v4.3.0...v5.0.0) (2020-10-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* migrate on PostCSS 8
+* runtime doesn't contain source maps code without `sourceMap: true`
+* returned value from the `getLocalIdent` escapes by default, the `exportName` value is always unescaped
+* Auto enable icss modules for all files for which `/\.icss\.\w+$/i` (the `modules.compileType` option is `icss`)
+* `[emoji]` placeholder was deprecated
+* `icss` option was removed (it was deprecated previously)
+
+### Features
+
+* allow named exports to have underscores in names ([#1209](https://github.com/webpack-contrib/css-loader/issues/1209)) ([747d62b](https://github.com/webpack-contrib/css-loader/commit/747d62b75a878d8881f4819b96297667dc689b8f))
+* hide warning when you don't need handle `url()`/`@import` ([#1195](https://github.com/webpack-contrib/css-loader/issues/1195)) ([dd52931](https://github.com/webpack-contrib/css-loader/commit/dd52931150ed42f122d9017642437c26cc1b2422))
+* improve error message  ([52412f6](https://github.com/webpack-contrib/css-loader/commit/52412f6d5a54745ee37a4a67f038455c26ba5772))
+* reduce runtime ([9f974be](https://github.com/webpack-contrib/css-loader/commit/9f974be81f5942d3afaf783529677bd541952fa3))
+* add fallback if custom getLocalIdent returns `null`/`undefined` ([#1193](https://github.com/webpack-contrib/css-loader/issues/1193)) ([0f95841](https://github.com/webpack-contrib/css-loader/commit/0f9584135e63f9f354043e7f414e0c1aad0edc6e))
+
+## [4.3.0](https://github.com/webpack-contrib/css-loader/compare/v4.2.2...v4.3.0) (2020-09-08)
+
+
+### Features
+
+* the `importLoaders` can be `string` ([#1178](https://github.com/webpack-contrib/css-loader/issues/1178)) ([ec58a7c](https://github.com/webpack-contrib/css-loader/commit/ec58a7cfda46443e35539d66b86685195fa5db03))
+
+
+### Bug Fixes
+
+* line breaks in `url` function ([88b8ddc](https://github.com/webpack-contrib/css-loader/commit/88b8ddc1d78a2b6a917ed2dfe2f2a37cf6a84190))
+
+### [4.2.2](https://github.com/webpack-contrib/css-loader/compare/v4.2.1...v4.2.2) (2020-08-24)
+
+
+### Bug Fixes
+
+* source maps generation, source from source maps are now relative to `compiler.context` and use `webpack://` protocol ([#1169](https://github.com/webpack-contrib/css-loader/issues/1169)) ([fb5c53d](https://github.com/webpack-contrib/css-loader/commit/fb5c53d80b10ee698762238bb7b122aec8c5048d))
+
+### [4.2.1](https://github.com/webpack-contrib/css-loader/compare/v4.2.0...v4.2.1) (2020-08-06)
+
+
+### Bug Fixes
+
+* regression with the `exportOnlyLocals` option, now `locals` are not exported under the `locals` name, it was big regression, we apologize for that ([24c0a12](https://github.com/webpack-contrib/css-loader/commit/24c0a122d1396c08326a24f6184f5da09cf52ccc))
+
 ## [4.2.0](https://github.com/webpack-contrib/css-loader/compare/v4.1.1...v4.2.0) (2020-07-31)
 
 

package/README.md

@@ -530,7 +530,7 @@ module.exports = {
             auto: true,
             exportGlobals: true,
             localIdentName: '[path][name]__[local]--[hash:base64:5]',
-            context: path.resolve(__dirname, 'src'),
+            localIdentContext: path.resolve(__dirname, 'src'),
             localIdentHashPrefix: 'my-custom-hash',
             namedExport: true,
             exportLocalsConvention: 'camelCase',
@@ -780,7 +780,7 @@ module.exports = {
         loader: 'css-loader',
         options: {
           modules: {
-            context: path.resolve(__dirname, 'context'),
+            localIdentContext: path.resolve(__dirname, 'src'),
           },
         },
       },
@@ -848,6 +848,8 @@ Default: `undefined`
 
 Allows to specify a function to generate the classname.
 By default we use built-in function to generate a classname.
+If the custom function returns `null` or `undefined`, we fallback to the
+built-in function to generate the classname.
 
 **webpack.config.js**
 
@@ -951,7 +953,7 @@ module.exports = {
 };
 ```
 
-##### `exportlocalsConvention`
+##### `exportLocalsConvention`
 
 Type: `String`
 Default: based on the `modules.namedExport` option value, if `true` - `camelCaseOnly`, otherwise `asIs`
@@ -1243,6 +1245,111 @@ module.exports = {
 };
 ```
 
+### Separating `Interoperable CSS`-only and `CSS Module` features
+
+The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `compileType` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4.
+Meanwhile all files matching `*.module.scss` are treated as `CSS Modules` in this example.
+
+An example case is assumed where a project requires canvas drawing variables to be synchronized with CSS - canvas drawing uses the same color (set by color name in JavaScript) as HTML background (set by class name in CSS).
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      // ...
+      // --------
+      // SCSS ALL EXCEPT MODULES
+      {
+        test: /\.scss$/,
+        exclude: /\.module\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                compileType: 'icss'
+              }
+            }
+          },
+          {
+            loader: 'sass-loader'
+          },
+        ],
+      },
+      // --------
+      // SCSS MODULES
+      {
+        test: /\.module\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                compileType: 'module'
+              }
+            }
+          },
+          {
+            loader: 'sass-loader'
+          },
+        ],
+      },
+      // --------
+      // ...
+  },
+};
+```
+
+**variables.scss**
+
+File treated as `ICSS`-only.
+
+```scss
+$colorBackground: red;
+:export {
+  colorBackgroundCanvas: $colorBackground;
+}
+```
+
+**Component.module.scss**
+
+File treated as `CSS Module`.
+
+```scss
+@import 'variables.scss';
+.componentClass {
+  background-color: $colorBackground;
+}
+```
+
+**Component.jsx**
+
+Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript.
+
+```jsx
+import svars from 'variables.scss';
+import styles from 'Component.module.scss';
+
+// Render DOM with CSS modules class name
+// <div className={styles.componentClass}>
+//   <canvas ref={mountsCanvas}/>
+// </div>
+
+// Somewhere in JavaScript canvas drawing code use the variable directly
+// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
+ctx.fillStyle = `${svars.colorBackgroundCanvas}`;
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.

package/dist/CssSyntaxError.js

@@ -11,7 +11,8 @@ class CssSyntaxError extends Error {
     const {
       reason,
       line,
-      column
+      column,
+      file
     } = 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.
@@ -22,6 +23,7 @@ class CssSyntaxError extends Error {
       this.message += `(${line}:${column}) `;
     }
 
+    this.message += file ? `${file} ` : '<css input> ';
     this.message += `${reason}`;
     const code = error.showSourceCode();
 

package/dist/index.js

@@ -11,7 +11,7 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _package = _interopRequireDefault(require("postcss/package.json"));
 
-var _schemaUtils = _interopRequireDefault(require("schema-utils"));
+var _schemaUtils = require("schema-utils");
 
 var _semver = require("semver");
 
@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 async function loader(content, map, meta) {
   const rawOptions = (0, _loaderUtils.getOptions)(this);
-  (0, _schemaUtils.default)(_options.default, rawOptions, {
+  (0, _schemaUtils.validate)(_options.default, rawOptions, {
     name: 'CSS Loader',
     baseDataPath: 'options'
   });
@@ -131,15 +131,18 @@ async function loader(content, map, meta) {
     }
   }
 
+  const {
+    resourcePath
+  } = this;
   let result;
 
   try {
     result = await (0, _postcss.default)(plugins).process(content, {
-      from: this.resourcePath,
-      to: this.resourcePath,
+      hideNothingWarning: true,
+      from: resourcePath,
+      to: resourcePath,
       map: options.sourceMap ? {
-        // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
-        prev: map ? (0, _utils.normalizeSourceMap)(map) : null,
+        prev: map ? (0, _utils.normalizeSourceMap)(map, resourcePath) : null,
         inline: false,
         annotation: false
       } : false
@@ -165,10 +168,17 @@ async function loader(content, map, meta) {
       importName: '___CSS_LOADER_API_IMPORT___',
       url: (0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/api'))
     });
+
+    if (options.sourceMap) {
+      imports.unshift({
+        importName: '___CSS_LOADER_API_SOURCEMAP_IMPORT___',
+        url: (0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/cssWithMappingToString'))
+      });
+    }
   }
 
   const importCode = (0, _utils.getImportCode)(imports, options);
-  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options);
+  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
   const exportCode = (0, _utils.getExportCode)(exports, replacements, options);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

package/dist/options.json

@@ -122,10 +122,6 @@
         }
       ]
     },
-    "icss": {
-      "description": "Enables/Disables handling the CSS module interoperable import/export format ((https://github.com/webpack-contrib/css-loader#icss)",
-      "type": "boolean"
-    },
     "sourceMap": {
       "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
       "type": "boolean"
@@ -136,6 +132,9 @@
         {
           "type": "boolean"
         },
+        {
+          "type": "string"
+        },
         {
           "type": "integer"
         }

package/dist/plugins/postcss-icss-parser.js

@@ -5,109 +5,114 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _postcss = _interopRequireDefault(require("postcss"));
-
 var _icssUtils = require("icss-utils");
 
 var _utils = require("../utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _postcss.default.plugin('postcss-icss-parser', options => async css => {
-  const importReplacements = Object.create(null);
-  const {
-    icssImports,
-    icssExports
-  } = (0, _icssUtils.extractICSS)(css);
-  const imports = new Map();
-  const tasks = []; // eslint-disable-next-line guard-for-in
-
-  for (const url in icssImports) {
-    const tokens = icssImports[url];
-
-    if (Object.keys(tokens).length === 0) {
-      // eslint-disable-next-line no-continue
-      continue;
-    }
-
-    let normalizedUrl = url;
-    let prefix = '';
-    const queryParts = normalizedUrl.split('!');
+const plugin = (options = {}) => {
+  return {
+    postcssPlugin: 'postcss-icss-parser',
 
-    if (queryParts.length > 1) {
-      normalizedUrl = queryParts.pop();
-      prefix = queryParts.join('!');
-    }
-
-    const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
-
-    const doResolve = async () => {
+    async OnceExit(root) {
+      const importReplacements = Object.create(null);
       const {
-        resolver,
-        context
-      } = options;
-      const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
-      return {
-        url: resolvedUrl,
-        prefix,
-        tokens
-      };
-    };
-
-    tasks.push(doResolve());
-  }
-
-  const results = await Promise.all(tasks);
-
-  for (let index = 0; index <= results.length - 1; index++) {
-    const {
-      url,
-      prefix,
-      tokens
-    } = results[index];
-    const newUrl = prefix ? `${prefix}!${url}` : url;
-    const importKey = newUrl;
-    let importName = imports.get(importKey);
-
-    if (!importName) {
-      importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
-      imports.set(importKey, importName);
-      options.imports.push({
-        importName,
-        url: options.urlHandler(newUrl),
-        icss: true,
-        index
-      });
-      options.api.push({
-        importName,
-        dedupe: true,
-        index
-      });
+        icssImports,
+        icssExports
+      } = (0, _icssUtils.extractICSS)(root);
+      const imports = new Map();
+      const tasks = []; // eslint-disable-next-line guard-for-in
+
+      for (const url in icssImports) {
+        const tokens = icssImports[url];
+
+        if (Object.keys(tokens).length === 0) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
+        let normalizedUrl = url;
+        let prefix = '';
+        const queryParts = normalizedUrl.split('!');
+
+        if (queryParts.length > 1) {
+          normalizedUrl = queryParts.pop();
+          prefix = queryParts.join('!');
+        }
+
+        const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
+
+        const doResolve = async () => {
+          const {
+            resolver,
+            context
+          } = options;
+          const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
+          return {
+            url: resolvedUrl,
+            prefix,
+            tokens
+          };
+        };
+
+        tasks.push(doResolve());
+      }
+
+      const results = await Promise.all(tasks);
+
+      for (let index = 0; index <= results.length - 1; index++) {
+        const {
+          url,
+          prefix,
+          tokens
+        } = results[index];
+        const newUrl = prefix ? `${prefix}!${url}` : url;
+        const importKey = newUrl;
+        let importName = imports.get(importKey);
+
+        if (!importName) {
+          importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
+          imports.set(importKey, importName);
+          options.imports.push({
+            importName,
+            url: options.urlHandler(newUrl),
+            icss: true,
+            index
+          });
+          options.api.push({
+            importName,
+            dedupe: true,
+            index
+          });
+        }
+
+        for (const [replacementIndex, token] of Object.keys(tokens).entries()) {
+          const replacementName = `___CSS_LOADER_ICSS_IMPORT_${index}_REPLACEMENT_${replacementIndex}___`;
+          const localName = tokens[token];
+          importReplacements[token] = replacementName;
+          options.replacements.push({
+            replacementName,
+            importName,
+            localName
+          });
+        }
+      }
+
+      if (Object.keys(importReplacements).length > 0) {
+        (0, _icssUtils.replaceSymbols)(root, importReplacements);
+      }
+
+      for (const name of Object.keys(icssExports)) {
+        const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
+        options.exports.push({
+          name,
+          value
+        });
+      }
     }
 
-    for (const [replacementIndex, token] of Object.keys(tokens).entries()) {
-      const replacementName = `___CSS_LOADER_ICSS_IMPORT_${index}_REPLACEMENT_${replacementIndex}___`;
-      const localName = tokens[token];
-      importReplacements[token] = replacementName;
-      options.replacements.push({
-        replacementName,
-        importName,
-        localName
-      });
-    }
-  }
-
-  if (Object.keys(importReplacements).length > 0) {
-    (0, _icssUtils.replaceSymbols)(css, importReplacements);
-  }
-
-  for (const name of Object.keys(icssExports)) {
-    const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
-    options.exports.push({
-      name,
-      value
-    });
-  }
-});
+  };
+};
 
+plugin.postcss = true;
+var _default = plugin;
 exports.default = _default;