css-loader 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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)
+
+
+### Bug Fixes
+
+* crash with thread-loader ([#1281](https://github.com/webpack-contrib/css-loader/issues/1281)) ([7095a7c](https://github.com/webpack-contrib/css-loader/commit/7095a7ca7d985d5447aed80cf3e41a4f8c19b954))
+
+### [5.1.3](https://github.com/webpack-contrib/css-loader/compare/v5.1.2...v5.1.3) (2021-03-15)
+
+
+### Bug Fixes
+
+* the `auto` option works using inline module syntax ([#1274](https://github.com/webpack-contrib/css-loader/issues/1274)) ([1db2f4d](https://github.com/webpack-contrib/css-loader/commit/1db2f4df3ff9ae8f0667a2304853c8e7cdd0afc1))
+* ident generation for CSS modules using inline module syntax ([#1274](https://github.com/webpack-contrib/css-loader/issues/1274)) ([1db2f4d](https://github.com/webpack-contrib/css-loader/commit/1db2f4df3ff9ae8f0667a2304853c8e7cdd0afc1))
+
+### [5.1.2](https://github.com/webpack-contrib/css-loader/compare/v5.1.1...v5.1.2) (2021-03-10)
+
+
+### Bug Fixes
+
+* handling `@import` with spaces before and after and any extensions ([#1272](https://github.com/webpack-contrib/css-loader/issues/1272)) ([0c47cf7](https://github.com/webpack-contrib/css-loader/commit/0c47cf7ccbe3635900e8e8840650f69a7eca004d))
+* inline loader syntax in `@import` and modules ([3f49ed0](https://github.com/webpack-contrib/css-loader/commit/3f49ed0864457f9467f560856377c890c392aee7))
+
 ### [5.1.1](https://github.com/webpack-contrib/css-loader/compare/v5.1.0...v5.1.1) (2021-03-01)
 
 

package/dist/index.js

@@ -63,8 +63,7 @@ async function loader(content, map, meta) {
       conditionNames: ["style"],
       extensions: [".css"],
       mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."],
-      restrictions: [/\.css$/i]
+      mainFiles: ["index", "..."]
     });
     plugins.push((0, _plugins.importParser)({
       imports: importPluginImports,
@@ -73,7 +72,7 @@ async function loader(content, map, meta) {
       rootContext: this.rootContext,
       filter: (0, _utils.getFilter)(options.import, this.resourcePath),
       resolver,
-      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.getPreRequester)(this)(options.importLoaders) + url)
+      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
   }
 
@@ -115,7 +114,7 @@ async function loader(content, map, meta) {
       context: this.context,
       rootContext: this.rootContext,
       resolver: icssResolver,
-      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.getPreRequester)(this)(options.importLoaders) + url)
+      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
   } // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
 

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/dist/utils.js

@@ -21,6 +21,7 @@ exports.getExportCode = getExportCode;
 exports.resolveRequests = resolveRequests;
 exports.isUrlRequestable = isUrlRequestable;
 exports.sort = sort;
+exports.combineRequests = combineRequests;
 exports.webpackIgnoreCommentRegexp = void 0;
 
 var _url = require("url");
@@ -86,21 +87,21 @@ function escapeLocalIdent(localident) {
 }
 
 function defaultGetLocalIdent(loaderContext, localIdentName, localName, options) {
-  const {
-    context,
-    hashPrefix
-  } = options;
-  const {
-    resourcePath
-  } = loaderContext;
-  const request = normalizePath(_path.default.relative(context, resourcePath)); // eslint-disable-next-line no-param-reassign
+  let relativeMatchResource = ""; // eslint-disable-next-line no-underscore-dangle
+
+  if (loaderContext._module && loaderContext._module.matchResource) {
+    relativeMatchResource = `${normalizePath( // eslint-disable-next-line no-underscore-dangle
+    _path.default.relative(options.context, loaderContext._module.matchResource))}\x00`;
+  }
 
-  options.content = `${hashPrefix + request}\x00${localName}`;
+  const relativeResourcePath = normalizePath(_path.default.relative(options.context, loaderContext.resourcePath)); // eslint-disable-next-line no-param-reassign
+
+  options.content = `${options.hashPrefix}${relativeMatchResource}${relativeResourcePath}\x00${localName}`;
   return (0, _loaderUtils.interpolateName)(loaderContext, localIdentName, options);
 }
 
 function normalizeUrl(url, isStringValue) {
-  let normalizedUrl = url;
+  let normalizedUrl = url.replace(/^( |\t\n|\r\n|\r|\f)*/g, "").replace(/( |\t\n|\r\n|\r|\f)*$/g, "");
 
   if (isStringValue && /\\(\n|\r\n|\r|\f)/.test(normalizedUrl)) {
     normalizedUrl = normalizedUrl.replace(/\\(\n|\r\n|\r|\f)/g, "");
@@ -143,9 +144,8 @@ const moduleRegExp = /\.module(s)?\.\w+$/i;
 const icssRegExp = /\.icss\.\w+$/i;
 
 function getModulesOptions(rawOptions, loaderContext) {
-  const {
-    resourcePath
-  } = loaderContext;
+  const resourcePath = // eslint-disable-next-line no-underscore-dangle
+  loaderContext._module && loaderContext._module.matchResource || loaderContext.resourcePath;
   let isIcss;
 
   if (typeof rawOptions.modules === "undefined") {
@@ -643,4 +643,9 @@ function isUrlRequestable(url) {
 
 function sort(a, b) {
   return a.index - b.index;
+}
+
+function combineRequests(preRequest, url) {
+  const idx = url.indexOf("!=!");
+  return idx !== -1 ? url.slice(0, idx + 3) + preRequest + url.slice(idx + 3) : preRequest + url;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -33,8 +33,7 @@
     "pretest": "npm run lint",
     "test": "npm run test:coverage",
     "prepare": "npm run build",
-    "release": "standard-version",
-    "defaults": "webpack-defaults"
+    "release": "standard-version"
   },
   "files": [
     "dist"
@@ -47,7 +46,7 @@
     "cssesc": "^3.0.0",
     "icss-utils": "^5.1.0",
     "loader-utils": "^2.0.0",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.8",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
     "postcss-modules-scope": "^3.0.0",
@@ -57,20 +56,19 @@
     "semver": "^7.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.17",
-    "@babel/core": "^7.12.17",
-    "@babel/preset-env": "^7.12.17",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@webpack-contrib/defaults": "^6.3.0",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.6.3",
     "cross-env": "^7.0.3",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "es-check": "^5.2.0",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
+    "es-check": "^5.2.3",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "^6.2.0",
     "husky": "^4.3.8",
@@ -79,7 +77,7 @@
     "less-loader": "^7.1.0",
     "lint-staged": "^10.5.4",
     "memfs": "^3.2.0",
-    "mini-css-extract-plugin": "^1.3.8",
+    "mini-css-extract-plugin": "^1.3.9",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^4.0.4",
     "postcss-preset-env": "^6.7.0",
@@ -92,7 +90,7 @@
     "stylus": "^0.54.8",
     "stylus-loader": "^4.3.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.23.0"
+    "webpack": "^5.26.0"
   },
   "keywords": [
     "webpack",