diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 43bb7ad20df3de..8615ba0cf89d22 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -3195,7 +3195,6 @@ async function compileLightningCSS( css = css.replace(dep.placeholder, () => dep.url) break } - deps.add(dep.url) if (urlReplacer) { const replaceUrl = await urlReplacer( dep.url, diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts index 6c995866a4bf00..0cfa1c7f9c05a9 100644 --- a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts +++ b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts @@ -82,3 +82,8 @@ test('nested css with relative asset', async () => { isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, ) }) + +test('aliased asset', async () => { + const bg = await getBg('.css-url-aliased') + expect(bg).toMatch('data:image/svg+xml,') +}) diff --git a/playground/css-lightningcss/css-url.css b/playground/css-lightningcss/css-url.css new file mode 100644 index 00000000000000..2694e5f5136fec --- /dev/null +++ b/playground/css-lightningcss/css-url.css @@ -0,0 +1,4 @@ +.css-url-aliased { + background: url('@/fragment.svg'); + background-size: 10px; +} diff --git a/playground/css-lightningcss/index.html b/playground/css-lightningcss/index.html index 1dacab8f5133de..e2ee95e640e2bd 100644 --- a/playground/css-lightningcss/index.html +++ b/playground/css-lightningcss/index.html @@ -29,6 +29,10 @@

Lightning CSS

Assets relative to nested CSS

+ +
+ CSS background (aliased) +
diff --git a/playground/css-lightningcss/main.js b/playground/css-lightningcss/main.js index 7c3d24b5431ed3..bc452b3cd42c2e 100644 --- a/playground/css-lightningcss/main.js +++ b/playground/css-lightningcss/main.js @@ -2,6 +2,7 @@ import './minify.css' import './imported.css' import mod from './mod.module.css' import './external-url.css' +import './css-url.css' document.querySelector('.modules').classList.add(mod['apply-color']) text('.modules-code', JSON.stringify(mod, null, 2)) diff --git a/playground/css-lightningcss/nested/fragment.svg b/playground/css-lightningcss/nested/fragment.svg new file mode 100644 index 00000000000000..e7de6d86b6e2f5 --- /dev/null +++ b/playground/css-lightningcss/nested/fragment.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + diff --git a/playground/css-lightningcss/vite.config.js b/playground/css-lightningcss/vite.config.js index d833a649d246e9..fbefa0d4d4b99f 100644 --- a/playground/css-lightningcss/vite.config.js +++ b/playground/css-lightningcss/vite.config.js @@ -1,9 +1,15 @@ +import path from 'node:path' import { defineConfig } from 'vite' export default defineConfig({ css: { transformer: 'lightningcss', }, + resolve: { + alias: { + '@': path.resolve(__dirname, 'nested'), + }, + }, build: { cssTarget: ['chrome61'], cssMinify: 'lightningcss',