Skip to main content

Release 0.10.0

· 3 min read
Naman Goel

Happy new year! We are excited to announce the release of StyleX v0.10.0, which includes several new features and improvements.

Easier adoption with the all-new PostCSS plugin​

StyleX now ships with an all-new PostCSS plugin. This plugin allows you to use StyleX with any PostCSS-compatible toolchain, to better integrate with existing projects. The PostCSS plugin is now our recommended approach for using StyleX in a Next.js or Vite project. The example Next.js app in this repository has been updated to reflect this change. The existing @stylexjs/nextjs-plugin will be deprecated in the next release.

A huge thanks to javascripter for contributing this plugin.

Better debugging​

StyleX has a new debug option to enable more readable classNames and variable names during development. With this option turned on, classNames will be prefixed with the affected CSS property and variables will be prefixed with their key name in your source code. (Thanks mellyeliu)

Additionally, the error messages of the StyleX Babel plugin have been improved to be more granular and correctly highlight the location of the source code causing the error.

ESLint improvements​

All new no-unused rule​

The StyleX ESLint plugin now ships with a new no-unused rule that detects unused styles. (Thanks Samantha-Zhan)

Other improvements​

The valid-styles rule now offers more auto-fixes, and a small bug was fixed in the valid-shorthands rule. (Thanks mellyeliu)

Theming now works without manually configuring rootDir​

StyleX previously required manual configuration of unstable_moduleResolution.rootDir for enabling the theming APIs. This is no longer the case. Additionally, compilation should be more reliable and cache-friendly, especially when using package managers like pnpm.

Performance improvements for Dynamic styles​

StyleX uses CSS custom properties (aka CSS variables) as inline styles for dynamic values for styles. In v0.10.0 StyleX now generates @property declarations marking these variables as non-inheritable. This improves the style resolution performance of the browser's styling engine, which in some cases can be quite significant. We have also updated our benchmarks to track the code size impact of this change. (Thanks Samantha-Zhan)

CLI improvements​

Caching​

The StyleX CLI now uses a cache by default which ensures that only changed files are recompiled. This cache is stored in the nearest node_modules folder and works even without using watch mode. (Thanks mellyeliu)

Better interoperability​

The CLI now supports configuring additional Babel presets and plugins that can run before the StyleX plugin to let you use custom syntax transformations. The StyleX Babel plugin was also updated to make this use-case more reliable.

Windows support​

A bug with file paths was fixed and the CLI should now work correctly on Windows.

Documentation​

We have introduced a new Recipes section in the documentation to showcase some useful patterns when using StyleX.

Miscellaneous​

  • The StyleX Rollup plugin now supports generating filename hashes. (Thanks nonzzz)
  • We now use the @dual-bundle/import-meta-resolve package to replace esm-resolve which should making theming APIs more reliable. (Thanks p0nch000)
  • Removed unnecessary quotes around 'content' values in CSS files. (Thanks nikeee)
  • Added support for view-transition-name in ESLint's valid-styles rule.
  • Added support for interpolate-size in ESLint's valid-styles rule.