Previous discussion: https://news.ycombinator.com/item?id=38537682

One thing that drives me bananas about all these CSS-in-JS libraries is that they enforce object notation for styles, rather than CSS.

With CSS, you can leverage dev tooling and take advantage of the powerful features that it offers. If you try jamming something like an :is() selector into the arbitrary string of an object key, it becomes an unmanageable mess. I feel like type safety isn't a feature, it's a "fat-finger mistake" deterrent.

I used to be on team CSS-in-JS. These days I prefer to use CSS modules.

This is generally how I feel as well - CSS is really powerful, but also a lot simpler than it used to be in many ways, and to me it makes sense to lean into that.

That said, I find the tooling for CSS modules tends to be fairly dire - type annotations are poor, jumping between different files is a nuisance, jump-to-definition rarely behaves correctly, etc. It could be a lot better, but it feels like there's no single organisation pushing CSS modules forwards like they have with certain CSS-in-JS frameworks, or with Tailwind.

100% agree on the tooling issues. WebStorm does its best, but it leaves something to be desired. CSS modules are the only way to get around some of Svelte's scoped style gotchas without needing to ship a runtime (e.g. Emotion). So I play through the pain.

No they don't? Styled Components and Emotion let you use either object notation or the css`` template syntax.

I used to prefer object notation because of the typing, but I found a VSCode extension that gives you full CSS autocomplete in the template.

They have been taking about StyleX for a while.

I’m interested in how this compares to styled-components but particularly more interesting to me is the comparison with vanilla-extract which is a vastly better alternative to styled-components and does it all at build time instead.

Unfortunately it’s uncommon to see insightful conversations on HN about anything React or web related.

I wish they would have just stuck with tailwind which is capable of producing the same results, has great adoption, good docs and active development, without having to roll your own everything over and over again, as is common with css libs.

I imagine tailwind didn’t exist when they created this. Plus, there are many benefits to this approach vs tailwind; much easier to theme (crucial for fb), easier composition of styles in general and easier refactoring

They address CSS utility classes in the docs (mentioning Tailwind by name)

https://stylexjs.com/docs/learn/thinking-in-stylex/

Isn't stylex with Typescript type-safe, also? (Which makes various typos and mistakes at least visible in tooling.) Does Tailwind have an equivalent?

Yes, type safety is a major selling point of StyleX (according to the devs behind it) and

No, Tailwind has no equivalent that I'm aware of (someone correct me if I'm wrong)

I use autocomplete and headwind which is more or less just a VSCode plugin to sort the classes. Been very happy with that setup, albeit not “real” type safety