The classname generated by vite and webpack is not consistent。

[RyderJKL]

In our component library project, we used vite to compile the components in esm format and webpack to compile the components in umd format, everything worked fine but the final classname products were not consistent.

Example code.

// Avatar.css.ts
import { style } from '@vanilla-extract/css';
export const root = style({color: 'red'});

vite get classname as Avatar__9ohk1n0，but webpack get Avatar_root__9ohk1n0.

Expected outcome：

vite can generate the same classname as webpack.

[mattcompiles]

This is due to Vite not having support for automatic debug IDs yet. This functionality is provided by the @vanilla-extract/babel-plugin. We're thinking of adding support for this in Vite soon.

Until then I'd suggest to stop using the @vanilla-extract/babel-plugin at all. That should make Webpack be consistant with Vite.