fix(css): referencing aliased svg asset with lightningcss enabled err…

…ored (#18819)

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

@@ -3195,7 +3195,6 @@ async function compileLightningCSS(
           css = css.replace(dep.placeholder, () => dep.url)
           break
         }
-        deps.add(dep.url)
         if (urlReplacer) {
           const replaceUrl = await urlReplacer(
             dep.url,

playground/css-lightningcss/__tests__/css-lightningcss.spec.ts

@@ -82,3 +82,8 @@ test('nested css with relative asset', async () => {
     isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
   )
 })
+
+test('aliased asset', async () => {
+  const bg = await getBg('.css-url-aliased')
+  expect(bg).toMatch('data:image/svg+xml,')
+})

playground/css-lightningcss/css-url.css

@@ -0,0 +1,4 @@
+.css-url-aliased {
+  background: url('@/fragment.svg');
+  background-size: 10px;
+}

playground/css-lightningcss/index.html

@@ -29,6 +29,10 @@ <h1>Lightning CSS</h1>
 
   <p>Assets relative to nested CSS</p>
   <div class="nested-css-relative-asset"></div>
+
+  <div class="css-url-aliased">
+    <span style="background: #fff">CSS background (aliased)</span>
+  </div>
 </div>
 
 <script type="module" src="./main.js"></script>

playground/css-lightningcss/main.js

@@ -2,6 +2,7 @@ import './minify.css'
 import './imported.css'
 import mod from './mod.module.css'
 import './external-url.css'
+import './css-url.css'
 
 document.querySelector('.modules').classList.add(mod['apply-color'])
 text('.modules-code', JSON.stringify(mod, null, 2))

playground/css-lightningcss/vite.config.js

@@ -1,9 +1,15 @@
+import path from 'node:path'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
   css: {
     transformer: 'lightningcss',
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'nested'),
+    },
+  },
   build: {
     cssTarget: ['chrome61'],
     cssMinify: 'lightningcss',