From eae00b561e04f1fe1679d3acf4f88b3c42019e4d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 26 Sep 2024 17:22:38 +0900
Subject: [PATCH] fix(css): fix lightningcss dep url resolution with custom
 root (#18125)

---
 packages/vite/src/node/plugins/css.ts            |   5 ++++-
 .../__tests__/css-lightningcss-root.spec.ts      |   9 +++++++++
 playground/css-lightningcss-root/package.json    |  14 ++++++++++++++
 playground/css-lightningcss-root/root/index.html |   3 +++
 playground/css-lightningcss-root/root/main.js    |   1 +
 playground/css-lightningcss-root/root/ok.png     | Bin 0 -> 4986 bytes
 .../css-lightningcss-root/root/url-dep.css       |   7 +++++++
 playground/css-lightningcss-root/vite.config.js  |   8 ++++++++
 pnpm-lock.yaml                                   |   6 ++++++
 9 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 playground/css-lightningcss-root/__tests__/css-lightningcss-root.spec.ts
 create mode 100644 playground/css-lightningcss-root/package.json
 create mode 100644 playground/css-lightningcss-root/root/index.html
 create mode 100644 playground/css-lightningcss-root/root/main.js
 create mode 100644 playground/css-lightningcss-root/root/ok.png
 create mode 100644 playground/css-lightningcss-root/root/url-dep.css
 create mode 100644 playground/css-lightningcss-root/vite.config.js

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 0000000000000000000000000000000000000000..a8d1e52510c41ceeaf3515ee2f594a82557d1685
GIT binary patch
literal 4986
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
b37?V{t|cgkE9S{uec08Nb(D$~%%1%R{RRHc

literal 0
HcmV?d00001

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: