From ae6895869157e48b32088f0a1f85d2fddb2d713f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Thu, 28 Nov 2024 22:06:18 +0900
Subject: [PATCH] fix(css): referencing aliased svg asset with lightningcss
 enabled errored (#18819)

---
 packages/vite/src/node/plugins/css.ts         |  1 -
 .../__tests__/css-lightningcss.spec.ts        |  5 +++++
 playground/css-lightningcss/css-url.css       |  4 ++++
 playground/css-lightningcss/index.html        |  4 ++++
 playground/css-lightningcss/main.js           |  1 +
 .../css-lightningcss/nested/fragment.svg      | 22 +++++++++++++++++++
 playground/css-lightningcss/vite.config.js    |  6 +++++
 7 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 playground/css-lightningcss/css-url.css
 create mode 100644 playground/css-lightningcss/nested/fragment.svg

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 43bb7ad20df3de..8615ba0cf89d22 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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,
diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
index 6c995866a4bf00..0cfa1c7f9c05a9 100644
--- a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
+++ b/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,')
+})
diff --git a/playground/css-lightningcss/css-url.css b/playground/css-lightningcss/css-url.css
new file mode 100644
index 00000000000000..2694e5f5136fec
--- /dev/null
+++ b/playground/css-lightningcss/css-url.css
@@ -0,0 +1,4 @@
+.css-url-aliased {
+  background: url('@/fragment.svg');
+  background-size: 10px;
+}
diff --git a/playground/css-lightningcss/index.html b/playground/css-lightningcss/index.html
index 1dacab8f5133de..e2ee95e640e2bd 100644
--- a/playground/css-lightningcss/index.html
+++ b/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>
diff --git a/playground/css-lightningcss/main.js b/playground/css-lightningcss/main.js
index 7c3d24b5431ed3..bc452b3cd42c2e 100644
--- a/playground/css-lightningcss/main.js
+++ b/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))
diff --git a/playground/css-lightningcss/nested/fragment.svg b/playground/css-lightningcss/nested/fragment.svg
new file mode 100644
index 00000000000000..e7de6d86b6e2f5
--- /dev/null
+++ b/playground/css-lightningcss/nested/fragment.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 96" enable-background="new 0 0 32 96" xml:space="preserve">
+
+<view id="icon-clock-view" viewBox="0 0 32 32" />
+<view id="icon-heart-view" viewBox="0 32 32 32" />
+<view id="icon-arrow-right-view" viewBox="0 64 32 32" />
+
+<g id="icon-clock">
+	<path d="M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
+		 M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
+</g>
+<g id="icon-heart">
+	<path d="M32,43.2c0,2.7-1.2,5.1-3,6.8l0,0l-10,10c-1,1-2,2-3,2s-2-1-3-2l-10-10c-1.9-1.7-3-4.1-3-6.8c0-5.1,4.1-9.2,9.2-9.2
+		c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,33.9,32,38.1,32,43.2z"/>
+</g>
+<g id="icon-arrow-right">
+	<path d="M32,80.1l-16-16v10H0v12h16v10L32,80.1z"/>
+</g>
+</svg>
diff --git a/playground/css-lightningcss/vite.config.js b/playground/css-lightningcss/vite.config.js
index d833a649d246e9..fbefa0d4d4b99f 100644
--- a/playground/css-lightningcss/vite.config.js
+++ b/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',