css-loader 5.1.4 → 5.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.2.0](https://github.com/webpack-contrib/css-loader/compare/v5.1.4...v5.2.0) (2021-03-24)
+
+
+### Features
+
+* support async functions for `url` and `import` options ([#1277](https://github.com/webpack-contrib/css-loader/issues/1277)) ([c5062db](https://github.com/webpack-contrib/css-loader/commit/c5062db3fc849d882a07b9f2c9f66f00325c8896))
+
 ### [5.1.4](https://github.com/webpack-contrib/css-loader/compare/v5.1.3...v5.1.4) (2021-03-24)
 
 

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

@@ -11,22 +11,22 @@ var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function visitor(result, parsedResults, node, key) {
+function parseNode(atRule, key) {
   // Convert only top-level @import
-  if (node.parent.type !== "root") {
+  if (atRule.parent.type !== "root") {
     return;
   }
 
-  if (node.raws && node.raws.afterName && node.raws.afterName.trim().length > 0) {
-    const lastCommentIndex = node.raws.afterName.lastIndexOf("/*");
-    const matched = node.raws.afterName.slice(lastCommentIndex).match(_utils.webpackIgnoreCommentRegexp);
+  if (atRule.raws && atRule.raws.afterName && atRule.raws.afterName.trim().length > 0) {
+    const lastCommentIndex = atRule.raws.afterName.lastIndexOf("/*");
+    const matched = atRule.raws.afterName.slice(lastCommentIndex).match(_utils.webpackIgnoreCommentRegexp);
 
     if (matched && matched[2] === "true") {
       return;
     }
   }
 
-  const prevNode = node.prev();
+  const prevNode = atRule.prev();
 
   if (prevNode && prevNode.type === "comment") {
     const matched = prevNode.text.match(_utils.webpackIgnoreCommentRegexp);
@@ -37,23 +37,21 @@ function visitor(result, parsedResults, node, key) {
   } // Nodes do not exists - `@import url('http://') :root {}`
 
 
-  if (node.nodes) {
-    result.warn("It looks like you didn't end your @import statement correctly. Child nodes are attached to it.", {
-      node
-    });
-    return;
+  if (atRule.nodes) {
+    const error = new Error("It looks like you didn't end your @import statement correctly. Child nodes are attached to it.");
+    error.node = atRule;
+    throw error;
   }
 
   const {
     nodes: paramsNodes
-  } = (0, _postcssValueParser.default)(node[key]); // No nodes - `@import ;`
+  } = (0, _postcssValueParser.default)(atRule[key]); // No nodes - `@import ;`
   // Invalid type - `@import foo-bar;`
 
   if (paramsNodes.length === 0 || paramsNodes[0].type !== "string" && paramsNodes[0].type !== "function") {
-    result.warn(`Unable to find uri in "${node.toString()}"`, {
-      node
-    });
-    return;
+    const error = new Error(`Unable to find uri in "${atRule.toString()}"`);
+    error.node = atRule;
+    throw error;
   }
 
   let isStringValue;
@@ -65,30 +63,50 @@ function visitor(result, parsedResults, node, key) {
   } else {
     // Invalid function - `@import nourl(test.css);`
     if (paramsNodes[0].value.toLowerCase() !== "url") {
-      result.warn(`Unable to find uri in "${node.toString()}"`, {
-        node
-      });
-      return;
+      const error = new Error(`Unable to find uri in "${atRule.toString()}"`);
+      error.node = atRule;
+      throw error;
     }
 
     isStringValue = paramsNodes[0].nodes.length !== 0 && paramsNodes[0].nodes[0].type === "string";
     url = isStringValue ? paramsNodes[0].nodes[0].value : _postcssValueParser.default.stringify(paramsNodes[0].nodes);
+  }
+
+  url = (0, _utils.normalizeUrl)(url, isStringValue);
+  const isRequestable = (0, _utils.isUrlRequestable)(url);
+  let prefix;
+
+  if (isRequestable) {
+    const queryParts = url.split("!");
+
+    if (queryParts.length > 1) {
+      url = queryParts.pop();
+      prefix = queryParts.join("!");
+    }
   } // Empty url - `@import "";` or `@import url();`
 
 
   if (url.trim().length === 0) {
-    result.warn(`Unable to find uri in "${node.toString()}"`, {
-      node
-    });
-    return;
+    const error = new Error(`Unable to find uri in "${atRule.toString()}"`);
+    error.node = atRule;
+    throw error;
   }
 
-  parsedResults.push({
-    node,
+  const mediaNodes = paramsNodes.slice(1);
+  let media;
+
+  if (mediaNodes.length > 0) {
+    media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
+  } // eslint-disable-next-line consistent-return
+
+
+  return {
+    atRule,
+    prefix,
     url,
-    isStringValue,
-    mediaNodes: paramsNodes.slice(1)
-  });
+    media,
+    isRequestable
+  };
 }
 
 const plugin = (options = {}) => {
@@ -96,123 +114,94 @@ const plugin = (options = {}) => {
     postcssPlugin: "postcss-import-parser",
 
     prepare(result) {
-      const parsedResults = [];
+      const parsedAtRules = [];
       return {
         AtRule: {
           import(atRule) {
-            visitor(result, parsedResults, atRule, "params");
+            let parsedAtRule;
+
+            try {
+              parsedAtRule = parseNode(atRule, "params", result);
+            } catch (error) {
+              result.warn(error.message, {
+                node: error.node
+              });
+            }
+
+            if (!parsedAtRule) {
+              return;
+            }
+
+            parsedAtRules.push(parsedAtRule);
           }
 
         },
 
         async OnceExit() {
-          if (parsedResults.length === 0) {
+          if (parsedAtRules.length === 0) {
             return;
           }
 
-          const imports = new Map();
-          const tasks = [];
-
-          for (const parsedResult of parsedResults) {
+          const resolvedAtRules = await Promise.all(parsedAtRules.map(async parsedAtRule => {
             const {
-              node,
+              atRule,
+              isRequestable,
+              prefix,
               url,
-              isStringValue,
-              mediaNodes
-            } = parsedResult;
-            let normalizedUrl = url;
-            let prefix = "";
-            const isRequestable = (0, _utils.isUrlRequestable)(normalizedUrl);
-
-            if (isRequestable) {
-              const queryParts = normalizedUrl.split("!");
-
-              if (queryParts.length > 1) {
-                normalizedUrl = queryParts.pop();
-                prefix = queryParts.join("!");
-              }
-
-              normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue); // Empty url after normalize - `@import '\
-              // \
-              // \
-              // ';
+              media
+            } = parsedAtRule;
 
-              if (normalizedUrl.trim().length === 0) {
-                result.warn(`Unable to find uri in "${node.toString()}"`, {
-                  node
-                }); // eslint-disable-next-line no-continue
+            if (options.filter) {
+              const needKeep = await options.filter(url, media);
 
-                continue;
+              if (!needKeep) {
+                return null;
               }
             }
 
-            let media;
-
-            if (mediaNodes.length > 0) {
-              media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
-            }
-
-            if (options.filter && !options.filter(normalizedUrl, media)) {
-              // eslint-disable-next-line no-continue
-              continue;
-            }
-
-            node.remove();
+            atRule.remove();
 
             if (isRequestable) {
-              const request = (0, _utils.requestify)(normalizedUrl, options.rootContext);
-              tasks.push((async () => {
-                const {
-                  resolver,
-                  context
-                } = options;
-                const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
-                return {
-                  url: resolvedUrl,
-                  media,
-                  prefix,
-                  isRequestable
-                };
-              })());
-            } else {
-              tasks.push({
-                url,
+              const request = (0, _utils.requestify)(url, options.rootContext);
+              const {
+                resolver,
+                context
+              } = options;
+              const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, url])]);
+              return {
+                url: resolvedUrl,
                 media,
                 prefix,
                 isRequestable
-              });
+              };
             }
-          }
 
-          const results = await Promise.all(tasks);
+            return {
+              url,
+              media,
+              prefix,
+              isRequestable
+            };
+          }));
+          const urlToNameMap = new Map();
+
+          for (let index = 0; index <= resolvedAtRules.length - 1; index++) {
+            const resolvedAtRule = resolvedAtRules[index];
+
+            if (!resolvedAtRule) {
+              // eslint-disable-next-line no-continue
+              continue;
+            }
 
-          for (let index = 0; index <= results.length - 1; index++) {
             const {
               url,
               isRequestable,
               media
-            } = results[index];
-
-            if (isRequestable) {
-              const {
-                prefix
-              } = results[index];
-              const newUrl = prefix ? `${prefix}!${url}` : url;
-              const importKey = newUrl;
-              let importName = imports.get(importKey);
-
-              if (!importName) {
-                importName = `___CSS_LOADER_AT_RULE_IMPORT_${imports.size}___`;
-                imports.set(importKey, importName);
-                options.imports.push({
-                  importName,
-                  url: options.urlHandler(newUrl),
-                  index
-                });
-              }
+            } = resolvedAtRule;
 
+            if (!isRequestable) {
               options.api.push({
-                importName,
+                url,
                 media,
                 index
               }); // eslint-disable-next-line no-continue
@@ -220,8 +209,24 @@ const plugin = (options = {}) => {
               continue;
             }
 
+            const {
+              prefix
+            } = resolvedAtRule;
+            const newUrl = prefix ? `${prefix}!${url}` : url;
+            let importName = urlToNameMap.get(newUrl);
+
+            if (!importName) {
+              importName = `___CSS_LOADER_AT_RULE_IMPORT_${urlToNameMap.size}___`;
+              urlToNameMap.set(newUrl, importName);
+              options.imports.push({
+                importName,
+                url: options.urlHandler(newUrl),
+                index
+              });
+            }
+
             options.api.push({
-              url,
+              importName,
               media,
               index
             });

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

@@ -19,22 +19,6 @@ function getNodeFromUrlFunc(node) {
   return node.nodes && node.nodes[0];
 }
 
-function shouldHandleRule(rule, node, result) {
-  // https://www.w3.org/TR/css-syntax-3/#typedef-url-token
-  if (rule.url.replace(/^[\s]+|[\s]+$/g, "").length === 0) {
-    result.warn(`Unable to find uri in '${node.toString()}'`, {
-      node
-    });
-    return false;
-  }
-
-  if (!(0, _utils.isUrlRequestable)(rule.url)) {
-    return false;
-  }
-
-  return true;
-}
-
 function getWebpackIgnoreCommentValue(index, nodes, inBetween) {
   if (index === 0 && typeof inBetween !== "undefined") {
     return inBetween;
@@ -65,17 +49,32 @@ function getWebpackIgnoreCommentValue(index, nodes, inBetween) {
   return matched && matched[2] === "true";
 }
 
-function visitor(result, parsedResults, node, key) {
-  if (!needParseDeclaration.test(node[key])) {
+function shouldHandleURL(url, declaration, result) {
+  if (url.length === 0) {
+    result.warn(`Unable to find uri in '${declaration.toString()}'`, {
+      node: declaration
+    });
+    return false;
+  }
+
+  if (!(0, _utils.isUrlRequestable)(url)) {
+    return false;
+  }
+
+  return true;
+}
+
+function parseDeclaration(declaration, key, result) {
+  if (!needParseDeclaration.test(declaration[key])) {
     return;
   }
 
-  const parsed = (0, _postcssValueParser.default)(node.raws && node.raws.value && node.raws.value.raw ? node.raws.value.raw : node[key]);
+  const parsed = (0, _postcssValueParser.default)(declaration.raws && declaration.raws.value && declaration.raws.value.raw ? declaration.raws.value.raw : declaration[key]);
   let inBetween;
 
-  if (node.raws && node.raws.between) {
-    const lastCommentIndex = node.raws.between.lastIndexOf("/*");
-    const matched = node.raws.between.slice(lastCommentIndex).match(_utils.webpackIgnoreCommentRegexp);
+  if (declaration.raws && declaration.raws.between) {
+    const lastCommentIndex = declaration.raws.between.lastIndexOf("/*");
+    const matched = declaration.raws.between.slice(lastCommentIndex).match(_utils.webpackIgnoreCommentRegexp);
 
     if (matched) {
       inBetween = matched[2] === "true";
@@ -83,7 +82,7 @@ function visitor(result, parsedResults, node, key) {
   }
 
   let isIgnoreOnDeclaration = false;
-  const prevNode = node.prev();
+  const prevNode = declaration.prev();
 
   if (prevNode && prevNode.type === "comment") {
     const matched = prevNode.text.match(_utils.webpackIgnoreCommentRegexp);
@@ -94,6 +93,7 @@ function visitor(result, parsedResults, node, key) {
   }
 
   let needIgnore;
+  const parsedURLs = [];
   parsed.walk((valueNode, index, valueNodes) => {
     if (valueNode.type !== "function") {
       return;
@@ -115,23 +115,30 @@ function visitor(result, parsedResults, node, key) {
         nodes
       } = valueNode;
       const isStringValue = nodes.length !== 0 && nodes[0].type === "string";
-      const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
-      const rule = {
-        node: getNodeFromUrlFunc(valueNode),
-        url,
-        needQuotes: false,
-        isStringValue
-      };
+      let url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
+      url = (0, _utils.normalizeUrl)(url, isStringValue); // Do not traverse inside `url`
 
-      if (shouldHandleRule(rule, node, result)) {
-        parsedResults.push({
-          node,
-          rule,
-          parsed
-        });
-      } // Do not traverse inside `url`
-      // eslint-disable-next-line consistent-return
+      if (!shouldHandleURL(url, declaration, result)) {
+        // eslint-disable-next-line consistent-return
+        return false;
+      }
 
+      const queryParts = url.split("!");
+      let prefix;
+
+      if (queryParts.length > 1) {
+        url = queryParts.pop();
+        prefix = queryParts.join("!");
+      }
+
+      parsedURLs.push({
+        declaration,
+        parsed,
+        node: getNodeFromUrlFunc(valueNode),
+        prefix,
+        url,
+        needQuotes: false
+      }); // eslint-disable-next-line consistent-return
 
       return false;
     } else if (isImageSetFunc.test(valueNode.value)) {
@@ -158,21 +165,30 @@ function visitor(result, parsedResults, node, key) {
             nodes
           } = nNode;
           const isStringValue = nodes.length !== 0 && nodes[0].type === "string";
-          const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
-          const rule = {
+          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)) {
+            // eslint-disable-next-line consistent-return
+            return false;
+          }
+
+          const queryParts = url.split("!");
+          let prefix;
+
+          if (queryParts.length > 1) {
+            url = queryParts.pop();
+            prefix = queryParts.join("!");
+          }
+
+          parsedURLs.push({
+            declaration,
+            parsed,
             node: getNodeFromUrlFunc(nNode),
+            prefix,
             url,
-            needQuotes: false,
-            isStringValue
-          };
-
-          if (shouldHandleRule(rule, node, result)) {
-            parsedResults.push({
-              node,
-              rule,
-              parsed
-            });
-          }
+            needQuotes: false
+          });
         } else if (type === "string") {
           needIgnore = getWebpackIgnoreCommentValue(innerIndex, valueNode.nodes);
 
@@ -186,20 +202,29 @@ function visitor(result, parsedResults, node, key) {
             continue;
           }
 
-          const rule = {
-            node: nNode,
-            url: value,
-            needQuotes: true,
-            isStringValue: true
-          };
-
-          if (shouldHandleRule(rule, node, result)) {
-            parsedResults.push({
-              node,
-              rule,
-              parsed
-            });
+          let url = (0, _utils.normalizeUrl)(value, true); // Do not traverse inside `url`
+
+          if (!shouldHandleURL(url, declaration, result)) {
+            // eslint-disable-next-line consistent-return
+            return false;
+          }
+
+          const queryParts = url.split("!");
+          let prefix;
+
+          if (queryParts.length > 1) {
+            url = queryParts.pop();
+            prefix = queryParts.join("!");
           }
+
+          parsedURLs.push({
+            declaration,
+            parsed,
+            node: nNode,
+            prefix,
+            url,
+            needQuotes: true
+          });
         }
       } // Do not traverse inside `image-set`
       // eslint-disable-next-line consistent-return
@@ -207,7 +232,9 @@ function visitor(result, parsedResults, node, key) {
 
       return false;
     }
-  });
+  }); // eslint-disable-next-line consistent-return
+
+  return parsedURLs;
 }
 
 const plugin = (options = {}) => {
@@ -215,39 +242,60 @@ const plugin = (options = {}) => {
     postcssPlugin: "postcss-url-parser",
 
     prepare(result) {
-      const parsedResults = [];
+      const parsedDeclarations = [];
       return {
         Declaration(declaration) {
-          visitor(result, parsedResults, declaration, "value");
+          const parsedURL = parseDeclaration(declaration, "value", result);
+
+          if (!parsedURL) {
+            return;
+          }
+
+          parsedDeclarations.push(...parsedURL);
         },
 
         async OnceExit() {
-          if (parsedResults.length === 0) {
+          if (parsedDeclarations.length === 0) {
             return;
           }
 
-          const tasks = [];
-          const imports = new Map();
-          const replacements = new Map();
-          let hasUrlImportHelper = false;
-
-          for (const parsedResult of parsedResults) {
+          const resolvedDeclarations = await Promise.all(parsedDeclarations.map(async parsedDeclaration => {
             const {
-              url,
-              isStringValue
-            } = parsedResult.rule;
-            let normalizedUrl = url;
-            let prefix = "";
-            const queryParts = normalizedUrl.split("!");
-
-            if (queryParts.length > 1) {
-              normalizedUrl = queryParts.pop();
-              prefix = queryParts.join("!");
+              url
+            } = parsedDeclaration;
+
+            if (options.filter) {
+              const needKeep = await options.filter(url);
+
+              if (!needKeep) {
+                return null;
+              }
             }
 
-            normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue);
+            const splittedUrl = url.split(/(\?)?#/);
+            const [pathname, query, hashOrQuery] = splittedUrl;
+            let hash = query ? "?" : "";
+            hash += hashOrQuery ? `#${hashOrQuery}` : "";
+            const request = (0, _utils.requestify)(pathname, options.rootContext);
+            const {
+              resolver,
+              context
+            } = options;
+            const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, url])]);
+            return { ...parsedDeclaration,
+              url: resolvedUrl,
+              hash
+            };
+          }));
+          const results = await Promise.all(resolvedDeclarations);
+          const urlToNameMap = new Map();
+          const urlToReplacementMap = new Map();
+          let hasUrlImportHelper = false;
 
-            if (!options.filter(normalizedUrl)) {
+          for (let index = 0; index <= results.length - 1; index++) {
+            const item = results[index];
+
+            if (!item) {
               // eslint-disable-next-line no-continue
               continue;
             }
@@ -261,46 +309,16 @@ const plugin = (options = {}) => {
               hasUrlImportHelper = true;
             }
 
-            const splittedUrl = normalizedUrl.split(/(\?)?#/);
-            const [pathname, query, hashOrQuery] = splittedUrl;
-            let hash = query ? "?" : "";
-            hash += hashOrQuery ? `#${hashOrQuery}` : "";
-            const request = (0, _utils.requestify)(pathname, options.rootContext);
-            tasks.push((async () => {
-              const {
-                resolver,
-                context
-              } = options;
-              const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
-              return {
-                url: resolvedUrl,
-                prefix,
-                hash,
-                parsedResult
-              };
-            })());
-          }
-
-          const results = await Promise.all(tasks);
-
-          for (let index = 0; index <= results.length - 1; index++) {
             const {
               url,
-              prefix,
-              hash,
-              parsedResult: {
-                node,
-                rule,
-                parsed
-              }
-            } = results[index];
+              prefix
+            } = item;
             const newUrl = prefix ? `${prefix}!${url}` : url;
-            const importKey = newUrl;
-            let importName = imports.get(importKey);
+            let importName = urlToNameMap.get(newUrl);
 
             if (!importName) {
-              importName = `___CSS_LOADER_URL_IMPORT_${imports.size}___`;
-              imports.set(importKey, importName);
+              importName = `___CSS_LOADER_URL_IMPORT_${urlToNameMap.size}___`;
+              urlToNameMap.set(newUrl, importName);
               options.imports.push({
                 importName,
                 url: options.urlHandler(newUrl),
@@ -309,18 +327,19 @@ const plugin = (options = {}) => {
             }
 
             const {
+              hash,
               needQuotes
-            } = rule;
+            } = item;
             const replacementKey = JSON.stringify({
               newUrl,
               hash,
               needQuotes
             });
-            let replacementName = replacements.get(replacementKey);
+            let replacementName = urlToReplacementMap.get(replacementKey);
 
             if (!replacementName) {
-              replacementName = `___CSS_LOADER_URL_REPLACEMENT_${replacements.size}___`;
-              replacements.set(replacementKey, replacementName);
+              replacementName = `___CSS_LOADER_URL_REPLACEMENT_${urlToReplacementMap.size}___`;
+              urlToReplacementMap.set(replacementKey, replacementName);
               options.replacements.push({
                 replacementName,
                 importName,
@@ -330,11 +349,11 @@ const plugin = (options = {}) => {
             } // eslint-disable-next-line no-param-reassign
 
 
-            rule.node.type = "word"; // eslint-disable-next-line no-param-reassign
+            item.node.type = "word"; // eslint-disable-next-line no-param-reassign
 
-            rule.node.value = replacementName; // eslint-disable-next-line no-param-reassign
+            item.node.value = replacementName; // eslint-disable-next-line no-param-reassign
 
-            node.value = parsed.toString();
+            item.declaration.value = item.parsed.toString();
           }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",