fix(css): fix lightningcss dep url resolution with custom root (#18125)

Author: hi-ogawa

packages/vite/src/node/plugins/css.ts

@@ -3030,7 +3030,10 @@ async function compileLightningCSS(
         }
         deps.add(dep.url)
         if (urlReplacer) {
-          const replaceUrl = await urlReplacer(dep.url, dep.loc.filePath)
+          const replaceUrl = await urlReplacer(
+            dep.url,
+            toAbsolute(dep.loc.filePath),
+          )
           css = css.replace(dep.placeholder, () => replaceUrl)
         } else {
           css = css.replace(dep.placeholder, () => dep.url)

playground/css-lightningcss-root/__tests__/css-lightningcss-root.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest'
+import { getBg, isBuild, page, viteTestUrl } from '~utils'
+
+test('url dependency', async () => {
+  const css = await page.$('.url-dep')
+  expect(await getBg(css)).toMatch(
+    isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
+  )
+})

playground/css-lightningcss-root/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@vitejs/test-css-lightningcss-root",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "lightningcss": "^1.27.0"
+  }
+}

playground/css-lightningcss-root/root/index.html

@@ -0,0 +1,3 @@
+<p>url() dependency</p>
+<div class="url-dep"></div>
+<script type="module" src="./main.js"></script>

playground/css-lightningcss-root/root/main.js

@@ -0,0 +1 @@
+import './url-dep.css'

playground/css-lightningcss-root/root/ok.png

@@ -0,0 +1,7 @@
+.url-dep {
+  background-image: url('./ok.png');
+  background-size: cover;
+  width: 50px;
+  height: 50px;
+  border: 1px solid black;
+}

playground/css-lightningcss-root/root/url-dep.css

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  root: 'root',
+  css: {
+    transformer: 'lightningcss',
+  },
+})