fix(lightningcss): search for assets with correct base path (#17856)

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)

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`,
+  )
+})

playground/css-lightningcss/imported.css

@@ -1,3 +1,4 @@
+@import url('./nested/nested.css');
 @import './imported-at-import.css';
 
 .imported {

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>

playground/css-lightningcss/nested/nested.css

@@ -0,0 +1,5 @@
+.nested-css-relative-asset {
+  background-image: url('../ok.png');
+  width: 50px;
+  height: 50px;
+}