Comment by stephen | Hacker News Reader

Comment by stephen | Hacker News Reader

Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `<MyButton xss={Css.mt5.$} />` are allowed (setting margin is fine) while disallowing `<MyButton xss={Css.dg.$} />` (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 `<MyButton compact />`.

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...

StyleX is compiler-time only, so yes misses out on dynamic styles.

I made Tamagui a hybrid of compile and runtime, where the optimizing compiler actually handles object spreads, conditional logic, and even cross-module imports. It's really nice to get the near-0-runtime performance while maintaining all the benefits of dynamic styles.

Hey! We support dynamic styles, too.

We're continuing to work on optimisations for StyleX, and I'll be looking at Tamagui for inspiration!

I got the impression it was not dynamic values? Just that you can combine static objects dynamically. If I’m wrong I’ll re read the docs but someone else pointed that out to me and linked part of the docs that seemed to indicate that.

It does support dynamic values.

Can you link me to how you know that? The docs seem to indicate it doesn't:

"Since StyleX depends on ahead-of-time compilation, it is important for all your styles to be statically analyzable"

"No runtime style injection."

"All styles are bundled in a static CSS file at compile-time."

---

By dynamic styles I assume we're talking about something like this:

{ backgroundColor: props.thirdPartyColor ?? randomColor() }

https://stylexjs.com/docs/learn/styling-ui/defining-styles/#...

Cool, thanks Naman. It’s really great work overall, congrats on the launch. Maybe those couple places could have wording that indicates it supports dynamic as well.

StyleX supports this pattern. You can export a bunch of styles in one file and then import and use them in another.

You can import many different styles and apply them conditionally etc.

Also, completely dynamic styles are supported. We were inspired by Linaria's solution to generate CSS vars and set their value with inline styles.

Reply on news.ycombinator.com