Skip to main content

Release 0.14.0

· 2 min read
Nicolas Gallagher
Vincent Riemer
Melissa Liu

StyleX v0.14.0 introduces new APIs to the compiler and linter, as well as a couple of breaking changes to improve performance.

New features​

Compiler: viewTransitionClass​

The viewTransitionClass API allows you to use StyleX to customize your CSS View Transitions. This API works nicely with React’s new <ViewTransition /> component:

import {unstable_ViewTransition as ViewTransition} from 'react';
import * as stylex from '@stylexjs/stylex';

const transitionClass = stylex.viewTransitionClass({
  old: {
    animationName: stylex.keyframes({ to: { opacity: 0 } }),
    animationTimingFunction: 'ease-out',
    animationDuration: '300ms',
  },
  new: {
    animationName: stylex.keyframes({ from: { opacity: 0 } }),
    animationTimingFunction: 'ease-out',
    animationDuration: '300ms',
  },
});

// in a component definition

<ViewTransition default={transitionClass}>
  <Content />
</ViewTransition>

Linter: validImports​

The @stylexjs/eslint-plugin package now supports the validImports option for all rules, allowing you to configure where the linter expects StyleX to be imported from. This is equivalent to the importSources option for the compiler. Thanks to @javascripter for this improvement.

{
  // Default: ['stylex', '@stylexjs/stylex']
  validImports: Array<string | { from: string, as: string }>,
}

Breaking changes​

Style resolution​

StyleX will now use property-specificity instead of application-order as the default value for the styleResolution option (the strategy used to merge styles). The difference between these 2 strategies is as follows:

  • application-order
    • The last style wins, i.e., margin wins over marginTop if it appears last in the order of styles.
    • Larger generated JavaScript objects.
  • property-specificity
    • The more specific style wins, i.e., marginTop wins over margin irrespective of the order of styles.
    • Disallows more shorthands, e.g., background, border.
    • Smaller generated JavaScript objects.

If you experience visual regressions, set styleResolution to application-order. However, the performance metrics we track are all significantly improved or neutral when using property-specificity, therefore, we strongly encourage migration.

Fixes​

  • [babel-plugin] Fix theming in dev/debug mode.
  • [eslint-plugin] Add autofix support for all remaining nonstandard CSS properties to the valid-styles rule.
  • [stylex] Fix the TypeScript types. Thanks to @pawelblaszczyk5 for this improvement.