Skip to content

Commit

Permalink
fix(css): fix lightningcss dep url resolution with custom root (#18125)
Browse files Browse the repository at this point in the history
  • Loading branch information
hi-ogawa authored and sapphi-red committed Oct 14, 2024
1 parent c5d48d5 commit eae00b5
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 1 deletion.
5 changes: 4 additions & 1 deletion packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
@@ -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`,
)
})
14 changes: 14 additions & 0 deletions playground/css-lightningcss-root/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
3 changes: 3 additions & 0 deletions playground/css-lightningcss-root/root/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p>url() dependency</p>
<div class="url-dep"></div>
<script type="module" src="./main.js"></script>
1 change: 1 addition & 0 deletions playground/css-lightningcss-root/root/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './url-dep.css'
Binary file added playground/css-lightningcss-root/root/ok.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions playground/css-lightningcss-root/root/url-dep.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.url-dep {
background-image: url('./ok.png');
background-size: cover;
width: 50px;
height: 50px;
border: 1px solid black;
}
8 changes: 8 additions & 0 deletions playground/css-lightningcss-root/vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig } from 'vite'

export default defineConfig({
root: 'root',
css: {
transformer: 'lightningcss',
},
})
6 changes: 6 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit eae00b5

Please sign in to comment.