Resolve/load `url()` references in CSS

[benmccann]

Description

vite-imagetools transforms images to more efficient file formats. This works great for images included via an import in the JS. However, Vite's url() references are only being half handled today. Vite's static asset handling does rename these assets to have a hash in their name. But the vite-imagetools plugin is never invoked, so we can't do think like change jpg/png images to webp.

Suggested solution

Invoke Vite plugins on asset URLs found in CSS just as is done for asset URLs found in JS

Alternative

No response

Additional context

This is one of the top feature requests in vite-imagetools: https://github.com/JonasKruckenberg/imagetools/issues/563

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

I suppose this is related to https://github.com/vitejs/vite/pull/10555. There's a perf concern if we run all Vite plugins for CSS resolving.

[nosovk]

Would be nice to solve this issue, to allow images optimization also in css

[lilnasy]

Ran into this issue as well. I found that I can run my resolveId function run for url() through resolve.alias.customResolvers, but that breaks dev mode (/@vite/client can no longer be resolved).

Even when it does work, it requires that the url start with either /, ./, or ../ - a plugin can't handle, for example, https URLs to process them at build-time. So it seems this really does require work in vite.