Resolving CSS Aliases in Vite and Vanilla-Extract During Development

[f4-miyata]

Hello! Nice to meet you. I've recently started using Vite and vanilla-extract. When I set up aliases, I noticed that when running npm run build and previewing, the @assets in the url() within the css.ts file is resolved properly. However, during npm run dev, the aliases are not resolved, and url('@assets/...') remains as is. I've checked the issues, but I couldn't find a similar occurrence.

I created an example on CodeSandbox. No image is displayed behind the element that says "no logo !! in dev."

I'm not very familiar with English, so I apologize if my communication is unclear.
Thanks for your help!

codesandbox - vite

By the way, aliases are resolved in development mode with Webpack as well.

codesandbox - webpack

[mrm007]

Copy/pasting the response from Discord:

Hi, this comes up every once in a while. We are aware it's not a great experience at the moment, and we have been working on a solution.

Previous discussion: #1208
Community solution: #665 (comment)
This works with the current Vite plugin: https://github.com/wobsoriano/esbuild-vanilla-image-loader

The new Vite plugin will support this out of the box; no esbuild plugin needed. Because we aren't using esbuild any more and we're relying on the Vite CSS pipeline.

import myIcon from "../assets/icons/MyIcon.svg";

export const myListItem = style({
  listStyle: `url(${myIcon})`,
  // or
  listStyle: 'url("@assets/icons/MyIcon.svg")',
});

Please try it out and report any issues you find: #1264

I forked your sandbox with the new plugin: https://codesandbox.io/p/devbox/ex-forked-v7thjj