diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index e8527b949d544c..eb2245e7c813ab 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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)
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 00000000000000..786d17f124ab87
--- /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 00000000000000..e1669e89b1a80d
--- /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 00000000000000..df2820bbe74c59
--- /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 00000000000000..fe93503f500dd8
--- /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 00000000000000..a8d1e52510c41c
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 00000000000000..f56470afc0bb51
--- /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 00000000000000..6e42d3e20e28be
--- /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 dbdff36cc8f30e..49d6a44489d80f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -595,6 +595,12 @@ importers:
         specifier: ^1.26.0
         version: 1.26.0
 
+  playground/css-lightningcss-root:
+    devDependencies:
+      lightningcss:
+        specifier: ^1.27.0
+        version: 1.27.0
+
   playground/css-no-codesplit: {}
 
   playground/css-sourcemap: