Stylex
@stylexjs
Followers
1,515
Following
36
Media
16
Statuses
213
Paid shill for the build-time static CSS generator that powers Meta.
Joined December 2021
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
McDonald
• 1181313 Tweets
الهلال
• 729413 Tweets
سالم
• 165280 Tweets
Liz Cheney
• 116083 Tweets
Neymar
• 99142 Tweets
علي العين
• 95301 Tweets
AFIP
• 86461 Tweets
Newsweek
• 83543 Tweets
الامارات
• 47531 Tweets
Valencia
• 45561 Tweets
نيمار
• 43714 Tweets
Samantha
• 39825 Tweets
البليهي
• 37569 Tweets
Khaled
• 31808 Tweets
Paul Di'Anno
• 31103 Tweets
Palace
• 30894 Tweets
Lorenzo
• 29403 Tweets
Iron Maiden
• 28486 Tweets
curitiba
• 27346 Tweets
#BBUK
• 25737 Tweets
كوليبالي
• 25069 Tweets
جيسوس
• 23825 Tweets
سفيان رحيمي
• 18116 Tweets
SIDNEY MERECE RESPEITO
• 16930 Tweets
Simone
• 16006 Tweets
Yulia
• 13852 Tweets
Tom Holland
• 12461 Tweets
التحكيم الاسيوي
• 11645 Tweets
ARCA
• 11399 Tweets
الاتحاد الاسيوي
• 11270 Tweets
Pinned Tweet
A community member has been maintaining an SWC plugin for StyleX that includes a line by line translation of most of StyleX to Rust.
1
3
30
Hello World!
15
96
436
We’ve been open source for a week. AMA
4
6
94
🎉 It’s release day!
v0.6.1 is out.
This is release is all about types…for CSS variables.
3
11
82
Great video by
@joshtriedcoding
that takes a measured approach in a world of flame-wars. Thank you!
1
7
52
Now working within a SvelteKit app.
3
3
52
The only concepts you need to understand in StyleX:
1. Style Objects - apply them, merge them, use them conditionally whatever
2. Variable Objects - use them within styles
3. Themes - set values for variables on a UI sub-tree
That’s it. Seriously.
2
5
49
Built a Next + CLI example and even with some issues, it’s so much better already!
✅ Next 15 RC
✅ TurboPack dev+prod
✅ Next/Font
🚧 the @/ alias is broken
🚧 using styleX in dependencies has some issues
🚧 not all config options available yet
0
2
37
A release before we wrap up the year with lots of small fixes and improvements. Biggest things in the new year.
0
4
33
We’re looking at Tailwind’s approach with “group”.
Curious what the recommended way to handle a hover state like this would be with StyleX, since they explicitly forbid styling based on parent hover.
Use JS to detect pointerEnter/pointerLeave on the parent and set some state that you use to change the text color?
11
6
127
4
3
33
V0.7.0 with CLI is finally out!
You can finally use StyleX within. Next app without opting out of SWC and TurboPack!
Also improvements to variables and fixes to bundler plugins.
3
6
30
Here’s a great introduction to Stylex from a creator that deserves more attention.
(Note: you need to set dev:true to inject classNames for debugging)
@JollyShopland
0
3
27
Here’s another guide to get started with a bare-bones Next+StyleX+open-props project from
@argyleink
The StyleX repo has an example app to copy as well.
0
2
26
We are aware of integration problems with certain frameworks, specially when using RSCs. We are working on making the experience better and would love some help!
5
2
27
Amazing, in-depth video explaining StyleX from
@DevSimplified
This is now the new canonical starting point for anyone diving into StyleX for the first time.
0
3
25
We have an RFC for an API to define styles completely inline. Would love your feedback!
2
3
24
@OrangeCMS
@reactnative
The API is similar, but extended to support media queries, pseudo classes etc.
1
0
10
Shout out to the good folks at
@RockstarGames
for releasing the GTA 6 trailer a day early to make way for the launch.
And imitation really is the best form of flattery. They, too, are pre-announcing 2 years early!
1
2
21
@JoshWComeau
@steida
Descendent and sibling selector support is in the works.
We hope most migrations from existing CSS-in-JS can be codemods.
1
0
20
And a Qwik City app
1
4
15
Typed variables can be animated. So you can now animate the angle or color within gradients.
@KevinJPowell
has a great tutorial!
1
1
14
CSS variables can now have types that are enforced by the browser.
StyleX now exports functions such as stylex.types.color() that can be used when defining variables.
2
1
13
Server rendering overhead of StyleX?
📜 Quantifying the Impact of Styled Components on Server Response Times -
@drewml
Uses SpeedScope to analyze a CPU trace
Styled Components account for 47% of SSR time 😝
A good reason to move to a zero-runtime CSS-in-JS solution with build-time extraction, or Tailwind
0
4
24
1
1
12
Our release notes include a small homage to the rotating gradient background and glow:
1
1
10
This is the Pandora’s box. Don’t do it!
0
0
10
CSS Cascade: The strategy used for choosing which CSS rule should win multiple rules apply. Aka Specificity Wars.
Inheritance: Child elements getting some styles from their parents. E.g. font-size, color, etc.
Composition: Merging styles to customise base component styles.
0
0
9
CSS is powerful and has amazing features. CSS layers is one of those amazing features.
Our job is to generate CSS that makes good use of that power while giving developers an interface that is vastly simpler, easier and more predictable.
@stylexjs
is so clever. It uses Cascade Layers to make CSS predictable, so last **always** wins. Bascially all CSS libraries struggle with this unless you manage cascade layers yourself, but StyleX generates cascade layers for you as a side effect
2
0
7
0
1
9
Absolutely thrilled and honoured to be nominated for the React Open Source Awards
@ReactSummit
!
Vote Now!
#OpenSourceAwards
#ReactSummit
0
2
9
@adamwathan
Will be adding proper support for this pattern soon. For now the recommendation is to use variables.
2
0
8
🥂🍻💜
✌️UnoCSS (
@antfu7
)
🦜
@tamagui_js
🐼
@panda__css
🍃NativeWind (and
@tailwindcss
)
🧁Vanilla Extract (
@markdalgleish
)
0
0
8
StyleX comes to Bun!
NedJulius has also published an experimental plugin for Bun
1
0
8
… and there’s a bunch of bug-fixes.
Read about all the new features and bug fixes.
0
0
7
StyleX is designed to be cached. Anything that might break that will live separately.
@trysmudford
@steida
@stylexjs
Not with Stylex itself. It would be trivial when using Bun macros.
I’m planning on porting Bun macros to Babel soon.
2
0
5
0
0
6
@Haddadome
That’s a separate project already being worked on. Will be released eventually, but not soon.
0
0
6
@ArthurODS_
@OrangeCMS
@reactnative
We’re still working on a React Native version. We don’t know what features will be supported.
1
1
6
Huge thanks to NedJulius and QingqiShi for contributing the ESLint rule to “sort-keys” to help enforce consistent ordering of styles.
And a prettier plugin too!
1
0
5
@JoshWComeau
@NoriSte
You should probably look at Linaria based on your needs. It’s traditional styled components that are compiled static CSS. It supports all crazy selectors that we never will.
0
0
5
But that’s not all! You can now use stylex.firstThatWorks for defining fallback values for variables that are not defined. No new API!
1
0
5
If you were confused by all these terms, here’s simplified descriptions.
CSS Cascade: The strategy used for choosing which CSS rule should win multiple rules apply. Aka Specificity Wars.
Inheritance: Child elements getting some styles from their parents. E.g. font-size, color, etc.
Composition: Merging styles to customise base component styles.
0
0
9
0
1
4
@artfromclt
@stitchesjs
Please tell us about the APIs from Stitches that you feel are missing and we can look into it.
0
0
4
@HipsterSmoothie
has a knack for finding issues. We are so thankful!
0
1
3
The logo that wasn't.
If we were still in the 90s, the StyleX logo may have looked like this:
0
0
3
@deadalnix
We don’t use Webpack internally, and we are aware of the problems with it. We are shipping a separate CLI to help while we get that sorted.
1
0
2
I’ve made it to threads!
0
0
3
The logo that wasn't, part 2.
This one is called "negative glow". I still think it looks quite cool, but it doesn't look so great in light-mode, `x` isn't easy to read for a lot of people and it requires "js" in the name.
0
0
3
@olivtassinari
@DanyCamirand
@MUI_hq
You can leave the debug classNames on in production if you so wish.
… even though the option is called “dev”.
1
0
2
@tyler_dot_earth
Help us write better bundler plugins and a better Next.js plugin.
0
0
2
@username_ZAYDEK
@thepredaytor
@mindplaydk
This Babel plugin may be of interest:
Lets you author StyleX with Tailwind syntax, while keeping all the consistency guarantees.
0
0
2
@kenrickbeckett
@Meta
But now you won’t be able to set a different value for them with stylex.createTheme!
(We already infer styles as const in stylex.create())
0
0
2
0
1
2
@username_ZAYDEK
@bentonnnnnn
To be fair, tailwind-merge works OK. It’s larger and slower than StyleX. But it mostly works.
1
0
2
…And honoured to have React-Strict-DOM, which is built on StyleX to win an OSS award!
Congrats🏆to the React OSS Awards winners!
💥Breakthrough of the Year: react-strict-dom (
@reactjs
)
💥The Most Exciting Use of Tech: React Native visionOS (
@callstackio
)
💥Productivity Booster:
@gluestack
💥Fun Side Project of the Year: React Server Components in Go (
@JLarky
)
0
7
11
0
0
2
@olivtassinari
@DanyCamirand
@MUI_hq
One of our goals is to solve debugging with atomic styles. We’ve made some progress but more to come.
1
0
2
@JoshWComeau
@username_ZAYDEK
@steida
This is the pattern we are planning to support. I.e “read” other elements but only style yourself. No styling at a distance.
Glad to see it’s a pattern being used with vanilla CSS already.
0
0
2
@thisizkp
@username_ZAYDEK
@bentonnnnnn
Layering is already not a problem with Tailwind. V4 is cleanup and perf upgrade. It doesn’t fundamentally change how it works.
2
0
1
@olivtassinari
@DanyCamirand
@MUI_hq
StyleX can generate debug classNames to show you exactly where the styles are coming from.
1
0
1
@nicknisi
@tailwindcss
That statement was for when not using utility functions like clsx.
Apart from the performance issues, clsx does solve most of the architectural limitations.
0
0
1
@username_ZAYDEK
@thepredaytor
@austin_malerba
A PR has improved the auto-complete. Will be out in the next release.
The styling limitations that exist today, will be removed soon.
1
0
1
@jacobrask
We rarely need those patterns internally. When we do, we use workarounds. Solving this problem is important for us.
0
0
1
@thepredaytor
@joebell_
CVA is incompatible with StyleX.
Please don’t try to use them together. CVA works with strings and breaks StyleX guarantees.
0
0
1
@jadvani_yug
Working on something that should support almost every setup. Will take a couple more weeks.
0
0
1
@joshmedeski
@nicknisi
@tailwindcss
Clarification: In the docs, we’re talking architectural limitations on code organisation vs styling constraints which is what Adam is talking about and we agree with.
Also: our intent is not to criticize Tailwind, but highlight differences.
1
0
1
@thepredaytor
Ok! I misunderstood the intent of the original code.
Some modifications:
Skip the lines with stylex.include
And be explicit about the variant being used. This can be wrapped in a component to provide defaults instead.
1
0
1
@TheNoahHein
@dabit3
@CSSHooks
@tailwindcss
We only remove the “selectors” part of CSS. The styling part is identical to vanilla CSS. By design.
So please learn CSS first and you can reach for StyleX if you feel like you need it.
0
0
1
@HouseOfMeza
We don’t change the colors you author. If you author with oklch you should get oklch
1
0
1
Read all about it:
1
0
1
@JoshWComeau
@username_ZAYDEK
@steida
Ok. Stay tuned! I think you’ll like what we come up with here.
0
0
1
@JollyShopland
Our recommendation is to use just 3 lines as a reset. This is to maximise compatibility for components published to NPM.
For apps, bring your own reset.
0
0
1
@thepredaytor
@adamwathan
Please put the media queries and pseudo classes within the value of properties.
Only pseudo elements are supported on the top-level (things that start with “::”)
0
0
1
@thepredaytor
Choose simplicity and don’t try to use fancy utility functions like CVA with StyleX. Here’s your code translated to StyleX APIs.
This is safer and faster. And we’re more likely to be able to detect if these styles were unused.
2
0
1