3 ms·

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 disallowin

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-extension-contracts https://github.com/homebound-team/truss#xstyles--xss-extensi... [2]: https://github.com/homebound-team/beam/blob/main/src/components/Table/components/Row.tsx#L246 https://github.com/homebound-team/beam/blob/main/src/compone...

nwienert 3y ago
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.
- naman34 3y ago
  Hey! We support dynamic styles, too. We're continuing to work on optimisations for StyleX, and I'll be looking at Tamagui for inspiration!
  - nwienert 3y ago
    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.
    - blsapologist42 3y ago
      It does support dynamic values.
      - nwienert 3y ago
        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() }
        naman34 3y ago
        https://stylexjs.com/docs/learn/styling-ui/defining-styles/#dynamic-styles https://stylexjs.com/docs/learn/styling-ui/defining-styles/#...
        nwienert 3y ago
        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.
naman34 3y ago
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.

nwienert 3y ago

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.

naman34 3y ago
Hey! We support dynamic styles, too. We're continuing to work on optimisations for StyleX, and I'll be looking at Tamagui for inspiration!
- nwienert 3y ago
  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.
  - blsapologist42 3y ago
    It does support dynamic values.
    - nwienert 3y ago
      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() }
      - naman34 3y ago
        https://stylexjs.com/docs/learn/styling-ui/defining-styles/#dynamic-styles https://stylexjs.com/docs/learn/styling-ui/defining-styles/#...
        nwienert 3y ago
        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.

naman34 3y ago

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.