From 46c2f8105853ab37f9e4f13b405b4073336466f4 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:52:47 -0700
Subject: [PATCH 1/6] fix(lightningcss): search for assets with correct base
 path

---
 packages/vite/src/node/plugins/css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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)

From d17028b5c7f12c220816146537f478719edadc44 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Fri, 9 Aug 2024 17:37:05 -0700
Subject: [PATCH 2/6] test(lightningcss): add tests for #16457

---
 .../css-lightningcss/__tests__/css-lightningcss.spec.ts     | 6 ++++++
 playground/css-lightningcss/imported.css                    | 1 +
 playground/css-lightningcss/index.html                      | 3 +++
 playground/css-lightningcss/nested/nested.css               | 4 ++++
 4 files changed, 14 insertions(+)
 create mode 100644 playground/css-lightningcss/nested/nested.css

diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
index 75c71338bfd8a8..11a303d254047e 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,8 @@ 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 ? /base64/ : `${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..df74a12a76a28b
--- /dev/null
+++ b/playground/css-lightningcss/nested/nested.css
@@ -0,0 +1,4 @@
+.nested-css-relative-asset {
+  background-image: url('../ok.png');
+}
+  
\ No newline at end of file

From e866639172c3bb61741714a643e8c62455a6b547 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Fri, 9 Aug 2024 17:51:00 -0700
Subject: [PATCH 3/6] fix(test): use smaller image for lightning css test

---
 playground/css-lightningcss/__tests__/css-lightningcss.spec.ts | 2 +-
 playground/css-lightningcss/nested/nested.css                  | 3 +--
 playground/css-lightningcss/test.avif                          | 0
 3 files changed, 2 insertions(+), 3 deletions(-)
 create mode 100644 playground/css-lightningcss/test.avif

diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
index 11a303d254047e..529604ce2ce1d5 100644
--- a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
+++ b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
@@ -75,5 +75,5 @@ test('css with external url', async () => {
 
 test('nested css with relative asset', async () => {
   const css = await page.$('.nested-css-relative-asset')
-  expect(await getBg(css)).toMatch(isBuild ? /base64/ : `${viteTestUrl}/ok.png`)
+  expect(await getBg(css)).toMatch(isBuild ? /base64/ : `${viteTestUrl}/test.avif`)
 })
diff --git a/playground/css-lightningcss/nested/nested.css b/playground/css-lightningcss/nested/nested.css
index df74a12a76a28b..3fb16871850041 100644
--- a/playground/css-lightningcss/nested/nested.css
+++ b/playground/css-lightningcss/nested/nested.css
@@ -1,4 +1,3 @@
 .nested-css-relative-asset {
-  background-image: url('../ok.png');
+  background-image: url('../test.avif');
 }
-  
\ No newline at end of file
diff --git a/playground/css-lightningcss/test.avif b/playground/css-lightningcss/test.avif
new file mode 100644
index 00000000000000..e69de29bb2d1d6

From aa84495cecc918f51196a1ec3f9182579cb6f612 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Fri, 9 Aug 2024 17:55:18 -0700
Subject: [PATCH 4/6] fix(format): fix format issue in test

---
 .../css-lightningcss/__tests__/css-lightningcss.spec.ts       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
index 529604ce2ce1d5..92771adfa3dbba 100644
--- a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
+++ b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
@@ -75,5 +75,7 @@ test('css with external url', async () => {
 
 test('nested css with relative asset', async () => {
   const css = await page.$('.nested-css-relative-asset')
-  expect(await getBg(css)).toMatch(isBuild ? /base64/ : `${viteTestUrl}/test.avif`)
+  expect(await getBg(css)).toMatch(
+    isBuild ? /base64/ : `${viteTestUrl}/test.avif`,
+  )
 })

From 651ac1e69105794170891592c278976786fc8619 Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Fri, 9 Aug 2024 19:51:51 -0700
Subject: [PATCH 5/6] fix(test): use ok.png file for testing

---
 playground/css-lightningcss/__tests__/css-lightningcss.spec.ts | 2 +-
 playground/css-lightningcss/nested/nested.css                  | 2 +-
 playground/css-lightningcss/test.avif                          | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 playground/css-lightningcss/test.avif

diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
index 92771adfa3dbba..99c9083cc7a5d6 100644
--- a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
+++ b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
@@ -76,6 +76,6 @@ test('css with external url', async () => {
 test('nested css with relative asset', async () => {
   const css = await page.$('.nested-css-relative-asset')
   expect(await getBg(css)).toMatch(
-    isBuild ? /base64/ : `${viteTestUrl}/test.avif`,
+    isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
   )
 })
diff --git a/playground/css-lightningcss/nested/nested.css b/playground/css-lightningcss/nested/nested.css
index 3fb16871850041..139ff568bd3245 100644
--- a/playground/css-lightningcss/nested/nested.css
+++ b/playground/css-lightningcss/nested/nested.css
@@ -1,3 +1,3 @@
 .nested-css-relative-asset {
-  background-image: url('../test.avif');
+  background-image: url('../ok.png');
 }
diff --git a/playground/css-lightningcss/test.avif b/playground/css-lightningcss/test.avif
deleted file mode 100644
index e69de29bb2d1d6..00000000000000

From 2ab7ebc9505ac9cca89b01a063a8270dba24654c Mon Sep 17 00:00:00 2001
From: smeng9 <38666763+smeng9@users.noreply.github.com>
Date: Fri, 9 Aug 2024 19:56:29 -0700
Subject: [PATCH 6/6] fix(testimage): make test image larger

---
 playground/css-lightningcss/nested/nested.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/playground/css-lightningcss/nested/nested.css b/playground/css-lightningcss/nested/nested.css
index 139ff568bd3245..7d123cdd106de1 100644
--- a/playground/css-lightningcss/nested/nested.css
+++ b/playground/css-lightningcss/nested/nested.css
@@ -1,3 +1,5 @@
 .nested-css-relative-asset {
   background-image: url('../ok.png');
+  width: 50px;
+  height: 50px;
 }