Post

All new unplugin package. Ever since we first open sourced StyleX, integrating it with various bundler setups has been one of the biggest challenges. So far, the PostCSS plugin has been the smoothest experience we’ve been able to offer so far, but we knew we could do better.

The new unplugin package supports a variety of well known bundlers and we have expanded the examples in our repo to specifically test various Vite-based setups. This new plugin should be easier to setup, faster and more reliable than the PostCSS plugin. Please tell us if you still face challenges.

Note: Next.js is not yet supported with the unplugin package as it uses a complex multi-process webpack setup and Turbopack hasn’t shipped a plugin API yet. We look forward to having a first class integration with Next once Turbopack ships their plugin API.

stylex.when.* APIs We have shipped new APIs that finally gives you the ability to style conditionally based on the state of some *other* element. This is similar to Tailwind’s “group” and “peer” classes, but in all directions: - ancestor - descendent - siblingBefore - siblingAfter - anySibling

These APIs let you observe some other element that is “marked” with either - stylex.defaultMarker() - or a custom marker created with stylex.defineMarker() Again, this is similar to group or named groups in Tailwind.

Additionally, we’ve tweaked some of the default configuration options which affects what you’ll see in your dev tools during development, and improved file paths for finding the source of your styles. We’ve also fixed a bunch of bugs including a subtle bug with generating media query strings.

Try the new version of StyleX with the new features and the new unplugin package with your Vite apps. (Including with RSCs) And tell us what you think!!

Developers that go all in on StyleX tend to stick with it!

Andrew Lisowski 💻@hipstersmoothie.com

Stylex made me a css in js convert. The benefits you get from it are pretty hard to top - componentized css - better composition patterns - encourages isolated styles (ie a component only styles itself) - size of css caps our (it generates tailwind style utils)

1 repost5 likes