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.
Special thanks to Joel Austin for his work on the CLI.
Literal names for CSS variables
When using, stylex.defineVars, StyleX abstracts away the actual CSS variable name,
and lets you use it as a JavaScript reference. Behind the scenes, unique variable names
are generated for each variable.
However, there are scenarios where it is useful to know the exact variable name. For example, when you may want to use the variable in a standalone CSS file.
To address such use-cases, we have updated the stylex.defineVars API to use literals
that start with -- as is. Other than the keys passed to stylex.defineVars, the
API is unchanged.
const vars = stylex.defineVars({
'--primary-color': 'red',
'--secondary-color': 'blue',
});
When using literals for variable names, StyleX cannot guarantee uniqueness.
Bug Fixes and improvements
Additionally bug fixes to types, eslint rules and the bundler plugins has been made.