Paths in `@import`-ed css files with `vitePreprocess` aren't rebased

[blt-r]

Describe the bug

This applies to paths in @import statements and in url().

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-da2rskgq?file=src%2FApp.svelte

Reproduction

Minimal reproduction

lib/
    style.css
    image.png
App.svelte

// App.svelte

<style>
  @import './lib/style.css';
</style>

// lib/style.css

:global(body) {
  background-image: url(./image.png);
}

This doesn't work because url(./image.png) is left as is and relative to App.svelte it's invalid.

My usecase

I wanted to have something like:

// +layout.svelte

<svelte:head>
  <style>
    @import '@fontsource-variable/lora/wght.css';
    @import '@fontsource-variable/lora/wght-italic.css';
  </style>
</svelte:head>

to have @font-face declarations inline so that fonts start loading asap. If I import these normally they get bundled in with other huge css files.

This doesn't work because @fontsource-variable/lora/wght.css contains things like:

@font-face {
  /* ... */
  src: url(./files/lora-latin-wght-normal.woff2) format('woff2-variations');
}

And the ./files/lora-latin-wght-normal.woff2 is kept as is instead of being rewritten to be relative to +layout.svelte.

So I had to resort to a workaround like this:

<script>
  import lora_normal from '@fontsource-variable/lora/wght.css?inline'
  import lora_italic from '@fontsource-variable/lora/wght-italic.css?inline'
</script>

<svelte:head>
    {@html `<style>${lora_normal}${lora_italic}</style>`}
</svelte:head>

Logs

System Info

svelte 5.53.12
@sveltejs/vite-plugin-svelte 7.0.0
vite 8.0.1

[cooolbros]

I also ran into this when using https://github.com/microsoft/vscode-codicons.

The bug is caused by Vite's preprocessCSS function using postcss-import to inline the @import statements without passing a postcss plugin to rewrite the url() values (and postcss-import not rewriting the URLs either).

(It could be the same issue as vitejs/vite#15410, there are some similar issues)

Currently I don't think its possible for vite-plugin-svelte to fix this without working around Vite because the inlining happens before svelte compiles the CSS so Svelte doesn't know which assets are referenced from the @imported file and which aren't, this needs to be fixed in Vite.