fix(css): filter out function name suffixes with url (#3752)

packages/vite/src/node/__tests__/plugins/css.spec.ts

@@ -0,0 +1,43 @@
+import { cssUrlRE } from '../../plugins/css'
+
+describe('search css url function', () => {
+  test('some spaces before it', () => {
+    expect(
+      cssUrlRE.test("list-style-image: url('../images/bullet.jpg');")
+    ).toBe(true)
+  })
+
+  test('no space after colon', () => {
+    expect(cssUrlRE.test("list-style-image:url('../images/bullet.jpg');")).toBe(
+      true
+    )
+  })
+
+  test('at the beginning of line', () => {
+    expect(cssUrlRE.test("url('../images/bullet.jpg');")).toBe(true)
+  })
+
+  test('as suffix of a function name', () => {
+    expect(
+      cssUrlRE.test(`@function svg-url($string) {
+      @return "";
+    }`)
+    ).toBe(false)
+  })
+
+  test('after parenthesis', () => {
+    expect(
+      cssUrlRE.test(
+        'mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent));'
+      )
+    ).toBe(true)
+  })
+
+  test('after comma', () => {
+    expect(
+      cssUrlRE.test(
+        'mask-image: image(skyblue,url(mask.png), linear-gradient(rgba(0, 0, 0, 1.0), transparent));'
+      )
+    ).toBe(true)
+  })
+})

packages/vite/src/node/plugins/css.ts

@@ -757,7 +757,9 @@ type CssUrlReplacer = (
   url: string,
   importer?: string
 ) => string | Promise<string>
-const cssUrlRE = /url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
+// https://drafts.csswg.org/css-syntax-3/#identifier-code-point
+export const cssUrlRE =
+  /(?:^|[^\w\-\u0080-\uffff])url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
 const cssImageSetRE = /image-set\(([^)]+)\)/
 
 const UrlRewritePostcssPlugin: Postcss.PluginCreator<{