fix(css): referencing aliased svg asset with lightningcss enabled errored (#18819)

Author: sapphi-red

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/nested/fragment.svg

@@ -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',