css-loader 6.7.0 → 6.7.2

package/README.md

@@ -9,7 +9,6 @@
 
 [![npm][npm]][npm-url]
 [![node][node]][node-url]
-[![deps][deps]][deps-url]
 [![tests][tests]][tests-url]
 [![coverage][cover]][cover-url]
 [![chat][chat]][chat-url]
@@ -21,7 +20,9 @@ The `css-loader` interprets `@import` and `url()` like `import/require()` and wi
 
 ## Getting Started
 
-> ⚠ To use css-loader, webpack@5 is required
+> **Warning**
+>
+> To use css-loader, webpack@5 is required
 
 To begin, you'll need to install `css-loader`:
 
@@ -86,7 +87,7 @@ Type:
 type url =
   | boolean
   | {
-      url: (url: string, resourcePath: string) => boolean;
+      filter: (url: string, resourcePath: string) => boolean;
     };
 ```
 
@@ -161,6 +162,11 @@ module.exports = {
                 return false;
               }
 
+              // Don't handle images under root-relatve /external_images/
+              if (/^\/external_images\//.test(path)) {
+                return false;
+              }
+
               return true;
             },
           },
@@ -398,7 +404,9 @@ The loader replaces local selectors with unique identifiers. The chosen unique i
 }
 ```
 
-> ℹ️ Identifiers are exported
+> **Note**
+>
+> Identifiers are exported
 
 ```js
 exports.locals = {
@@ -451,7 +459,9 @@ exports.locals = {
 
 To import a local classname from another module.
 
-> i We strongly recommend that you specify the extension when importing a file, since it is possible to import a file with any extension and it is not known in advance which file to use.
+> **Note**
+>
+> We strongly recommend that you specify the extension when importing a file, since it is possible to import a file with any extension and it is not known in advance which file to use.
 
 ```css
 :local(.continueButton) {
@@ -631,7 +641,7 @@ module.exports = {
 
 ###### `RegExp`
 
-Enable css modules for files based on the filename satisfying your regex check.
+Enable CSS modules for files based on the filename satisfying your regex check.
 
 **webpack.config.js**
 
@@ -655,7 +665,7 @@ module.exports = {
 
 ###### `function`
 
-Enable css modules for files based on the filename satisfying your filter function check.
+Enable CSS modules for files based on the filename satisfying your filter function check.
 
 **webpack.config.js**
 
@@ -1099,9 +1109,13 @@ Default: `false`
 
 Enables/disables ES modules named export for locals.
 
-> ⚠ Names of locals are converted to camelcase, i.e. the `exportLocalsConvention` option has `camelCaseOnly` value by default.
+> **Warning**
+>
+> Names of locals are converted to camelcase, i.e. the `exportLocalsConvention` option has `camelCaseOnly` value by default.
 
-> ⚠ It is not allowed to use JavaScript reserved words in css class names.
+> **Warning**
+>
+> It is not allowed to use JavaScript reserved words in css class names.
 
 **styles.css**
 
@@ -1202,7 +1216,9 @@ Style of exported class names.
 
 By default, the exported JSON keys mirror the class names (i.e `asIs` value).
 
-> ⚠ Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
+> **Warning**
+>
+> Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
 
 |         Name          |   Type   | Description                                                                                      |
 | :-------------------: | :------: | :----------------------------------------------------------------------------------------------- |
@@ -1508,8 +1524,13 @@ import "./styles.css";
 
 #### `'string'`
 
-> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
-> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
+> **Warning**
+>
+> You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
+
+> **Warning**
+>
+> The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
 
 The default export is `string`.
 
@@ -1538,10 +1559,21 @@ console.log(sheet);
 
 #### `'css-style-sheet'`
 
-> ⚠ `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
-> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
-> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
-> ⚠ Source maps are not currently supported in `Chrome` due [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2)
+> **Warning**
+>
+> `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
+
+> **Warning**
+>
+> You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
+
+> **Warning**
+>
+> The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
+
+> **Warning**
+>
+> Source maps are not currently supported in `Chrome` due [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2)
 
 The default export is a [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
 
@@ -1650,7 +1682,9 @@ For `production` builds it's recommended to extract the CSS from your bundle bei
 This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin), because it creates separate css files.
 For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack-contrib/style-loader), because it injects CSS into the DOM using multiple <style></style> and works faster.
 
-> i Do not use `style-loader` and `mini-css-extract-plugin` together.
+> **Note**
+>
+> Do not use `style-loader` and `mini-css-extract-plugin` together.
 
 **webpack.config.js**
 
@@ -1988,8 +2022,6 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [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://github.com/webpack-contrib/css-loader/workflows/css-loader/badge.svg
 [tests-url]: https://github.com/webpack-contrib/css-loader/actions
 [cover]: https://codecov.io/gh/webpack-contrib/css-loader/branch/master/graph/badge.svg

package/dist/CssSyntaxError.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 class CssSyntaxError extends Error {
   constructor(error) {
     super(error);
@@ -14,27 +13,23 @@ class CssSyntaxError extends Error {
       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.
+    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 += file ? `${file} ` : "<css input> ";
     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
-
+    }
 
+    // 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;

package/dist/Warning.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 class Warning extends Error {
   constructor(warning) {
     super(warning);
@@ -13,20 +12,18 @@ class Warning extends Error {
       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.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}`;
 
-    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
-
+    // 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;

package/dist/cjs.js

@@ -1,6 +1,5 @@
 "use strict";
 
 const loader = require("./index");
-
-module.exports.defaultGetLocalIdent = require("./utils").defaultGetLocalIdent;
-module.exports = loader.default;
+module.exports = loader.default;
+module.exports.defaultGetLocalIdent = require("./utils").defaultGetLocalIdent;

package/dist/index.js

@@ -4,59 +4,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = loader;
-
 var _postcss = _interopRequireDefault(require("postcss"));
-
 var _package = _interopRequireDefault(require("postcss/package.json"));
-
 var _semver = require("semver");
-
 var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
-
 var _Warning = _interopRequireDefault(require("./Warning"));
-
 var _options = _interopRequireDefault(require("./options.json"));
-
 var _plugins = require("./plugins");
-
 var _utils = require("./utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
+
 async function loader(content, map, meta) {
   const rawOptions = this.getOptions(_options.default);
   const plugins = [];
   const callback = this.async();
   let options;
-
   try {
     options = (0, _utils.normalizeOptions)(rawOptions, this);
   } catch (error) {
     callback(error);
     return;
   }
-
   const replacements = [];
   const exports = [];
-
   if ((0, _utils.shouldUseModulesPlugins)(options)) {
     plugins.push(...(0, _utils.getModulesPlugins)(options, this));
   }
-
   const importPluginImports = [];
   const importPluginApi = [];
-  let isSupportAbsoluteURL = false; // TODO enable by default in the next major release
+  let isSupportAbsoluteURL = false;
 
+  // TODO enable by default in the next major release
   if (this._compilation && this._compilation.options && this._compilation.options.experiments && this._compilation.options.experiments.buildHttp) {
     isSupportAbsoluteURL = true;
   }
-
   const isSupportDataURL = options.esModule && Boolean("fsStartTime" in this._compiler);
-
   if ((0, _utils.shouldUseImportPlugin)(options)) {
     plugins.push((0, _plugins.importParser)({
       isSupportAbsoluteURL: false,
@@ -69,9 +55,7 @@ async function loader(content, map, meta) {
       urlHandler: url => (0, _utils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
   }
-
   const urlPluginImports = [];
-
   if ((0, _utils.shouldUseURLPlugin)(options)) {
     const needToResolveURL = !options.esModule;
     plugins.push((0, _plugins.urlParser)({
@@ -85,17 +69,17 @@ async function loader(content, map, meta) {
       resolver: needToResolveURL ? this.getResolve({
         mainFiles: [],
         extensions: []
-      }) : // eslint-disable-next-line no-undefined
+      }) :
+      // eslint-disable-next-line no-undefined
       undefined,
-      urlHandler: url => (0, _utils.stringifyRequest)(this, url) // Support data urls as input in new URL added in webpack@5.38.0
-
+      urlHandler: url => (0, _utils.stringifyRequest)(this, url)
+      // Support data urls as input in new URL added in webpack@5.38.0
     }));
   }
 
   const icssPluginImports = [];
   const icssPluginApi = [];
   const needToUseIcssPlugin = (0, _utils.shouldUseIcssPlugin)(options);
-
   if (needToUseIcssPlugin) {
     plugins.push((0, _plugins.icssParser)({
       loaderContext: this,
@@ -105,25 +89,22 @@ async function loader(content, map, meta) {
       exports,
       urlHandler: url => (0, _utils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
-  } // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
-
+  }
 
+  // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
   if (meta) {
     const {
       ast
     } = meta;
-
     if (ast && ast.type === "postcss" && (0, _semver.satisfies)(ast.version, `^${_package.default.version}`)) {
       // eslint-disable-next-line no-param-reassign
       content = ast.root;
     }
   }
-
   const {
     resourcePath
   } = this;
   let result;
-
   try {
     result = await (0, _postcss.default)(plugins).process(content, {
       hideNothingWarning: true,
@@ -139,25 +120,20 @@ async function loader(content, map, meta) {
     if (error.file) {
       this.addDependency(error.file);
     }
-
     callback(error.name === "CssSyntaxError" ? new _CssSyntaxError.default(error) : error);
     return;
   }
-
   for (const warning of result.warnings()) {
     this.emitWarning(new _Warning.default(warning));
   }
-
   const imports = [].concat(icssPluginImports.sort(_utils.sort)).concat(importPluginImports.sort(_utils.sort)).concat(urlPluginImports.sort(_utils.sort));
   const api = [].concat(importPluginApi.sort(_utils.sort)).concat(icssPluginApi.sort(_utils.sort));
-
   if (options.modules.exportOnlyLocals !== true) {
     imports.unshift({
       type: "api_import",
       importName: "___CSS_LOADER_API_IMPORT___",
       url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/api"))
     });
-
     if (options.sourceMap) {
       imports.unshift({
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
@@ -170,17 +146,14 @@ async function loader(content, map, meta) {
       });
     }
   }
-
   const importCode = (0, _utils.getImportCode)(imports, options);
   let moduleCode;
-
   try {
     moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
   } catch (error) {
     callback(error);
     return;
   }
-
   const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

package/dist/plugins/index.js

@@ -21,11 +21,7 @@ Object.defineProperty(exports, "urlParser", {
     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 }; }

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

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _icssUtils = require("icss-utils");
-
 var _utils = require("../utils");
-
 const plugin = (options = {}) => {
   return {
     postcssPlugin: "postcss-icss-parser",
-
     async OnceExit(root) {
       const importReplacements = Object.create(null);
       const {
@@ -31,59 +27,48 @@ const plugin = (options = {}) => {
         mainFields: ["css", "style", "main", "..."],
         mainFiles: ["index", "..."],
         preferRelative: true
-      }); // eslint-disable-next-line guard-for-in
+      });
 
+      // 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), loaderContext.rootContext);
-
         const doResolve = async () => {
           const resolvedUrl = await (0, _utils.resolveRequests)(resolver, loaderContext.context, [...new Set([normalizedUrl, request])]);
-
           if (!resolvedUrl) {
             return;
-          } // eslint-disable-next-line consistent-return
-
+          }
 
+          // eslint-disable-next-line consistent-return
           return {
             url: resolvedUrl,
             prefix,
             tokens
           };
         };
-
         tasks.push(doResolve());
       }
-
       const results = await Promise.all(tasks);
-
       for (let index = 0; index <= results.length - 1; index++) {
         const item = results[index];
-
         if (!item) {
           // eslint-disable-next-line no-continue
           continue;
         }
-
         const newUrl = item.prefix ? `${item.prefix}!${item.url}` : item.url;
         const importKey = newUrl;
         let importName = imports.get(importKey);
-
         if (!importName) {
           importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
           imports.set(importKey, importName);
@@ -100,7 +85,6 @@ const plugin = (options = {}) => {
             index
           });
         }
-
         for (const [replacementIndex, token] of Object.keys(item.tokens).entries()) {
           const replacementName = `___CSS_LOADER_ICSS_IMPORT_${index}_REPLACEMENT_${replacementIndex}___`;
           const localName = item.tokens[token];
@@ -112,11 +96,9 @@ const plugin = (options = {}) => {
           });
         }
       }
-
       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({
@@ -125,10 +107,8 @@ const plugin = (options = {}) => {
         });
       }
     }
-
   };
 };
-
 plugin.postcss = true;
 var _default = plugin;
 exports.default = _default;