css-loader 5.2.6 → 6.2.0

package/dist/index.js

@@ -5,14 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = loader;
 
-var _loaderUtils = require("loader-utils");
-
 var _postcss = _interopRequireDefault(require("postcss"));
 
 var _package = _interopRequireDefault(require("postcss/package.json"));
 
-var _schemaUtils = require("schema-utils");
-
 var _semver = require("semver");
 
 var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
@@ -32,11 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   Author Tobias Koppers @sokra
 */
 async function loader(content, map, meta) {
-  const rawOptions = (0, _loaderUtils.getOptions)(this);
-  (0, _schemaUtils.validate)(_options.default, rawOptions, {
-    name: "CSS Loader",
-    baseDataPath: "options"
-  });
+  const rawOptions = this.getOptions(_options.default);
   const plugins = [];
   const callback = this.async();
   let options;
@@ -60,39 +52,45 @@ async function loader(content, map, meta) {
 
   if ((0, _utils.shouldUseImportPlugin)(options)) {
     const resolver = this.getResolve({
+      dependencyType: "css",
       conditionNames: ["style"],
-      extensions: [".css"],
       mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."]
+      mainFiles: ["index", "..."],
+      extensions: [".css", "..."],
+      preferRelative: true
     });
     plugins.push((0, _plugins.importParser)({
       imports: importPluginImports,
       api: importPluginApi,
       context: this.context,
       rootContext: this.rootContext,
-      filter: (0, _utils.getFilter)(options.import, this.resourcePath),
+      resourcePath: this.resourcePath,
+      filter: (0, _utils.getFilter)(options.import.filter, this.resourcePath),
       resolver,
-      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
+      urlHandler: url => (0, _utils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
   }
 
   const urlPluginImports = [];
 
   if ((0, _utils.shouldUseURLPlugin)(options)) {
-    const urlResolver = this.getResolve({
-      conditionNames: ["asset"],
-      mainFields: ["asset"],
-      mainFiles: [],
-      extensions: []
-    });
+    const needToResolveURL = !options.esModule;
+    const isSupportDataURLInNewURL = options.esModule && Boolean("fsStartTime" in this._compiler);
     plugins.push((0, _plugins.urlParser)({
       imports: urlPluginImports,
       replacements,
       context: this.context,
       rootContext: this.rootContext,
-      filter: (0, _utils.getFilter)(options.url, this.resourcePath),
-      resolver: urlResolver,
-      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, url)
+      filter: (0, _utils.getFilter)(options.url.filter, this.resourcePath),
+      needToResolveURL,
+      resolver: needToResolveURL ? this.getResolve({
+        mainFiles: [],
+        extensions: []
+      }) : // 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
+      isSupportDataURLInNewURL
     }));
   }
 
@@ -102,10 +100,12 @@ async function loader(content, map, meta) {
 
   if (needToUseIcssPlugin) {
     const icssResolver = this.getResolve({
+      dependencyType: "icss",
       conditionNames: ["style"],
-      extensions: [],
+      extensions: ["..."],
       mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."]
+      mainFiles: ["index", "..."],
+      preferRelative: true
     });
     plugins.push((0, _plugins.icssParser)({
       imports: icssPluginImports,
@@ -115,7 +115,7 @@ async function loader(content, map, meta) {
       context: this.context,
       rootContext: this.rootContext,
       resolver: icssResolver,
-      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
+      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
 
@@ -165,20 +165,30 @@ async function loader(content, map, meta) {
 
   if (options.modules.exportOnlyLocals !== true) {
     imports.unshift({
+      type: "api_import",
       importName: "___CSS_LOADER_API_IMPORT___",
-      url: (0, _loaderUtils.stringifyRequest)(this, require.resolve("./runtime/api"))
+      url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/api"))
     });
 
     if (options.sourceMap) {
       imports.unshift({
+        type: "api_sourcemap_import",
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
-        url: (0, _loaderUtils.stringifyRequest)(this, require.resolve("./runtime/cssWithMappingToString"))
+        url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/cssWithMappingToString"))
       });
     }
   }
 
   const importCode = (0, _utils.getImportCode)(imports, options);
-  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
+  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/options.json

@@ -1,47 +1,60 @@
 {
+  "title": "CSS Loader options",
   "additionalProperties": false,
   "properties": {
     "url": {
-      "description": "Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).",
+      "description": "Allows to enables/disables `url()`/`image-set()` functions handling.",
+      "link": "https://github.com/webpack-contrib/css-loader#url",
       "anyOf": [
         {
           "type": "boolean"
         },
         {
-          "instanceof": "Function"
+          "type": "object",
+          "properties": {
+            "filter": {
+              "instanceof": "Function"
+            }
+          },
+          "additionalProperties": false
         }
       ]
     },
     "import": {
-      "description": "Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).",
+      "description": "Allows to enables/disables `@import` at-rules handling.",
+      "link": "https://github.com/webpack-contrib/css-loader#import",
       "anyOf": [
         {
           "type": "boolean"
         },
         {
-          "instanceof": "Function"
+          "type": "object",
+          "properties": {
+            "filter": {
+              "instanceof": "Function"
+            }
+          },
+          "additionalProperties": false
         }
       ]
     },
     "modules": {
-      "description": "Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).",
+      "description": "Allows to enable/disable CSS Modules or ICSS and setup configuration.",
+      "link": "https://github.com/webpack-contrib/css-loader#modules",
       "anyOf": [
         {
           "type": "boolean"
         },
         {
-          "enum": ["local", "global", "pure"]
+          "enum": ["local", "global", "pure", "icss"]
         },
         {
           "type": "object",
           "additionalProperties": false,
           "properties": {
-            "compileType": {
-              "description": "Controls the extent to which css-loader will process module code (https://github.com/webpack-contrib/css-loader#type)",
-              "enum": ["module", "icss"]
-            },
             "auto": {
-              "description": "Allows auto enable CSS modules based on filename (https://github.com/webpack-contrib/css-loader#auto).",
+              "description": "Allows auto enable CSS modules based on filename.",
+              "link": "https://github.com/webpack-contrib/css-loader#auto",
               "anyOf": [
                 {
                   "instanceof": "RegExp"
@@ -55,10 +68,11 @@
               ]
             },
             "mode": {
-              "description": "Setup `mode` option (https://github.com/webpack-contrib/css-loader#mode).",
+              "description": "Setup `mode` option.",
+              "link": "https://github.com/webpack-contrib/css-loader#mode",
               "anyOf": [
                 {
-                  "enum": ["local", "global", "pure"]
+                  "enum": ["local", "global", "pure", "icss"]
                 },
                 {
                   "instanceof": "Function"
@@ -66,22 +80,43 @@
               ]
             },
             "localIdentName": {
-              "description": "Allows to configure the generated local ident name (https://github.com/webpack-contrib/css-loader#localidentname).",
+              "description": "Allows to configure the generated local ident name.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidentname",
               "type": "string",
               "minLength": 1
             },
             "localIdentContext": {
-              "description": "Allows to redefine basic loader context for local ident name (https://github.com/webpack-contrib/css-loader#localidentcontext).",
+              "description": "Allows to redefine basic loader context for local ident name.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidentcontext",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashSalt": {
+              "description": "Allows to add custom hash to generate more unique classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashsalt",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashFunction": {
+              "description": "Allows to specify hash function to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashfunction",
               "type": "string",
               "minLength": 1
             },
-            "localIdentHashPrefix": {
-              "description": "Allows to add custom hash to generate more unique classes (https://github.com/webpack-contrib/css-loader#localidenthashprefix).",
+            "localIdentHashDigest": {
+              "description": "Allows to specify hash digest to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashdigest",
               "type": "string",
               "minLength": 1
             },
+            "localIdentHashDigestLength": {
+              "description": "Allows to specify hash digest length to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashdigestlength",
+              "type": "number"
+            },
             "localIdentRegExp": {
-              "description": "Allows to specify custom RegExp for local ident name (https://github.com/webpack-contrib/css-loader#localidentregexp).",
+              "description": "Allows to specify custom RegExp for local ident name.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidentregexp",
               "anyOf": [
                 {
                   "type": "string",
@@ -93,29 +128,41 @@
               ]
             },
             "getLocalIdent": {
-              "description": "Allows to specify a function to generate the classname (https://github.com/webpack-contrib/css-loader#getlocalident).",
+              "description": "Allows to specify a function to generate the classname.",
+              "link": "https://github.com/webpack-contrib/css-loader#getlocalident",
               "instanceof": "Function"
             },
             "namedExport": {
-              "description": "Enables/disables ES modules named export for locals (https://github.com/webpack-contrib/css-loader#namedexport).",
+              "description": "Enables/disables ES modules named export for locals.",
+              "link": "https://github.com/webpack-contrib/css-loader#namedexport",
               "type": "boolean"
             },
             "exportGlobals": {
-              "description": "Allows to export names from global class or id, so you can use that as local name (https://github.com/webpack-contrib/css-loader#exportglobals).",
+              "description": "Allows to export names from global class or id, so you can use that as local name.",
+              "link": "https://github.com/webpack-contrib/css-loader#exportglobals",
               "type": "boolean"
             },
             "exportLocalsConvention": {
-              "description": "Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention).",
-              "enum": [
-                "asIs",
-                "camelCase",
-                "camelCaseOnly",
-                "dashes",
-                "dashesOnly"
+              "description": "Style of exported classnames.",
+              "link": "https://github.com/webpack-contrib/css-loader#localsconvention",
+              "anyOf": [
+                {
+                  "enum": [
+                    "asIs",
+                    "camelCase",
+                    "camelCaseOnly",
+                    "dashes",
+                    "dashesOnly"
+                  ]
+                },
+                {
+                  "instanceof": "Function"
+                }
               ]
             },
             "exportOnlyLocals": {
-              "description": "Export only locals (https://github.com/webpack-contrib/css-loader#exportonlylocals).",
+              "description": "Export only locals.",
+              "link": "https://github.com/webpack-contrib/css-loader#exportonlylocals",
               "type": "boolean"
             }
           }
@@ -123,11 +170,13 @@
       ]
     },
     "sourceMap": {
-      "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
+      "description": "Allows to enable/disable source maps.",
+      "link": "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).",
+      "description": "Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports.",
+      "link": "https://github.com/webpack-contrib/css-loader#importloaders",
       "anyOf": [
         {
           "type": "boolean"
@@ -141,7 +190,8 @@
       ]
     },
     "esModule": {
-      "description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
+      "description": "Use the ES modules syntax.",
+      "link": "https://github.com/webpack-contrib/css-loader#esmodule",
       "type": "boolean"
     }
   },

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

@@ -81,6 +81,7 @@ const plugin = (options = {}) => {
           importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
           imports.set(importKey, importName);
           options.imports.push({
+            type: "icss_import",
             importName,
             url: options.urlHandler(newUrl),
             icss: true,

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

@@ -171,6 +171,11 @@ const plugin = (options = {}) => {
                 return;
               }
 
+              if (resolvedUrl === options.resourcePath) {
+                atRule.remove();
+                return;
+              }
+
               atRule.remove(); // eslint-disable-next-line consistent-return
 
               return {
@@ -226,6 +231,7 @@ const plugin = (options = {}) => {
               importName = `___CSS_LOADER_AT_RULE_IMPORT_${urlToNameMap.size}___`;
               urlToNameMap.set(newUrl, importName);
               options.imports.push({
+                type: "rule_import",
                 importName,
                 url: options.urlHandler(newUrl),
                 index

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

@@ -49,7 +49,7 @@ function getWebpackIgnoreCommentValue(index, nodes, inBetween) {
   return matched && matched[2] === "true";
 }
 
-function shouldHandleURL(url, declaration, result) {
+function shouldHandleURL(url, declaration, result, isSupportDataURLInNewURL) {
   if (url.length === 0) {
     result.warn(`Unable to find uri in '${declaration.toString()}'`, {
       node: declaration
@@ -57,6 +57,16 @@ function shouldHandleURL(url, declaration, result) {
     return false;
   }
 
+  if ((0, _utils.isDataUrl)(url) && isSupportDataURLInNewURL) {
+    try {
+      decodeURIComponent(url);
+    } catch (ignoreError) {
+      return false;
+    }
+
+    return true;
+  }
+
   if (!(0, _utils.isUrlRequestable)(url)) {
     return false;
   }
@@ -64,7 +74,7 @@ function shouldHandleURL(url, declaration, result) {
   return true;
 }
 
-function parseDeclaration(declaration, key, result) {
+function parseDeclaration(declaration, key, result, isSupportDataURLInNewURL) {
   if (!needParseDeclaration.test(declaration[key])) {
     return;
   }
@@ -118,7 +128,7 @@ function parseDeclaration(declaration, key, result) {
       let url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
       url = (0, _utils.normalizeUrl)(url, isStringValue); // Do not traverse inside `url`
 
-      if (!shouldHandleURL(url, declaration, result)) {
+      if (!shouldHandleURL(url, declaration, result, isSupportDataURLInNewURL)) {
         // eslint-disable-next-line consistent-return
         return false;
       }
@@ -168,7 +178,7 @@ function parseDeclaration(declaration, key, result) {
           let url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
           url = (0, _utils.normalizeUrl)(url, isStringValue); // Do not traverse inside `url`
 
-          if (!shouldHandleURL(url, declaration, result)) {
+          if (!shouldHandleURL(url, declaration, result, isSupportDataURLInNewURL)) {
             // eslint-disable-next-line consistent-return
             return false;
           }
@@ -204,7 +214,7 @@ function parseDeclaration(declaration, key, result) {
 
           let url = (0, _utils.normalizeUrl)(value, true); // Do not traverse inside `url`
 
-          if (!shouldHandleURL(url, declaration, result)) {
+          if (!shouldHandleURL(url, declaration, result, isSupportDataURLInNewURL)) {
             // eslint-disable-next-line consistent-return
             return false;
           }
@@ -245,7 +255,10 @@ const plugin = (options = {}) => {
       const parsedDeclarations = [];
       return {
         Declaration(declaration) {
-          const parsedURL = parseDeclaration(declaration, "value", result);
+          const {
+            isSupportDataURLInNewURL
+          } = options;
+          const parsedURL = parseDeclaration(declaration, "value", result, isSupportDataURLInNewURL);
 
           if (!parsedURL) {
             return;
@@ -268,15 +281,34 @@ const plugin = (options = {}) => {
               const needKeep = await options.filter(url);
 
               if (!needKeep) {
+                // eslint-disable-next-line consistent-return
                 return;
               }
             }
 
+            if ((0, _utils.isDataUrl)(url)) {
+              // eslint-disable-next-line consistent-return
+              return parsedDeclaration;
+            }
+
             const splittedUrl = url.split(/(\?)?#/);
             const [pathname, query, hashOrQuery] = splittedUrl;
             let hash = query ? "?" : "";
             hash += hashOrQuery ? `#${hashOrQuery}` : "";
-            const request = (0, _utils.requestify)(pathname, options.rootContext);
+            const {
+              needToResolveURL,
+              rootContext
+            } = options;
+            const request = (0, _utils.requestify)(pathname, rootContext, needToResolveURL);
+
+            if (!needToResolveURL) {
+              // eslint-disable-next-line consistent-return
+              return { ...parsedDeclaration,
+                url: request,
+                hash
+              };
+            }
+
             const {
               resolver,
               context
@@ -284,6 +316,7 @@ const plugin = (options = {}) => {
             const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, url])]);
 
             if (!resolvedUrl) {
+              // eslint-disable-next-line consistent-return
               return;
             } // eslint-disable-next-line consistent-return
 
@@ -307,6 +340,7 @@ const plugin = (options = {}) => {
 
             if (!hasUrlImportHelper) {
               options.imports.push({
+                type: "get_url_import",
                 importName: "___CSS_LOADER_GET_URL_IMPORT___",
                 url: options.urlHandler(require.resolve("../runtime/getUrl.js")),
                 index: -1
@@ -325,8 +359,9 @@ const plugin = (options = {}) => {
               importName = `___CSS_LOADER_URL_IMPORT_${urlToNameMap.size}___`;
               urlToNameMap.set(newUrl, importName);
               options.imports.push({
+                type: "url",
                 importName,
-                url: options.urlHandler(newUrl),
+                url: options.needToResolveURL ? options.urlHandler(newUrl) : JSON.stringify(newUrl),
                 index
               });
             }

package/dist/runtime/cssWithMappingToString.js

@@ -8,7 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -17,6 +17,10 @@ module.exports = function cssWithMappingToString(item) {
       content = _item[1],
       cssMapping = _item[3];
 
+  if (!cssMapping) {
+    return content;
+  }
+
   if (typeof btoa === "function") {
     // eslint-disable-next-line no-undef
     var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));

package/dist/runtime/getUrl.js

@@ -4,15 +4,14 @@ 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") {
+  if (!url) {
     return url;
-  } // If url is already wrapped in quotes, remove them
+  } // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+
 
+  url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them
 
   if (/^['"].*['"]$/.test(url)) {
     // eslint-disable-next-line no-param-reassign
@@ -26,7 +25,7 @@ module.exports = function (url, options) {
   // See https://drafts.csswg.org/css-values-3/#urls
 
 
-  if (/["'() \t\n]/.test(url) || options.needQuotes) {
+  if (/["'() \t\n]|(%20)/.test(url) || options.needQuotes) {
     return "\"".concat(url.replace(/"/g, '\\"').replace(/\n/g, "\\n"), "\"");
   }