Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

StyleX – Meta's styling library

stylexjs.com

Post reply on HN
Print view View original

41–50 of 86 posts

Re: StyleX – Meta's styling library

#41

Post by scoot »

willsmith72 wrote: post #9
jsf01 wrote: post #6

Just at a cursory glance, this looks pretty verbose and clunky. Existing React ecosystem styling solutions are many, so it’s not immediately evident to me when you would accept the trade offs introduced by this tool over any existing ones that seem much nicer to not only integrate, but also have to work with day to day.

0 runtime is the argument over emotion (and therefore MUI right now)

You'll be glad to hear that MUI is zeroing in (pun intended) on a zero runtime solution right now as an alternative to Emotion [0], although that GitHub issue doesn't capture just how far it has come. Expect more soon!

[0] https://github.com/mui/material-ui/issues/38137

Re: StyleX – Meta's styling library

#42

Post by stephen »

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

Re: StyleX – Meta's styling library

#43

Post by nwienert »

candiddevmike wrote: post #27
willsmith72 wrote: post #7

I hate having to give everything a name like people do in react native stylesheets. Give me an inline performant style prop any day

Inline styles by themselves don't support a lot of necessary CSS things like media and child selectors. You lose the "cascading" part of CSS...

Try out Tamagui which solves this - child and media selectors, even container queries and stuff like container + pseudo.

Re: StyleX – Meta's styling library

#44

Post by nwienert »

stephen wrote: post #42

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…

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.

Re: StyleX – Meta's styling library

#45

Post by joshmanders »

seattle_spring wrote: post #24
webdood90 wrote: post #5

Always impressed by how insanely overcomplicated people can make CSS.

What scale of frontend apps do you work with? Specifically, how many developers are simultaneously writing features and merging code in a given week?

I'm assuming your question is loaded in an attempt to say "You haven't worked on any large teams then"

But I have, in a fairy large project (completely rebuilding all of Deere & Co's internal systems, upgrading from literal terminals to web app) with >100 developers merging in hundreds of PR's a week.

We've never needed something like this.

Re: StyleX – Meta's styling library

#46

Post by cantSpellSober »

yurishimo wrote: post #37
cantSpellSober wrote: post #23

Earlier quoted context omitted.

You already have to name your CSS classes, and atomic CSS libraries are chock full of names you must learn . What do you mean "inline style prop," writing CSS in the HTML style attribute? That's a nightmare to manage across large apps, not composable or reusable, and this library compiles to performant styling (according to the authors/examples).

Nitpick, but most atomic css libraries name things fairly consistently. In addition, you only have to memorize the names once. After that learning curve, you never have to think of a class name again. In addition, with robust IDE support, you can type the css attribute and get autocomplete suggestions for the relevant utility.

So we're told every time. Is it "2xl" or "xxl" for the breakpoint again? It depends on the library (hopefully you didn't customize it!). Was it Tachyons or Bulma that has "ns" for "not small?"

> you only have to memorize the names once

Yep! After that it's as simple as dark:hover:md:motion-reduce:text-base/7

> you never have to think of a class name again

Unless you're using Tailwind's custom themes, arbitrary groups, peers...

Re: StyleX – Meta's styling library

#47

Post by djstein »

waited a long time for this since they first demoed it at react conf 2018? in vegas. this was the last piece in the SSR + streaming + suspense holy grail. looks like the pieces are all finally done. congrats on the launch

Re: StyleX – Meta's styling library

#48

Post by cantSpellSober »

joshmanders wrote: post #45
seattle_spring wrote: post #24

Earlier quoted context omitted.

What scale of frontend apps do you work with? Specifically, how many developers are simultaneously writing features and merging code in a given week?

I'm assuming your question is loaded in an attempt to say "You haven't worked on any large teams then" But I have, in a fairy large project (completely rebuilding all of Deere & Co's internal systems, upgrading from literal terminals to web app) with >100 developers merging in hundreds of PR's a week. We've never needed something like this.

Do you work on deere.com? I haven't seen a conditional comment in a while!

>

I think that site could benefit from something like this. The CSS on that site is, um, not optimized.

Re: StyleX – Meta's styling library

#49

Post by cantSpellSober »

askonomm wrote: post #40

It always surprises me the lengths people are willing to go to avoid writing CSS. If organization is the issue, there's BEM ( https://getbem.com/ ). This just looks like another layer of complexity on top of an already convoluted front-end stack that just slows everything it touches to a crawl and only works moderately well on the developers beefed up latest MacBook Pro's, and sucks horribly on any regular person's c…

The post mentions BEM specifically and argues why this alternative is better

> just slows everything it touches to a crawl

The docs call out how there's little to no overhead with the runtime.

Is any part of your comment related to this library specifically? Or just CSS-in-JS?

Re: StyleX – Meta's styling library

#50

Post by cantSpellSober »

nwienert wrote: post #43
candiddevmike wrote: post #27

Earlier quoted context omitted.

Inline styles by themselves don't support a lot of necessary CSS things like media and child selectors. You lose the "cascading" part of CSS...

Try out Tamagui which solves this - child and media selectors, even container queries and stuff like container + pseudo.

Unclear if they mean inline styles as in "the HTML attribute" or a React prop. Tamagui doesn't solve the former.
Post reply on HN