diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 6fa5904dd..faa5f10e8 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -3095,7 +3095,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)
diff --git a/playground/css-lightningcss-root/__tests__/css-lightningcss-root.spec.ts b/playground/css-lightningcss-root/__tests__/css-lightningcss-root.spec.ts
new file mode 100644
index 000000000..786d17f12
--- /dev/null
+++ b/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`,
+  )
+})
diff --git a/playground/css-lightningcss-root/package.json b/playground/css-lightningcss-root/package.json
new file mode 100644
index 000000000..e1669e89b
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/playground/css-lightningcss-root/root/index.html b/playground/css-lightningcss-root/root/index.html
new file mode 100644
index 000000000..df2820bbe
--- /dev/null
+++ b/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>
diff --git a/playground/css-lightningcss-root/root/main.js b/playground/css-lightningcss-root/root/main.js
new file mode 100644
index 000000000..fe93503f5
--- /dev/null
+++ b/playground/css-lightningcss-root/root/main.js
@@ -0,0 +1 @@
+import './url-dep.css'
diff --git a/playground/css-lightningcss-root/root/ok.png b/playground/css-lightningcss-root/root/ok.png
new file mode 100644
index 000000000..a8d1e5251
Binary files /dev/null and b/playground/css-lightningcss-root/root/ok.png differ
diff --git a/playground/css-lightningcss-root/root/url-dep.css b/playground/css-lightningcss-root/root/url-dep.css
new file mode 100644
index 000000000..f56470afc
--- /dev/null
+++ b/playground/css-lightningcss-root/root/url-dep.css
@@ -0,0 +1,7 @@
+.url-dep {
+  background-image: url('./ok.png');
+  background-size: cover;
+  width: 50px;
+  height: 50px;
+  border: 1px solid black;
+}
diff --git a/playground/css-lightningcss-root/vite.config.js b/playground/css-lightningcss-root/vite.config.js
new file mode 100644
index 000000000..6e42d3e20
--- /dev/null
+++ b/playground/css-lightningcss-root/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  root: 'root',
+  css: {
+    transformer: 'lightningcss',
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35d6ea300..00995545b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -598,6 +598,12 @@ importers:
         specifier: ^1.27.0
         version: 1.27.0
 
+  playground/css-lightningcss-root:
+    devDependencies:
+      lightningcss:
+        specifier: ^1.27.0
+        version: 1.27.0
+
   playground/css-no-codesplit: {}
 
   playground/css-sourcemap: