Release 0.16.0

This release adds support for a long-requested feature—descendant and sibling selectors! We've also expanded defineConsts capabilities, improved our lint rules, added a webpack example, and made some performance optimizations.

Descendant and sibling selectors

We’re adding a new suite of APIs under stylex.when with support for descendant and sibling selectors: ancestor, descendant, sibling, prevSibling, and nextSibling.

• Ancestor/descendant (stylex.when.ancestor and stylex.when.descendant) selectors let you style an element based on the state of ancestors or descendants in the DOM tree.
• Sibling selectors (stylex.when.sibling, stylex.when.prevSibling and stylex.when.nextSibling) let you style an element based on the state of adjacent siblings.

To use descendant and sibling selectors, you'll need to mark the element being observed by passing the stylex.defaultMarker class name. Support for custom markers will be added in a future release.

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
    foo: {
      backgroundColor: {
        default: 'blue',
        [stylex.when.ancestor(':hover')]: 'red',
      },
    },
});

<div {...stylex.props(stylex.defaultMarker)}>
  <div {...stylex.props(styles.foo)}> Some Content </div>
</div>

Note: Lookahead selectors like stylex.when.nextSibling, stylex.when.sibling, and stylex.when.descendant rely on the CSS has() selector, which does not yet have widespread browser support.

defineConsts improvements

We’ve added support for overriding defineConsts constants that reference CSS variables (var(--*)) when set to variables and variable fallbacks. Constants now behave like passthroughs, with overrides applying to the original CSS variable. This allows you to re-define them within create calls as you would for defineVars.

export const colors = stylex.defineConsts({
  bg: "var(--background-color)",
  accent: "var(--accent, lightblue)",
});

import {colors} from "./colors.stylex.js";
const styles = stylex.create({
  root: {
    [colors.bg]: "red",
    [colors.accent]: "darkblue",
  },
});

We've also added support for defineConsts in dynamic styles. You can now use defineConsts to declare media queries within dynamic styles as you would in regular StyleX namespaces.

const style = stylex.create({
  main: (height) => ({
    color: {
      default: colors.red,
      [breakpoints.sm]: colors.blue,
      [breakpoints.md]: colors.yellow,
    },
    height: height - 10,
  }),
});

Linter improvements

We made several improvements and lint fixes to the valid-styles rule. The valid-styles rule now has support for locally resolved constants.

const HEIGHT = 5;

const styles = stylex.create({
  default: {
    scrollMarginTop: HEIGHT + 5,
    scrollMarginBottom: HEIGHT * 5,
  },
});

We added linter support for setting CSS custom properties within create calls. (Thanks @dwei-figma!)

const HEIGHT = 5;

const styles = stylex.create({
  default: {
    --background-color: 'red',
  },
});

We also added support for positionTry styles (Thanks @abhakat!), better validation for pseudo-elements (Thanks @dwrth!), migrated object type validation to Flow (Thanks @jcperez-ch!), and of 0 values as strings ('0') for length properties.

Bug fixes

• Fixed class name construction for dynamic contextual styles.
• Reduced chances of dynamic variable name collisions. (Thanks @necolas!)

Miscellaneous

• A webpack example was added to our suite of StyleX example integrations! (Thanks @RavenColEvol!)
• Support to hoist stylex.create and nested objects within functions.
• Optimized precomputed props calls in JSX. (Thanks @necolas!)
• More efficient handling of null/undefined in dynamic styles.