StyleX v0.12.0 introduces performance optimizations, several bug fixes, a new lint rule, and some cleanup of deprecated packages.
Performance
Object key minification
The keys of compiled style objects are now minified to reduce overall code size.
Faster theme compilation
Compiling createTheme
calls is now several orders of magnitude faster. This was achieved by caching evaluated theme objects.
ESLint improvements
New no-legacy-media-queries
rule
A new rule has been added to the StyleX ESLint plugin to flag uses of the deprecated media query and pseudo-class syntax. This rule flags usage of the legacy media query and pseudo-class syntax that wraps multiple property values inside a single @
-rule or pseudo-class block. This pattern is deprecated and should be replaced with the updated syntax here. (Thanks vincentriemer!)
Bug fixes
Styling pseudo-elements in dynamic styles
Dynamic styles can now be used to style pseudo-elements. Previously, the generated CSS variables could not be inherited by pseudo-elements.
Disallow object spreads in create
Object spreading in create
calls is now disallowed by the compiler, as this breaks runtime caching of style merging.
Deprecations
The following bundler integration packages have been deprecated. We're focusing development on the core StyleX toolchain, and providing consistent tools for use across different bundlers. We recommend using the @stylexjs/postcss-plugin
.
@stylexjs/esbuild-plugin
@stylexjs/nextjs-plugin
@stylexjs/webpack-plugin
The @stylexjs/rollup-plugin
remains, but may be generalized into an unplugin
package to extend this option to other bundlers.
The following other packages have also been deprecated.
@stylexjs/dev-runtime
@stylexjs/open-props
(replacement available atstylextras/open-props
)