Allow custom class/variable name generation

[minht11]

Something similar to postcss generateScopedName option. I have an app where are no third-party styles, so I want to reduce bundle size. Others might want to prefix specific files class names or some other unknown use case which this option would allow.

[mattcompiles]

In production mode vanilla-extract should only use a short hash for every style, file names and debug names are excluded. If you are seeing more than just a hash from a production build there may be something wrong.

[minht11]

Everything is working as expected, class names are using short hash names, and yet I want to be able customize them. I wrote bit hacky replace plugin with vite so class names are just one or two letters and my JS bundle lowered by about 10% minified. But that's just my use case, I still think being able to change class names gives users of the library more flexibility without you needing to support every class name format.

[offscriptdev]

Being able to set a standard name for the output would be helpful.

My use case is that I'm importing the generated css into my TS as a string to inject into the DOM. Why? I'm developing a widget to be consumed by random people who may not have the technical skills needed to use a css preload for performance. Thus, injecting the css like this makes a lot of sense:

import styleAsString from 'vanilla.css'
const ss = document.createElement('style').innerHTML = styleAsString
shadowRoot.append(ss)

Of course, this introduces an issue. As the css is generated at build time, I cannot import it on my first build. I have to do a prebuild to generate the css and then a build to import and use the css.

What I'd like to do is use a prebuild that only runs on my css.ts files, but doing so causes the namespace of the css variables to differ from what is used in my build run. I can get around this by just running my build twice, but that's a bit inelegant.

Furthermore, as my styles are located in a shadowRoot, I can save even more space if I was able to restrict the css class names to a single character.

Being able to customise these settings would make vanilla extract even more awesome :)