Skip to main content

2 posts tagged with "release"

View All Tags

· 2 min read
Naman Goel

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.

· 2 min read
Naman Goel

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 stylex.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.

Bug Fixes​

  • Fixed a bug where the ESLint plugin was sometimes unable to resolve local constants used for Media Queries and Pseudo Classes.
  • Resolved a bug where the runtime injection of styles in dev mode would sometimes fail.
  • Addressed a bug where styles injected at runtime during development would sometimes suffer from specificity conflicts.
  • The TypeScript types for Theme will now correctly throw an error when applying a theme for the wrong VarGroup.

In addition to these, we've made other improvements to the types and documentation. I want to extend my gratitude to all the contributors for their pull requests. ♥️

Happy New Year!