vanilla-extract as a pure preprocessor

[dozortsev]

Hey,

vanilla-extract (VE) as a TypeScript-based preprocessor for CSS is an awesome idea that offers numerous benefits. However I'm not sure why does it only allow produce styles in the form of CSS modules? Specifically, why is it not possible to produce styles without hashes?

I imagine that by giving an config option to disable hashes, VE could greatly benefit in terms of adoption, e.g by being able to be integrated into environments where nowadays people use SCSS, LESS, or PostCSS. CSS frameworks like Bootstrap could gradually migrate from SCSS to VE providing same set of CSS classes.

Are there any plans to make VE to produce CSS without hashes?

I'm keen to contribute, but I would love to hear the sentiment of the community regarding this feature.

cc @mattcompiles @markdalgleish

[Hecatron]

I think you can already do that, to create styles without hashes my understanding is you use the global api
https://vanilla-extract.style/documentation/global-api/global-style/

[dozortsev]

Hey @grbd, nope, the globalStyle function is for non scoped selectors (body, table > thead, * etc) if your selector has CSS class the class will be scoped (with hashes)

[Hecatron]

I think it depends on what you mean by scoping
If I write some code like this

globalStyle('.testclass, #testid', {
  margin: 0
});

The output looks like this in the css

.testclass, #testid {
  margin: 0;
}

Which means it targets anything globally with a testclass or testid
Typically css itself doesn't have scoping built in
so the hashes approach is what a lot of frameworks use to isolate or scope styles to a particular div without impacting the rest of the site.
vuejs does the same when you use the style scoped tag