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

51–60 of 86 posts

Re: StyleX – Meta's styling library

#51

Post by willsmith72 »

cantSpellSober wrote: post #23
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

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

e.g. using mui sx. the downside is the runtime performance cost

https://mui.com/system/getting-started/usage/#performance-tr...

i don't want to reuse or compose my styles, i just want to add alignSelf: 'flex-end' and then easily be able to change it and see the styles in one place, without leaving the component definition. the reusability and composition is at the component level

Re: StyleX – Meta's styling library

#52

Post by naman34 »

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

Re: StyleX – Meta's styling library

#53

Post by naman34 »

nwienert wrote: post #44
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.

Hey! We support dynamic styles, too.

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

Re: StyleX – Meta's styling library

#54

Post by naman34 »

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

Hey! I'm the maintainer of StyleX and I just wanted to say that you would probably like PandaCSS or Tamagui.

We don't think the Tailwind way of styling is readable in the long term, but we see the value is being able to author that way. We're looking into a VS Code plugin, that would let you author your styles inline and extract them out when you save.

Re: StyleX – Meta's styling library

#55

Post by naman34 »

cantSpellSober wrote: post #25
rsstack wrote: post #4

How does this compare to https://griffel.js.org/ ?

Great question, this strikes me as very similar. This appears to place more emphasis on static typing, and has less strange syntax (think of "shorthand" in Griffel). The docs steer you away from atomic CSS, whereas Griffel's embraces them.

Griffel and StyleX arrived at very similar ideas and we've discussed the possibility of sharing more code between the two.

There are some meaningful differences in the API choices, but the high-level design is pretty much the same.

Re: StyleX – Meta's styling library

#56

Post by naman34 »

tlrobinson wrote: post #35
hiyer wrote: post #31

What's the advantage of css in js as opposed to just plain css?

- Styles colocated with markup/logic (I consider this an advantage with a component library like React, others may not) - No global styles stomping on each other, styles scoped to a single module unless explicitly exported/imported - Type safety, if using TypeScript The main downside is often performance, though

We're solving the performance pitfall of CSS-in-JS libraries by making a compiler instead. In the vast majority of cases, there should be zero runtime cost to using StyleX.

Re: StyleX – Meta's styling library

#58

Post by joshmanders »

cantSpellSober wrote: post #48
joshmanders wrote: post #45

Earlier quoted context omitted.

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.

No, I worked on internal facing stuff that was only accessible by dealers

Re: StyleX – Meta's styling library

#59

Post by nwienert »

naman34 wrote: post #53
nwienert wrote: post #44

Earlier quoted context omitted.

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.

Re: StyleX – Meta's styling library

#60

Post by nsonha »

scoot wrote: post #41
willsmith72 wrote: post #9

Earlier quoted context omitted.

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

they are not the same kind of thing though, one is a library TO WORK WITH styles, the other is a library AND some styles
Post reply on HN