From 4e5ce3c7a90966b1f942df35b8b3e8a550a4f031 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Sun, 11 Aug 2024 05:45:03 -0700
Subject: [PATCH] fix(lightningcss): search for assets with correct base path
 (#17856)

---
 packages/vite/src/node/plugins/css.ts                     | 2 +-
 .../css-lightningcss/__tests__/css-lightningcss.spec.ts   | 8 ++++++++
 playground/css-lightningcss/imported.css                  | 1 +
 playground/css-lightningcss/index.html                    | 3 +++
 playground/css-lightningcss/nested/nested.css             | 5 +++++
 5 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 playground/css-lightningcss/nested/nested.css

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index dc2964ab57ca8e..2426e66685a41e 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -3011,7 +3011,7 @@ async function compileLightningCSS(
         }
         deps.add(dep.url)
         if (urlReplacer) {
-          const replaceUrl = await urlReplacer(dep.url, id)
+          const replaceUrl = await urlReplacer(dep.url, dep.loc.filePath)
           css = css.replace(dep.placeholder, () => replaceUrl)
         } else {
           css = css.replace(dep.placeholder, () => dep.url)
diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
index 75c71338bfd8a8..99c9083cc7a5d6 100644
--- a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
+++ b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
@@ -7,6 +7,7 @@ import {
   isBuild,
   page,
   untilUpdated,
+  viteTestUrl,
 } from '~utils'
 
 // note: tests should retrieve the element at the beginning of test and reuse it
@@ -71,3 +72,10 @@ test('css with external url', async () => {
   const css = await page.$('.external')
   expect(await getBg(css)).toMatch('url("https://vitejs.dev/logo.svg")')
 })
+
+test('nested css with relative asset', async () => {
+  const css = await page.$('.nested-css-relative-asset')
+  expect(await getBg(css)).toMatch(
+    isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
+  )
+})
diff --git a/playground/css-lightningcss/imported.css b/playground/css-lightningcss/imported.css
index 41a9505a6cffe4..929e8995d196af 100644
--- a/playground/css-lightningcss/imported.css
+++ b/playground/css-lightningcss/imported.css
@@ -1,3 +1,4 @@
+@import url('./nested/nested.css');
 @import './imported-at-import.css';
 
 .imported {
diff --git a/playground/css-lightningcss/index.html b/playground/css-lightningcss/index.html
index b37699d332955f..1dacab8f5133de 100644
--- a/playground/css-lightningcss/index.html
+++ b/playground/css-lightningcss/index.html
@@ -26,6 +26,9 @@ <h1>Lightning CSS</h1>
 
   <p>External URL</p>
   <div class="external"></div>
+
+  <p>Assets relative to nested CSS</p>
+  <div class="nested-css-relative-asset"></div>
 </div>
 
 <script type="module" src="./main.js"></script>
diff --git a/playground/css-lightningcss/nested/nested.css b/playground/css-lightningcss/nested/nested.css
new file mode 100644
index 00000000000000..7d123cdd106de1
--- /dev/null
+++ b/playground/css-lightningcss/nested/nested.css
@@ -0,0 +1,5 @@
+.nested-css-relative-asset {
+  background-image: url('../ok.png');
+  width: 50px;
+  height: 50px;
+}