fix: multiple css url separation (fix #3922)

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

@@ -242,3 +242,27 @@ test('PostCSS dir-dependency', async () => {
     await untilUpdated(() => getColor(el2), 'black')
   }
 })
+
+test('Url separation', async () => {
+  const urlSeparated = await page.$('.url-separated')
+  const baseUrl = 'url(images/dog.webp)'
+  const cases = new Array(5)
+    .fill('')
+    .flatMap((_, i) =>
+      [',', ' ,', ', ', ' , '].map(
+        (sep) => `background-image:${new Array(i + 1).fill(baseUrl).join(sep)};`
+      )
+    )
+
+  // Insert the base case
+  cases.unshift('background-image:url(images/cat.webp),url(images/dog.webp)')
+
+  for (const [c, i] of cases.map((c, i) => [c, i]) as [string, number][]) {
+    // Replace the previous case
+    if (i > 0) editFile('imported.css', (code) => code.replace(cases[i - 1], c))
+
+    expect(await getBg(urlSeparated)).toMatch(
+      /^url\(.+\)(?:\s*,\s*url\(.+\))*$/
+    )
+  }
+})

packages/playground/css/imported.css

@@ -17,3 +17,8 @@ pre {
     color: pink;
   }
 }
+
+/* test url comma separation */
+.url-separated {
+  background-image:url(images/cat.webp),url(images/dog.webp);
+}

packages/playground/css/index.html

@@ -82,6 +82,10 @@ <h1>CSS</h1>
   <p class="dir-dep-2">
     PostCSS dir-dependency (file 2): this should be grey too
   </p>
+
+  <p class="url-separated">
+    Url separation preservation: should have valid background-image
+  </p>
 </div>
 
 <script type="module" src="./main.js"></script>

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

@@ -836,7 +836,9 @@ async function doUrlReplace(
     return matched
   }
 
-  return `url(${wrap}${await replacer(rawUrl)}${wrap})`
+  // #3926
+  const initialComma = matched[0] === ',' ? ',' : ''
+  return `${initialComma}url(${wrap}${await replacer(rawUrl)}${wrap})`
 }
 
 let CleanCSS: any