StyleX – Meta's styling library

[CharlesW]

This is probably a better place to start: https://stylexjs.com/blog/introducing-stylex/

> We created StyleX not only to meet the styling needs of React developers on the web, but to unify styling for React across web and native.

Meta friends, the names "Review" and "Restyle" were right there.

[superfrank]

> StyleX is a CSS-in-JS solution, not a CSS-in-React solution. Although StyleX been tailored to works best with React today, It's designed to be used with any JavaScript framework that allows authoring markup in Javacript. This includes frameworks that use JSX, template strings, etc.

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

I wouldn't be surprised if they avoided starting with "re" on purpose to avoid it seeming like this was a react only framework.

[tlrobinson]

Shopify has a styling library for React Native called Restyle: https://github.com/Shopify/restyle

I like it a lot. It lets you define a theme with design tokens like spacing and colors, then enforces using only those via TypeScript (with an escape hatch via style prop), which also gives you editor autosuggest support without hacks like the Tailwind extension.

[scop]

I really enjoy when libraries or languages have a “Thinking in X” post of some kind. I find it really helps orient me once I actually get to writing some code. If anybody has any “Thinking in X” examples that you have found particularly useful, let me know!

[ryanar]

It was React Conf 2018 in Nevada when they first talked about StyleX and said they planned to open source it. Though I thought it was going to come much sooner than 5 years, I am so glad it has been released! 2018 was peak css-in-js era and StyleX approach of deduping classes and remove runtime JS was a really performant approach and it sounded like the DX was nice as well.

https://youtu.be/9JZHodNR184?t=270

[jsf01]

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.

[willsmith72]

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

[swyx]

it was exciting at launch, but took forever to ship, and now Tailwind has run away with that problem.

[dmalik]

This looks interesting and I'll play around with it. It will be tough to replace CSS modules and plain CSS for my React apps though. CSS is so much better now. Did you know you can nest in CSS natively now? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

[lucas_codes]

You can, but your CSS won't work properly for nearly 20% of users

[willsmith72]

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

[naman34]

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.

[cantSpellSober]

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

[candiddevmike]

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

[mdhb]

Part of me was holding out hope that React and it’s surrounding ecosystem might at some point end up back on a path that is somewhat more aligned with the rest of the web and had some meaningful sense of interoperability with everything that’s not React.

This certainly inspired no confidence in that.

All I will say is that CSS has gotten a LOT better in the past 5 years and for almost every scenario I can think of you would be in such a better position if you just spent a month learning that rather than this new abstraction.

[_fcs]

Could you share some resources that you have found useful to renew basic CSS knowledge?

[stephen]

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

[nwienert]

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]

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.

[Bishonen88]

Their introduction page[0] makes this look like material ui's makeStyles[1] approach?

[0] https://stylexjs.com/docs/learn/ [1] https://mui.com/system/styles/basics/

[c-hendricks]

Yup, but without the handy `classes` prop so people can modify styles.

Plus, I find with v5, I never touch `makeStyles` / `styled`, the utility props / sx are enough.

[askonomm]

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

[cantSpellSober]

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?

[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

[cantSpellSober]

Borrows a lot from emotion/styled-components it appears. The extensive typing seems to be the biggest feature.

They mention why I should choose it over BEM or Tailwind, why choose it over MUI though?

[nightski]

Does anyone really like Material UI? I find it so clunky and heavy.

[danr4]

Excited to explore just for the sake of alleviating “styling at a distance” pains

[rsstack]

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

[cantSpellSober]

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.

[incrudible]

React is one of these things that was designed to be unbeareable tonuse without custom syntax, but at least it is possible. This looks looks like it does not work without custom syntax at all. Type safety is a nice to have, but it should not need an exotic compiler plugin.

[agos]

It needs a plugin, but I see no custom syntax, it’s just JS?

[webdood90]

Always impressed by how insanely overcomplicated people can make CSS.

[seattle_spring]

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

[cantSpellSober]

Any examples specific to this post?

[hiyer]

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

[tlrobinson]

- 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

[zip1234]

Refactoring and knowing where styles are used. In css sometimes the btn class does something and sometimes not. With stylex it is explicit.

[nprateem]

Styling based on js, eg striking through if an item becomes deleted, etc

[BigJono]

Absolutely fuck all.

[mark_mart]

I couldn’t see pseudo selector (like :hover) support in the docs.

[connordoner]

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

[tlrobinson]

Another new library (I haven’t used yet) that supports pseudo selectors is called CSS Hooks: https://css-hooks.com/

[nojvek]

CSS in JS is really a great concept to keep component logic colocated.

Although I’m really in love with @emotion/css where I can still write and copy paste css-snippets instead of translating into js object syntax.

[max_]

It looks like the React-ification of CSS. No thanks!

[emptysea]

To me it seems more like the typescript-ification of CSS which is a good thing if you’re into static types!

[cantSpellSober]

I don't see anything here that's React-only. They specify that it's not.