This is probably a better place to start: <a href="https://stylexjs.com/blog/introducing-stylex/" rel="nofollow noreferrer">https://stylexjs.com/blog/introducing-stylex/</a><p>> <i>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.</i><p>Meta friends, the names "Review" and "Restyle" were <i>right there</i>.
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!
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.<p><a href="https://youtu.be/9JZHodNR184?t=270" rel="nofollow noreferrer">https://youtu.be/9JZHodNR184?t=270</a>
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.
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?
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting</a>
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.<p>This certainly inspired no confidence in that.<p>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.
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.<p>That said, we don't actually use the feature that much, vs. higher-level logical props like `<MyButton compact />`.<p>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.<p>Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.<p>[1]: <a href="https://github.com/homebound-team/truss#xstyles--xss-extension-contracts">https://github.com/homebound-team/truss#xstyles--xss-extensi...</a><p>[2]: <a href="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...</a>
Their introduction page[0] makes this look like material ui's makeStyles[1] approach?<p>[0] <a href="https://stylexjs.com/docs/learn/" rel="nofollow noreferrer">https://stylexjs.com/docs/learn/</a>
[1] <a href="https://mui.com/system/styles/basics/" rel="nofollow noreferrer">https://mui.com/system/styles/basics/</a>
It always surprises me the lengths people are willing to go to avoid writing CSS. If organization is the issue, there's BEM (<a href="https://getbem.com/" rel="nofollow noreferrer">https://getbem.com/</a>). 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.
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
Borrows a lot from emotion/styled-components it appears. The extensive typing seems to be the biggest feature.<p>They mention why I should choose it over BEM or Tailwind, why choose it over MUI though?
React is one of these things that was designed to be unbeareable tonuse without custom syntax, but at least it is <i>possible</i>. 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.
CSS in JS is really a great concept to keep component logic colocated.<p>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.