fix(css): avoid warnings for image-set containing __VITE_ASSET__ tokens and add test

Co-authored-by: sapphi-red <[email protected]>

Author: Copilot

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

@@ -2021,7 +2021,10 @@ function skipUrlReplacer(unquotedUrl: string) {
     isExternalUrl(unquotedUrl) ||
     isDataUrl(unquotedUrl) ||
     unquotedUrl[0] === '#' ||
-    functionCallRE.test(unquotedUrl)
+    functionCallRE.test(unquotedUrl) ||
+    // skip if it is already a placeholder
+    unquotedUrl.startsWith('__VITE_ASSET__') ||
+    unquotedUrl.startsWith('__VITE_PUBLIC_ASSET__')
   )
 }
 async function doUrlReplace(

playground/assets/__tests__/image-set-warning.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'vitest'
+import { isBuild, serverLogs } from '~utils'
+
+// Test for CSS image-set warning issue (PR #20520)
+// This test ensures that when CSS contains image-set() with url() functions,
+// and those URLs get processed to __VITE_ASSET__ tokens, subsequent image-set
+// processing doesn't try to resolve the tokens again, which would cause warnings.
+test.runIf(isBuild)(
+  'should not warn about VITE_ASSET tokens in image-set',
+  async () => {
+    // The warning we're looking for:
+    // "__VITE_ASSET__xxx__ referenced in __VITE_ASSET__xxx__ didn't resolve at build time"
+
+    const warningPattern = /VITE_ASSET__.*?didn't resolve at build time/
+    const warningLogs = serverLogs.filter((log) => warningPattern.test(log))
+
+    // The issue occurs when:
+    // 1. CSS has image-set with url() functions
+    // 2. URL processing converts URLs to __VITE_ASSET__ tokens
+    // 3. Image-set processing then tries to process the tokens again
+    // 4. This causes false warnings since tokens can't be resolved as files
+
+    // With the fix in skipUrlReplacer(), asset tokens should be skipped
+    expect(warningLogs.length).toBe(0)
+  },
+)