feat: added data URLs import with new URL

Author: cap-Bernardito

src/index.js

@@ -102,6 +102,8 @@ export default async function loader(content, map, meta) {
         filter: getFilter(options.url.filter, this.resourcePath),
         resolver: urlResolver,
         urlHandler: (url) => stringifyRequest(this, url),
+        // Support data urls as input in new URL added in [email protected]
+        isSupportDataURLInNewURL: Boolean(this._compiler.fsStartTime),
       })
     );
   }

src/plugins/postcss-url-parser.js

@@ -5,6 +5,7 @@ import {
   requestify,
   resolveRequests,
   isUrlRequestable,
+  isDataUrl,
   WEBPACK_IGNORE_COMMENT_REGEXP,
 } from "../utils";
 
@@ -47,7 +48,7 @@ function getWebpackIgnoreCommentValue(index, nodes, inBetween) {
   return matched && matched[2] === "true";
 }
 
-function shouldHandleURL(url, declaration, result) {
+function shouldHandleURL(url, declaration, result, options) {
   if (url.length === 0) {
     result.warn(`Unable to find uri in '${declaration.toString()}'`, {
       node: declaration,
@@ -56,14 +57,24 @@ function shouldHandleURL(url, declaration, result) {
     return false;
   }
 
+  if (isDataUrl(url) && options.isSupportDataURLInNewURL) {
+    try {
+      decodeURIComponent(url);
+    } catch (ignoreError) {
+      return false;
+    }
+
+    return true;
+  }
+
   if (!isUrlRequestable(url)) {
     return false;
   }
 
   return true;
 }
 
-function parseDeclaration(declaration, key, result) {
+function parseDeclaration(declaration, key, result, options) {
   if (!needParseDeclaration.test(declaration[key])) {
     return;
   }
@@ -130,7 +141,7 @@ function parseDeclaration(declaration, key, result) {
       url = normalizeUrl(url, isStringValue);
 
       // Do not traverse inside `url`
-      if (!shouldHandleURL(url, declaration, result)) {
+      if (!shouldHandleURL(url, declaration, result, options)) {
         // eslint-disable-next-line consistent-return
         return false;
       }
@@ -186,7 +197,7 @@ function parseDeclaration(declaration, key, result) {
           url = normalizeUrl(url, isStringValue);
 
           // Do not traverse inside `url`
-          if (!shouldHandleURL(url, declaration, result)) {
+          if (!shouldHandleURL(url, declaration, result, options)) {
             // eslint-disable-next-line consistent-return
             return false;
           }
@@ -229,7 +240,7 @@ function parseDeclaration(declaration, key, result) {
           let url = normalizeUrl(value, true);
 
           // Do not traverse inside `url`
-          if (!shouldHandleURL(url, declaration, result)) {
+          if (!shouldHandleURL(url, declaration, result, options)) {
             // eslint-disable-next-line consistent-return
             return false;
           }
@@ -271,7 +282,12 @@ const plugin = (options = {}) => {
 
       return {
         Declaration(declaration) {
-          const parsedURL = parseDeclaration(declaration, "value", result);
+          const parsedURL = parseDeclaration(
+            declaration,
+            "value",
+            result,
+            options
+          );
 
           if (!parsedURL) {
             return;
@@ -288,10 +304,15 @@ const plugin = (options = {}) => {
             parsedDeclarations.map(async (parsedDeclaration) => {
               const { url } = parsedDeclaration;
 
+              if (isDataUrl(url)) {
+                return parsedDeclaration;
+              }
+
               if (options.filter) {
                 const needKeep = await options.filter(url);
 
                 if (!needKeep) {
+                  // eslint-disable-next-line consistent-return
                   return;
                 }
               }
@@ -310,6 +331,7 @@ const plugin = (options = {}) => {
               ]);
 
               if (!resolvedUrl) {
+                // eslint-disable-next-line consistent-return
                 return;
               }
 

src/utils.js

@@ -427,6 +427,18 @@ function defaultGetLocalIdent(
   return interpolatedFilename;
 }
 
+function fixedEncodeURIComponent(str) {
+  return str.replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16)}`);
+}
+
+function isDataUrl(url) {
+  if (/^data:/i.test(url)) {
+    return true;
+  }
+
+  return false;
+}
+
 const NATIVE_WIN32_PATH = /^[A-Z]:[/\\]|^\\\\/i;
 
 function normalizeUrl(url, isStringValue) {
@@ -450,6 +462,11 @@ function normalizeUrl(url, isStringValue) {
 
   normalizedUrl = unescape(normalizedUrl);
 
+  if (isDataUrl(url)) {
+    // Todo fixedEncodeURIComponent is workaround. Webpack resolver shouldn't handle "!" in dataURL
+    return fixedEncodeURIComponent(normalizedUrl);
+  }
+
   try {
     normalizedUrl = decodeURI(normalizedUrl);
   } catch (error) {
@@ -1142,4 +1159,5 @@ export {
   combineRequests,
   camelCase,
   stringifyRequest,
+  isDataUrl,
 };