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