feat: resolve data URI (#1328)

Author: cap-Bernardito

src/index.js

@@ -87,6 +87,8 @@ export default async function loader(content, map, meta) {
 
   if (shouldUseURLPlugin(options)) {
     const needToResolveURL = !options.esModule;
+    const isSupportDataURLInNewURL =
+      options.esModule && Boolean("fsStartTime" in this._compiler);
 
     plugins.push(
       urlParser({
@@ -101,6 +103,8 @@ export default async function loader(content, map, meta) {
           : // eslint-disable-next-line no-undefined
             undefined,
         urlHandler: (url) => stringifyRequest(this, url),
+        // Support data urls as input in new URL added in webpack@5.38.0
+        isSupportDataURLInNewURL,
       })
     );
   }

src/plugins/postcss-url-parser.js

@@ -5,6 +5,7 @@ import {
   normalizeUrl,
   requestify,
   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, isSupportDataURLInNewURL) {
   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) && 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, isSupportDataURLInNewURL) {
   if (!needParseDeclaration.test(declaration[key])) {
     return;
   }
@@ -130,7 +141,9 @@ function parseDeclaration(declaration, key, result) {
       url = normalizeUrl(url, isStringValue);
 
       // Do not traverse inside `url`
-      if (!shouldHandleURL(url, declaration, result)) {
+      if (
+        !shouldHandleURL(url, declaration, result, isSupportDataURLInNewURL)
+      ) {
         // eslint-disable-next-line consistent-return
         return false;
       }
@@ -186,7 +199,9 @@ function parseDeclaration(declaration, key, result) {
           url = normalizeUrl(url, isStringValue);
 
           // Do not traverse inside `url`
-          if (!shouldHandleURL(url, declaration, result)) {
+          if (
+            !shouldHandleURL(url, declaration, result, isSupportDataURLInNewURL)
+          ) {
             // eslint-disable-next-line consistent-return
             return false;
           }
@@ -229,7 +244,9 @@ 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, isSupportDataURLInNewURL)
+          ) {
             // eslint-disable-next-line consistent-return
             return false;
           }
@@ -271,7 +288,13 @@ const plugin = (options = {}) => {
 
       return {
         Declaration(declaration) {
-          const parsedURL = parseDeclaration(declaration, "value", result);
+          const { isSupportDataURLInNewURL } = options;
+          const parsedURL = parseDeclaration(
+            declaration,
+            "value",
+            result,
+            isSupportDataURLInNewURL
+          );
 
           if (!parsedURL) {
             return;
@@ -292,10 +315,16 @@ const plugin = (options = {}) => {
                 const needKeep = await options.filter(url);
 
                 if (!needKeep) {
+                  // eslint-disable-next-line consistent-return
                   return;
                 }
               }
 
+              if (isDataUrl(url)) {
+                // eslint-disable-next-line consistent-return
+                return parsedDeclaration;
+              }
+
               const splittedUrl = url.split(/(\?)?#/);
               const [pathname, query, hashOrQuery] = splittedUrl;
 
@@ -320,6 +349,7 @@ const plugin = (options = {}) => {
               ]);
 
               if (!resolvedUrl) {
+                // eslint-disable-next-line consistent-return
                 return;
               }
 

src/utils.js

@@ -390,6 +390,18 @@ function defaultGetLocalIdent(
   return loaderContext._compilation.getPath(localIdentName, data);
 }
 
+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) {
@@ -413,6 +425,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) {
@@ -1099,4 +1116,5 @@ export {
   combineRequests,
   camelCase,
   stringifyRequest,
+  isDataUrl,
 };