How to change the name of generated classNames and css variables

[roblotter]

Is there a way to change the name of the generated classnames and css variables?
Like how css-modules has localIdentName or getLocalIdent function.

I want to apply my own hash/name/prefix to classnames and css variables and haven't found it in the docs.

Thanks

[mattcompiles]

Currently there is no way to do this. What problem do you need to solve that isn't ideal with the current solution?

[roblotter]

I think the stable CSS variable names part of this discussion was address by #313 (comment)
and by implementing createGlobalThemeContract.
Non-hashed classes I think is not a feature to be added to vanilla extract - that's basically the whole point of it as a successor to CSS Modules.

[plesiecki]

I would use custom namer function to migrate existing CSS Modules design system into vanilla-extract.

[altrim]

@mattcompiles Any updates after the discussions? Are there any plans to add support for this?

[loliver]

... #313 (comment) and by implementing createGlobalThemeContract ...

Any chance createGlobalThemeContract could get an option to set only the className generated by the theme? Alternatively for the hashed className to always be the same as long as the contents of the theme are the same?

[loliver]

So I wrote this little hack after messing around with the processCss option in the esbuild plugin which will serve this purpose for us for the time being.

const processCss = async (css) => {
  if (css.match(/--libraryname-colorScheme: light/)) {
    css = `.libraryname-light-theme {
${css.split('{')[1]}`
  }
  if (css.match(/--libraryname-colorScheme: dark/)) {
    css = `.libraryname-dark-theme {
${css.split('{')[1]}`
  }
  return css
}

[graup]

My team is also interested in this feature, mostly for future-proofing. Imagine some day we stop using our component system or even JS altogether but we still want to use the CSS styles. It would be pretty cumbersome with the current way classes are named. This is the "use vanilla-extract to make your own tailwind" use case. @markdalgleish

[adregia]

This has actually become problematic for a project I'm on that leverages Webpack Module Federation. We have a component library using vanilla-extract, and the parent and child modules may need different versions of that library. Because of the inability to change classnames, classes can often intersect between different versions and result in bugs or unexpected behaviors when the modules don't share the same version of the lib.

[jgornick]

^^^ This is a great point.

Having the ability to provide a constant class name would be beneficial here for sure.

[altrim]

+1 on this.
We are having the same problem with Module Federation. Were using CSS Modules with custom getLocalIdent that took into account the lib version and that worked great. Now with vanilla-extract we are facing the issue where classes intersect between versions, would be nice to get an API to customise the identifiers.

[jgornick]

Is there a way we could use a decorator in the code to name the class? Or a comment with metadata specific to vanilla-extract?

[morbidick]

To add another usecase: we are planning on using VE in a Microfrontend environment, so multiple UIs will generate their own css file. To prevent classes from colliding it would be necessary to add a prefix to classes for each microfontend.

[lstephensca]

I currently have a usecase for this functionality as well. We basically have 2 different workflows:

1. Plain html utilizing a custom css framework for rapid development
2. More in depth one-off projects where js/ts can be utilized with custom css (usually scss)

I though I might give VE a go to develop the css framework as it would make managing the codebase much easier and a bit easier to update. My current workflow is using vite to ingest the scss (many @use/@forward being used), and I get a nice bundled css file that is easy to read/use for the vanilla html/css projects. However, as it stands, the class names/hashes are just too hard to remember/utilize. I could use VE for the second item in my list, but then I would need to also develop a standalone solution for the first which isn't feasible.

[CroModder]

Since I found this Q&A and discussion that's not answered, if anyone stubbles on this - it is now possible to change hash identifiers: #1160