garden VS truss

Thanks for the vanilla-extract recommendation, I'll be using this!

In my case, tailwind was useful for providing a handy set of vocabularies for simple and common stylings. But once customizations start to pile on, we're back into SCSS. Using 2 systems at once meant additionally gluing them with the postcss toolchain, so effectively we have 3 preprocessors running for every style refresh.

Looking in at TypeScript from the clojurescript ecosystem though, I'm still yet to see an equal to https://github.com/noprompt/garden or https://github.com/Jarzka/stylefy: single language, excellent composability, compile-time anonymous class names, inline styles... almost like they solved CSS (except for typing)

I spent some time doing this ~3 years ago, so I don't know about now, but to my knowledge it was the only language where you could really use one language for everything: no HTML (via hiccup), no CSS (via garden), clojure/clojurescript everywhere, and no shell (via babashka).

Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `` are allowed (setting margin is fine) while disallowing `` (anything "not margin") that would mess up the components internal impl details with a compile error.

That said, we don't actually use the feature that much, vs. higher-level logical props like ``.

I know we're supposed to use build-time CSS-in-JS these days, but afaiu they don't support the rare-but-handy "just spread together ~4-5 different object literals from ~random different conditionals + props", i.e. intermixing styles some inside the component + outside the component, which emotion handles really well.

Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.

[1]: https://github.com/homebound-team/truss#xstyles--xss-extensi...

[2]: https://github.com/homebound-team/beam/blob/main/src/compone...

Fwiw to the avoid 80%-in-TW / 20%-in-SCSS-or-something-else dichotomy/complexity, we built Truss which brings TW (Tachyons) style abbreviations to the existing "something else" tool chain (Emotion in our case).

So then everything goes through a single system.

https://github.com/homebound-team/truss

> tailwind's and SCSS's VS code integration is pretty amazing

We get that too, by being just vanilla TypeScript, no editor-specific integration necessary. :-D

(I've linked to Truss in another response, so will stop now. :-))

Don't want to take away from Tailwind, it's great.

That said, self-promotion disclaimer but if you like inline/utility CSS, and also like TypeScript/React/Emotion, we've got a "Tailwinds-ish" CSS-in-JS library that we've enjoyed so far:

https://github.com/homebound-team/truss