Release 0.5.0

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

New stylex.attrs function

The stylex.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 stylex.attrs function so StyleX works well in more places. stylex.attrs returns an object with a class string and a style string.

New sort-keys rule for the Eslint plugin

A new @stylexjs/sort-keys plugin has been introduced which will sort styles alphabetically and by priority. This will make media query order more predictable.

Thanks @nedjulius!

New aliases option for the StyleX Babel plugin

A new aliases field can be used to configure StyleX to resolve custom aliases that may be set up in your tsconfig file. NOTE: StyleX currently needs to be configured with absolute paths for your aliases.

Thanks @rayan1810!

New Esbuild plugin

A new official plugin for Esbuild has been introduced as @stylexjs/esbuild-plugin.

Thanks @nedjulius!

Other Enhancements

• Configuration options passed to the StyleX Babel plugin will now be validated.
• The @stylexjs/stylex now has ESM exports alongside the commonJS exports.
• The ESLint valid-styles rule will catch when using empty strings as string values.

Bug Fixes

• Some CSS properties which previously caused type and lint errors will now be accepted.
• Using variables for opacity will no longer cause type errors.
• Using stylex.keyframes within stylex.defineVars will now work correctly
• runtimeInjection will correctly be handled
• Setting the value of variables from defineVars as dynamic styles will now work correctly.
• Usage of 0px within CSS functions will no longer be simplified to a unit-less 0 as this doesn't work in certain cases.
• Spaces around CSS operators will be maintained.

In addition to these, we've added an "Ecosystem" page to our website to highlight various community projects around StyleX.