From 9aa255a0abcb9f5b23c34607b2188f796f4b6c94 Mon Sep 17 00:00:00 2001
From: Sociosarbis <136657577@qq.com>
Date: Mon, 14 Jun 2021 18:13:04 +0800
Subject: [PATCH] fix(css): filter out function name suffixes with url (#3752)

---
 .../src/node/__tests__/plugins/css.spec.ts    | 43 +++++++++++++++++++
 packages/vite/src/node/plugins/css.ts         |  4 +-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 packages/vite/src/node/__tests__/plugins/css.spec.ts

diff --git a/packages/vite/src/node/__tests__/plugins/css.spec.ts b/packages/vite/src/node/__tests__/plugins/css.spec.ts
new file mode 100644
index 00000000000000..43ad248fb59bbe
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1c7d2fe51b51e9..85a8b6daaf037c 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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<{