StyleX v0.7.3 is now available with a fix to the Rollup plugin, which didn't previously include all the necessary files in the publish to NPM.

We're excited to release StyleX v0.7.0 with a new CLI to make it easier to get started with StyleX, improvements to variables, and various bug-fixes.

CLI​

StyleX relies on a compiler that transforms your JavaScript code and generates a static CSS file. However, integrating this compiler with with your bundler can be tricky. So, while we continue to work on improving the quality of our bundler integrations, we are introducing a new CLI as an alternative!

The CLI transforms an entire folder. It generates an output folder where StyleX has already been compiled away and a static CSS file has been generated. Further, the CLI inserts an import statement for the generated CSS file into each file that uses StyleX.

We are excited to offer this alternative to the bundler-based setup and are choosing to release the CLI in an experimental state. We would love to hear your feedback on how it works for you and what improvements you would like to see.

We're excited to release StyleX v0.6.1 with some big improvements for working with CSS custom properties (aka "variables") as well as numerous bug-fixes.

Improvements for variables​

We've added some new features and improvements for working with variables and themes in StyleX.

Fallback values for variables​

You can now provide a fallback value for variables defined with the defineVars API. This new capability does not introduce any new API. Instead, the existing firstThatWorks API now supports variables as arguments.

We're excited to release Stylex v0.5.0 with some big improvements and fixes!

New attrs function​

The props function returns an object with a className string and a style object. Some frameworks may expect class instead of className and a string value for style.

We are introducing a new attrs function so StyleX works well in more places. attrs returns an object with a class string and a style string.

Three weeks ago, we open-sourced StyleX. Since then, we've been diligently fixing bugs and making improvements. Here are some of the highlights:

Enhancements​

• The amount of JavaScript generated after compilation has been further reduced.
• Added support for some previously missing CSS properties to the ESLint plugin.
• Added support for using variables in keyframes.
• Removed the code for style injection from the production runtime, reducing the size of the runtime by over 50%.
• Added Flow and TypeScript types for the Rollup Plugin.
• Added the option to use CSS Layers in all bundler plugins.
• TypeScript will now auto-complete style property names.
• Bundler plugins will now skip files that don't contain StyleX, resulting in faster build times.

We are thrilled to introduce StyleX. StyleX is an expressive, deterministic, reliable, and scalable styling system for ambitious applications. We've taken the best ideas from the styling libraries that have come before to create something that is simultaneously familiar and uniquely new.

What is StyleX?​

StyleX takes the developer experience of CSS-in-JS libraries and uses compile-time tooling to bridge it with the performance and scalability of static CSS. However, StyleX is not just another compiler-based CSS-in-JS library. StyleX has been carefully designed to meet the requirements of large applications, reusable component libraries, and statically typed codebases.

1. StyleX supports an expressive subset of CSS. It avoids complex selectors and guarantees no specificity conflicts in the generated CSS.
2. StyleX transforms, organizes, and optimizes styles into "atomic" CSS class names. There's no need to learn or manage a separate library of utility class names.
3. StyleX allows styles to be merged across file and component boundaries, making it ideal for component libraries that allow user customization.
4. StyleX is fully typed and provides type utilities to allow fine-grained control over what properties and values can be accepted by a component.