css-loader 5.2.7 → 6.3.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;
@@ -59,40 +51,36 @@ async function loader(content, map, meta) {
   const importPluginApi = [];
 
   if ((0, _utils.shouldUseImportPlugin)(options)) {
-    const resolver = this.getResolve({
-      conditionNames: ["style"],
-      extensions: [".css"],
-      mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."]
-    });
     plugins.push((0, _plugins.importParser)({
+      isCSSStyleSheet: options.exportType === "css-style-sheet",
+      loaderContext: this,
       imports: importPluginImports,
       api: importPluginApi,
-      context: this.context,
-      rootContext: this.rootContext,
-      filter: (0, _utils.getFilter)(options.import, this.resourcePath),
-      resolver,
-      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
+      filter: options.import.filter,
+      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
     }));
   }
 
@@ -101,21 +89,13 @@ async function loader(content, map, meta) {
   const needToUseIcssPlugin = (0, _utils.shouldUseIcssPlugin)(options);
 
   if (needToUseIcssPlugin) {
-    const icssResolver = this.getResolve({
-      conditionNames: ["style"],
-      extensions: [],
-      mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."]
-    });
     plugins.push((0, _plugins.icssParser)({
+      loaderContext: this,
       imports: icssPluginImports,
       api: icssPluginApi,
       replacements,
       exports,
-      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 +145,34 @@ 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({
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
-        url: (0, _loaderUtils.stringifyRequest)(this, require.resolve("./runtime/cssWithMappingToString"))
+        url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/sourceMaps"))
+      });
+    } else {
+      imports.unshift({
+        importName: "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___",
+        url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/noSourceMaps"))
       });
     }
   }
 
   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
             },
-            "localIdentHashPrefix": {
-              "description": "Allows to add custom hash to generate more unique classes (https://github.com/webpack-contrib/css-loader#localidenthashprefix).",
+            "localIdentHashFunction": {
+              "description": "Allows to specify hash function to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashfunction",
               "type": "string",
               "minLength": 1
             },
+            "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,8 +190,14 @@
       ]
     },
     "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"
+    },
+    "exportType": {
+      "description": "Allows exporting styles as array with modules, string or constructable stylesheet (i.e. `CSSStyleSheet`).",
+      "link": "https://github.com/webpack-contrib/css-loader#exporttype",
+      "enum": ["array", "string", "css-style-sheet"]
     }
   },
   "type": "object"

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

@@ -20,7 +20,18 @@ const plugin = (options = {}) => {
         icssExports
       } = (0, _icssUtils.extractICSS)(root);
       const imports = new Map();
-      const tasks = []; // eslint-disable-next-line guard-for-in
+      const tasks = [];
+      const {
+        loaderContext
+      } = options;
+      const resolver = loaderContext.getResolve({
+        dependencyType: "icss",
+        conditionNames: ["style"],
+        extensions: ["..."],
+        mainFields: ["css", "style", "main", "..."],
+        mainFiles: ["index", "..."],
+        preferRelative: true
+      }); // eslint-disable-next-line guard-for-in
 
       for (const url in icssImports) {
         const tokens = icssImports[url];
@@ -39,14 +50,10 @@ const plugin = (options = {}) => {
           prefix = queryParts.join("!");
         }
 
-        const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
+        const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), loaderContext.rootContext);
 
         const doResolve = async () => {
-          const {
-            resolver,
-            context
-          } = options;
-          const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
+          const resolvedUrl = await (0, _utils.resolveRequests)(resolver, loaderContext.context, [...new Set([normalizedUrl, request])]);
 
           if (!resolvedUrl) {
             return;
@@ -81,6 +88,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

@@ -43,9 +43,10 @@ function parseNode(atRule, key) {
     throw error;
   }
 
+  const rawParams = atRule.raws && atRule.raws[key] && typeof atRule.raws[key].raw !== "undefined" ? atRule.raws[key].raw : atRule[key];
   const {
     nodes: paramsNodes
-  } = (0, _postcssValueParser.default)(atRule[key]); // No nodes - `@import ;`
+  } = (0, _postcssValueParser.default)(rawParams); // No nodes - `@import ;`
   // Invalid type - `@import foo-bar;`
 
   if (paramsNodes.length === 0 || paramsNodes[0].type !== "string" && paramsNodes[0].type !== "function") {
@@ -92,11 +93,42 @@ function parseNode(atRule, key) {
     throw error;
   }
 
-  const mediaNodes = paramsNodes.slice(1);
+  const additionalNodes = paramsNodes.slice(1);
+  let supports;
+  let layer;
   let media;
 
-  if (mediaNodes.length > 0) {
-    media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
+  if (additionalNodes.length > 0) {
+    let nodes = [];
+
+    for (const node of additionalNodes) {
+      nodes.push(node);
+      const isLayerFunction = node.type === "function" && node.value.toLowerCase() === "layer";
+      const isLayerWord = node.type === "word" && node.value.toLowerCase() === "layer";
+
+      if (isLayerFunction || isLayerWord) {
+        if (isLayerFunction) {
+          nodes.splice(nodes.length - 1, 1, ...node.nodes);
+        } else {
+          nodes.splice(nodes.length - 1, 1, {
+            type: "string",
+            value: "",
+            unclosed: false
+          });
+        }
+
+        layer = _postcssValueParser.default.stringify(nodes).trim().toLowerCase();
+        nodes = [];
+      } else if (node.type === "function" && node.value.toLowerCase() === "supports") {
+        nodes.splice(nodes.length - 1, 1, ...node.nodes);
+        supports = _postcssValueParser.default.stringify(nodes).trim().toLowerCase();
+        nodes = [];
+      }
+    }
+
+    if (nodes.length > 0) {
+      media = _postcssValueParser.default.stringify(nodes).trim().toLowerCase();
+    }
   } // eslint-disable-next-line consistent-return
 
 
@@ -104,6 +136,8 @@ function parseNode(atRule, key) {
     atRule,
     prefix,
     url,
+    layer,
+    supports,
     media,
     isRequestable
   };
@@ -118,6 +152,11 @@ const plugin = (options = {}) => {
       return {
         AtRule: {
           import(atRule) {
+            if (options.isCSSStyleSheet) {
+              options.loaderContext.emitError(new Error(atRule.error("'@import' rules are not allowed here and will not be processed").message));
+              return;
+            }
+
             let parsedAtRule;
 
             try {
@@ -142,17 +181,30 @@ const plugin = (options = {}) => {
             return;
           }
 
+          const {
+            loaderContext
+          } = options;
+          const resolver = loaderContext.getResolve({
+            dependencyType: "css",
+            conditionNames: ["style"],
+            mainFields: ["css", "style", "main", "..."],
+            mainFiles: ["index", "..."],
+            extensions: [".css", "..."],
+            preferRelative: true
+          });
           const resolvedAtRules = await Promise.all(parsedAtRules.map(async parsedAtRule => {
             const {
               atRule,
               isRequestable,
               prefix,
               url,
+              layer,
+              supports,
               media
             } = parsedAtRule;
 
             if (options.filter) {
-              const needKeep = await options.filter(url, media);
+              const needKeep = await options.filter(url, media, loaderContext.resourcePath, supports, layer);
 
               if (!needKeep) {
                 return;
@@ -160,21 +212,24 @@ const plugin = (options = {}) => {
             }
 
             if (isRequestable) {
-              const request = (0, _utils.requestify)(url, options.rootContext);
-              const {
-                resolver,
-                context
-              } = options;
-              const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, url])]);
+              const request = (0, _utils.requestify)(url, loaderContext.rootContext);
+              const resolvedUrl = await (0, _utils.resolveRequests)(resolver, loaderContext.context, [...new Set([request, url])]);
 
               if (!resolvedUrl) {
                 return;
               }
 
+              if (resolvedUrl === loaderContext.resourcePath) {
+                atRule.remove();
+                return;
+              }
+
               atRule.remove(); // eslint-disable-next-line consistent-return
 
               return {
                 url: resolvedUrl,
+                layer,
+                supports,
                 media,
                 prefix,
                 isRequestable
@@ -185,6 +240,8 @@ const plugin = (options = {}) => {
 
             return {
               url,
+              layer,
+              supports,
               media,
               prefix,
               isRequestable
@@ -203,12 +260,16 @@ const plugin = (options = {}) => {
             const {
               url,
               isRequestable,
+              layer,
+              supports,
               media
             } = resolvedAtRule;
 
             if (!isRequestable) {
               options.api.push({
                 url,
+                layer,
+                supports,
                 media,
                 index
               }); // eslint-disable-next-line no-continue
@@ -226,6 +287,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
@@ -234,6 +296,8 @@ const plugin = (options = {}) => {
 
             options.api.push({
               importName,
+              layer,
+              supports,
               media,
               index
             });