`url()` in CSS does not use import alias

hrishikesh-k commented 3 months ago

Astro Info

Astro                    v4.11.5
Node                     v20.15.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If you try to import a font file (it might even happen with images, I just didn't test it) in the following manner:

<style is:global>
  @font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: oblique 0deg 10deg;
    font-weight: 100 900;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
</style>

it gets correctly processed by Vite and end up being added to the bundle. However, if you try to replace that import with an import alias, it doesn't work. When running astro build, Vite throws a warning:

~/fonts/inter-latin.woff2 referenced in /home/projects/github-ggpyjq/src/pages/index.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

What's the expected result?

The import alias should work even there. It works as expected in SvelteKit which also uses Vite. Since Vite is able to load and process the file correctly (as indicated when you use relative URLs), it should be possible to use import alias as well.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ggpyjq?file=src%2Fpages%2Findex.astro

Participation

[ ] I am willing to submit a pull request for this issue.

hrishikesh-k commented 3 months ago

Here's a similar setup with SvelteKit: https://stackblitz.com/edit/github-ggpyjq-wsd36g?file=src%2Froutes%2F%2Bpage.svelte, where I'm using import aliases and Vite is able to load the file and embed it as base64 in the generated CSS.

Generating base64 is not the end-goal. The end-goal is to be able to use import aliases in CSS url() functions. However that doesn't seem to work with Astro for some reason.

matthewp commented 2 months ago

Duplicate of https://github.com/withastro/astro/issues/9633

withastro / astro