Resolving Assets in CSS via url()

[KingPr0o7]

Astro Info

Astro                    v4.1.1
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

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

Doesn't seem to apply.

Describe the Bug

When trying to use images in CSS, I can't get the image to load with paths like @images/, ../images/ or /src/images/. I'm limited to using images in the public/ directory where the images aren't processed and optimized like into the webp format. Images will be not found (404) in my console in and/or development/production:

Note: I could just be me not understanding the proper implementation, but from the Discord support thread, it seems I'm not the only one confused.

What's the expected result?

It should be a straightforward way to resolve images and use them in CSS. Like simply putting:

@keyframes image-change {
	25% {background-image: url('@images/cat2.png');} 
	75% {background-image: url('@images/cat3.png');}
	100% {background-image: url('@images/cat1.png');}
}

or other ways like using define:vars:

<style define:vars={{ Cat1, Cat2, Cat3 }}>
@keyframes image-change {
	25% {background-image: var(--Cat2);} 
	75% {background-image: var(--Cat3);}
	100% {background-image: var(--Cat1);}
}
</style>

With these, then the images should automatically be processed and URLs resolved and replaced so they show up as an optimized image in both production and development.

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/KingPr0o7/sandbox

Participation

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

[bluwy]

Seems like it's because Vite uses createResolver early before we can patch it: https://github.com/vitejs/vite/blob/b44c49302ffbf0c82f984f6219ed6376d1e4552a/packages/vite/src/node/plugins/css.ts#L230-L234

createResolver linked there is used to resolve url() references. One way to workaround this is to define the alias with vite.define in astro.config.js too.

I'm not really sure of a way to fix this. Might need to sit on it for a while. Maybe there's a way for us to partially fix this for most cases by using Vite's define internally.

[azhirov]

Current workaround is:

import { defineConfig } from 'astro/config';
import { fileURLToPath, URL } from 'node:url';


export default defineConfig({
  vite: {
    resolve: {
      alias: {
        '@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
      }
    }
  }
});

[KingPr0o7]

any updates? @azhirov

It doesn't seem like it. For my case, I chose to stuff all images into a subdirectory of the /public directory. You could try the method @bluwy mentioned (vite.define within the astro.config.js). I might change to the workaround, but I might just wait at this point.

It also seems that this issue is gaining traction, so they might try to set some time into it. But I'd still give it some more time, as from the looks of it, the process(es) of creating the resolved images is triggered a decent bit before everything else (which @bluwy mentioned). I'm going to assume that this might be addressed further in early/mid v5 🤞🏻.

[azhirov]

@KingPr0o7

Thank you for your response. I updated my comment and added a workaround.

However, there's now an issue with PHPStorm/WebStorm not recognizing aliases within the <style></style> block (it only recognizes them in separate CSS/SCSS files). This is likely related to the @astrojs/language-server package.

[lilnasy]

Running into this issue as well.