Release 0.15.0

StyleX v0.15.0 introduces significant improvements to media query handling, dynamic styles optimization, and improvements to the linter, types, and documentation.

Media query ordering

Previously, media queries within a style property were applied in a predetermined sorting order. This often meant that the order you authored the queries did not match how they were applied, so we recommended manually ensuring your media queries didn’t overlap to prevent unexpected overrides in behavior.

We've integrated our in-house media query parser and transformer to handle this automatically. You can now write overlapping media queries in a contextual style in the order you desire, and the compiler will rewrite them so that later queries take precedence over earlier ones.

The compiler now also validates media query syntax and simplifies complex queries when possible, opening the door to later optimizations.

As an example, take this create call:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (max-width: 1440px)': '1 / 4',
      '@media (max-width: 1024px)': '1 / 3',
      '@media (max-width: 768px)': '1 / -1',
    },
  },
});

This is now transformed at compile time to:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (max-width: 1440px) and (min-width: 1024.01px)': '1 / 4',
      '@media (min-width: 768.01px) and (max-width: 1024px)': '1 / 3',
      '@media (max-width: 768px)': '1 / -1',
    },
  },
});

This new feature is gated behind the config option enableMediaQueryOrder.

Dynamic styles improvements

Dynamic styles should now work more consistently when given the same values as static styles. Improvements have been made to how we handle null and undefined values.

We've also made optimizations in how we process dynamic styles to improve performance and minimize the amount of generated Javascript. We do this by using heuristics to detect values that can never be nullable.

Fixes

• Fixed TypeScript types for stylex.types.* functions (Thanks @nmn!)
• Resolved opaque type issues for InlineStyles. (Thanks @pawelblaszczyk5!)
• Fixed ESLint utility functions for number and math call validation and added style validation for length properties.

Documentation

• Added documentation around manual CSS variables generated with defineVars. (Thanks @necolas!)
• Updated outdated theming docs to align with current createTheme behaviour (Thanks @nmn!)
• Fixed ESLint rule severity syntax in the installation guide examples and cleaned up docs for descendent styles. (Thanks @sonsu95 and @mtpetros!)