feat: support async functions for url and import options (#1277)

Author: DavidArchibald

src/plugins/postcss-import-parser.js

@@ -157,38 +157,50 @@ const plugin = (options = {}) => {
               media = valueParser.stringify(mediaNodes).trim().toLowerCase();
             }
 
-            if (options.filter && !options.filter(normalizedUrl, media)) {
-              // eslint-disable-next-line no-continue
-              continue;
-            }
-
-            node.remove();
+            tasks.push(
+              (async () => {
+                if (options.filter) {
+                  const processURL = await options.filter(normalizedUrl, media);
+                  if (!processURL) {
+                    return null;
+                  }
+                }
+
+                node.remove();
+
+                if (isRequestable) {
+                  const request = requestify(
+                    normalizedUrl,
+                    options.rootContext
+                  );
 
-            if (isRequestable) {
-              const request = requestify(normalizedUrl, options.rootContext);
-
-              tasks.push(
-                (async () => {
                   const { resolver, context } = options;
                   const resolvedUrl = await resolveRequests(resolver, context, [
                     ...new Set([request, normalizedUrl]),
                   ]);
 
                   return { url: resolvedUrl, media, prefix, isRequestable };
-                })()
-              );
-            } else {
-              tasks.push({ url, media, prefix, isRequestable });
-            }
+                }
+
+                return { url, media, prefix, isRequestable };
+              })()
+            );
           }
 
           const results = await Promise.all(tasks);
 
           for (let index = 0; index <= results.length - 1; index++) {
-            const { url, isRequestable, media } = results[index];
+            const item = results[index];
+
+            if (item === null) {
+              // eslint-disable-next-line no-continue
+              continue;
+            }
+
+            const { url, isRequestable, media } = item;
 
             if (isRequestable) {
-              const { prefix } = results[index];
+              const { prefix } = item;
               const newUrl = prefix ? `${prefix}!${url}` : url;
               const importKey = newUrl;
               let importName = imports.get(importKey);

src/plugins/postcss-url-parser.js

@@ -244,8 +244,6 @@ const plugin = (options = {}) => {
           const imports = new Map();
           const replacements = new Map();
 
-          let hasUrlImportHelper = false;
-
           for (const parsedResult of parsedResults) {
             const { url, isStringValue } = parsedResult.rule;
 
@@ -261,33 +259,21 @@ const plugin = (options = {}) => {
 
             normalizedUrl = normalizeUrl(normalizedUrl, isStringValue);
 
-            if (!options.filter(normalizedUrl)) {
-              // eslint-disable-next-line no-continue
-              continue;
-            }
-
-            if (!hasUrlImportHelper) {
-              options.imports.push({
-                importName: "___CSS_LOADER_GET_URL_IMPORT___",
-                url: options.urlHandler(
-                  require.resolve("../runtime/getUrl.js")
-                ),
-                index: -1,
-              });
-
-              hasUrlImportHelper = true;
-            }
+            tasks.push(
+              (async () => {
+                const processUrl = await options.filter(normalizedUrl);
+                if (!processUrl) {
+                  return null;
+                }
 
-            const splittedUrl = normalizedUrl.split(/(\?)?#/);
-            const [pathname, query, hashOrQuery] = splittedUrl;
+                const splittedUrl = normalizedUrl.split(/(\?)?#/);
+                const [pathname, query, hashOrQuery] = splittedUrl;
 
-            let hash = query ? "?" : "";
-            hash += hashOrQuery ? `#${hashOrQuery}` : "";
+                let hash = query ? "?" : "";
+                hash += hashOrQuery ? `#${hashOrQuery}` : "";
 
-            const request = requestify(pathname, options.rootContext);
+                const request = requestify(pathname, options.rootContext);
 
-            tasks.push(
-              (async () => {
                 const { resolver, context } = options;
                 const resolvedUrl = await resolveRequests(resolver, context, [
                   ...new Set([request, normalizedUrl]),
@@ -300,13 +286,34 @@ const plugin = (options = {}) => {
 
           const results = await Promise.all(tasks);
 
+          let hasUrlImportHelper = false;
+
           for (let index = 0; index <= results.length - 1; index++) {
+            const item = results[index];
+
+            if (item === null) {
+              // eslint-disable-next-line no-continue
+              continue;
+            }
+
+            if (!hasUrlImportHelper) {
+              options.imports.push({
+                importName: "___CSS_LOADER_GET_URL_IMPORT___",
+                url: options.urlHandler(
+                  require.resolve("../runtime/getUrl.js")
+                ),
+                index: -1,
+              });
+
+              hasUrlImportHelper = true;
+            }
+
             const {
               url,
               prefix,
               hash,
               parsedResult: { node, rule, parsed },
-            } = results[index];
+            } = item;
             const newUrl = prefix ? `${prefix}!${url}` : url;
             const importKey = newUrl;
             let importName = imports.get(importKey);