fix(css): skip url replace for function calls (#15544)

vitejs · Jan 10, 2024 · 21a52e6 · 21a52e6
1 parent a5c6d3d
commit 21a52e6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -166,7 +166,7 @@ const commonjsProxyRE = /\?commonjs-proxy/
 const inlineRE = /[?&]inline\b/
 const inlineCSSRE = /[?&]inline-css\b/
 const styleAttrRE = /[?&]style-attr\b/
-const varRE = /^var\(/i
+const functionCallRE = /^[A-Z_][\w-]*\(/i
 const nonEscapedDoubleQuoteRe = /(?<!\\)(")/g
 
 const cssBundleName = 'style.css'
@@ -1517,7 +1517,7 @@ function skipUrlReplacer(rawUrl: string) {
     isExternalUrl(rawUrl) ||
     isDataUrl(rawUrl) ||
     rawUrl[0] === '#' ||
-    varRE.test(rawUrl)
+    functionCallRE.test(rawUrl)
   )
 }
 async function doUrlReplace(

diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
@@ -74,6 +74,9 @@ test('sass', async () => {
   const atImport = await page.$('.sass-at-import')
   const atImportAlias = await page.$('.sass-at-import-alias')
   const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable')
+  const urlStartsWithFunctionCall = await page.$(
+    '.sass-url-starts-with-function-call',
+  )
   const partialImport = await page.$('.sass-partial')
 
   expect(await getColor(imported)).toBe('orange')
@@ -86,6 +89,9 @@ test('sass', async () => {
   expect(await getBg(urlStartsWithVariable)).toMatch(
     isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
   )
+  expect(await getBg(urlStartsWithFunctionCall)).toMatch(
+    isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
+  )
   expect(await getColor(partialImport)).toBe('orchid')
 
   editFile('sass.scss', (code) =>

diff --git a/playground/css/index.html b/playground/css/index.html
@@ -33,6 +33,9 @@ <h1>CSS</h1>
   </p>
   <p class="sass-partial">@import from SASS _partial: This should be orchid</p>
   <p class="sass-url-starts-with-variable">url starts with variable</p>
+  <p class="sass-url-starts-with-function-call">
+    url starts with function call
+  </p>
   <p>Imported SASS string:</p>
   <pre class="imported-sass"></pre>
   <p class="sass-dep">

diff --git a/playground/css/nested/_index.scss b/playground/css/nested/_index.scss
@@ -1,3 +1,5 @@
+@use 'sass:string';
+
 @import './css-in-scss.css';
 
 .sass-at-import {
@@ -15,3 +17,9 @@ $var: '/ok.png';
   background: url($var);
   background-position: center;
 }
+
+$var2: '/OK.PNG';
+.sass-url-starts-with-function-call {
+  background: url(to-lower-case($var2));
+  background-position: center;
+}