fix(less): handles rewriting relative paths passed Less's data-uri function. (#7400)

Author: bbotto-pdga

packages/playground/css/__tests__/css.spec.ts

@@ -388,3 +388,11 @@ test('import css in less', async () => {
   expect(await getColor('.css-in-less')).toBe('yellow')
   expect(await getColor('.css-in-less-2')).toBe('blue')
 })
+
+test("relative path rewritten in Less's data-uri", async () => {
+  // relative path passed to Less's data-uri is rewritten to absolute,
+  // the Less inlines it
+  expect(await getBg('.form-box-data-uri')).toMatch(
+    /^url\("data:image\/svg\+xml,%3Csvg/
+  )
+})

packages/playground/css/index.html

@@ -49,6 +49,10 @@ <h1>CSS</h1>
   <p>Imported Less string:</p>
   <pre class="imported-less"></pre>
 
+  <div class="form-box-data-uri">
+    tests Less's `data-uri()` function with relative image paths
+  </div>
+
   <p class="stylus">Stylus: This should be blue</p>
   <p class="stylus-additional-data">
     Stylus additionalData: This should be orange

packages/playground/css/less.less

@@ -1,6 +1,9 @@
 @import '@/nested/nested';
 @import './nested/css-in-less.less';
 
+// Test data-uri calls with relative images.
+@import './less/components/form.less';
+
 @color: blue;
 
 .less {

packages/playground/css/less/components/form.less

@@ -0,0 +1,4 @@
+.form-box-data-uri {
+  // data-uri() calls with relative paths should be replaced just like urls.
+  background-image: data-uri('../images/backgrounds/form-select.svg');
+}

packages/playground/css/less/images/backgrounds/form-select.svg

@@ -965,6 +965,8 @@ type CssUrlReplacer = (
 // https://drafts.csswg.org/css-syntax-3/#identifier-code-point
 export const cssUrlRE =
   /(?<=^|[^\w\-\u0080-\uffff])url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
+export const cssDataUriRE =
+  /(?<=^|[^\w\-\u0080-\uffff])data-uri\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
 export const importCssRE = /@import ('[^']+\.css'|"[^"]+\.css"|[^'")]+\.css)/
 const cssImageSetRE = /image-set\(([^)]+)\)/
 
@@ -1015,6 +1017,16 @@ function rewriteCssUrls(
   })
 }
 
+function rewriteCssDataUris(
+  css: string,
+  replacer: CssUrlReplacer
+): Promise<string> {
+  return asyncReplace(css, cssDataUriRE, async (match) => {
+    const [matched, rawUrl] = match
+    return await doUrlReplace(rawUrl, matched, replacer, 'data-uri')
+  })
+}
+
 function rewriteImportCss(
   css: string,
   replacer: CssUrlReplacer
@@ -1040,7 +1052,8 @@ function rewriteCssImageSet(
 async function doUrlReplace(
   rawUrl: string,
   matched: string,
-  replacer: CssUrlReplacer
+  replacer: CssUrlReplacer,
+  funcName: string = 'url'
 ) {
   let wrap = ''
   const first = rawUrl[0]
@@ -1057,7 +1070,7 @@ async function doUrlReplace(
     // The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
     wrap = "'"
   }
-  return `url(${wrap}${newUrl}${wrap})`
+  return `${funcName}(${wrap}${newUrl}${wrap})`
 }
 
 async function doImportCSSReplace(
@@ -1307,10 +1320,12 @@ async function rebaseUrls(
   const content = fs.readFileSync(file, 'utf-8')
   // no url()
   const hasUrls = cssUrlRE.test(content)
+  // data-uri() calls
+  const hasDataUris = cssDataUriRE.test(content)
   // no @import xxx.css
   const hasImportCss = importCssRE.test(content)
 
-  if (!hasUrls && !hasImportCss) {
+  if (!hasUrls && !hasDataUris && !hasImportCss) {
     return { file }
   }
 
@@ -1339,6 +1354,10 @@ async function rebaseUrls(
     rebased = await rewriteCssUrls(rebased || content, rebaseFn)
   }
 
+  if (hasDataUris) {
+    rebased = await rewriteCssDataUris(rebased || content, rebaseFn)
+  }
+
   return {
     file,
     contents: rebased