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, anySibling, siblingBefore, and siblingAfter.

• 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.anySibling, stylex.when.siblingBefore and stylex.when.siblingAfter) 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>

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.

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>

StyleX v0.13.0 introduces two new APIs and several breaking changes to compiler defaults, alongside various bug fixes.

New APIs​

defineConsts​

We've added a new defineConsts API to allow for declaration and use of constant values. Unlike defineVars, these are inlined at build-time and do not generate CSS variables. This is a long requested feature that allows for shareable media queries.

export const breakpoints = stylex.defineConsts({
  small: '@media (max-width: 600px)',
  medium: '@media (min-width: 601px) and (max-width: 1024px)',
  large: '@media (min-width: 1025px)',
});

export const colors = stylex.defineConsts({
  brand: '#0055FF',
  surface: '#FFFFFF',
  text: '#111111',
});

You can then import and use these constants in any create call:

import * as stylex from '@stylexjs/stylex';
import { breakpoints, colors } from './constants.stylex.js';

const styles = stylex.create({
  container: {
    padding: {
      default: '4px'
      [breakpoints.small]: '8px',
      [breakpoints.medium]: '16px',
      [breakpoints.large]: '24px',
    },
  },
  label: {
    color: colors.text,
  },
});

positionTry​

positionTry enables graceful fallback positioning via the @property-try at-rule. This makes it easier to handle layout edge cases across varying browser support and runtime constraints. (Thanks nmn!)

const fallback = stylex.positionTry({
  positionAnchor: '--anchor',
  top: '0',
  left: '0',
  width: '100px',
  height: '100px',
});

const styles = stylex.create({
  box: {
    positionTryFallbacks: fallback,
  },
});

StyleX v0.12.0 introduces performance optimizations, several bug fixes, a new lint rule, and some cleanup of deprecated packages.

Performance​

Object key minification​

The keys of compiled style objects are now minified to reduce overall code size.

Faster theme compilation​

Compiling createTheme calls is now several orders of magnitude faster. This was achieved by caching evaluated theme objects.

ESLint improvements​

New no-legacy-contextual-styles rule​

A new rule has been added to the StyleX ESLint plugin to flag uses of the deprecated media query and pseudo-class syntax. This rule flags usage of the legacy media query and pseudo-class syntax that wraps multiple property values inside a single @-rule or pseudo-class block. This pattern is deprecated and should be replaced with the updated syntax here. (Thanks vincentriemer!)

Release Notes​

StyleX v0.11.0 is now available, with significant improvements in debugging, CLI caching, and documentation!

Release Notes​

• Fixed a bug where variables with camelCase names were incorrectly converted to kebab-case (Thanks yasuhiro-yamamoto)
• Fixed a bug in the eslint valid-styles rule where it would incorrectly flag when importing a file with an extension (Thanks beaumontjonathan)
• Added support for .js resolved file extension imports from .ts files (Thanks beaumontjonathan)
• Replaced crypto with murmurhash for CLI caching
• Fixed a bug where the import resolve function would not respect the Windows system (Thanks nonzzz)
• Fixed a bug where the initial-value in @Property was invalid

Happy new year! We are excited to announce the release of StyleX v0.10.0, which includes several new features and improvements.

Easier adoption with the all-new PostCSS plugin​

StyleX now ships with an all-new PostCSS plugin. This plugin allows you to use StyleX with any PostCSS-compatible toolchain, to better integrate with existing projects. The PostCSS plugin is now our recommended approach for using StyleX in a Next.js or Vite project. The example Next.js app in this repository has been updated to reflect this change. The existing @stylexjs/nextjs-plugin will be deprecated in the next release.

A huge thanks to javascripter for contributing this plugin.

Better debugging​

StyleX has a new debug option to enable more readable classNames and variable names during development. With this option turned on, classNames will be prefixed with the affected CSS property and variables will be prefixed with their key name in your source code. (Thanks mellyeliu)

Additionally, the error messages of the StyleX Babel plugin have been improved to be more granular and correctly highlight the location of the source code causing the error.

ESLint improvements​

All new no-unused rule​

The StyleX ESLint plugin now ships with a new no-unused rule that detects unused styles. (Thanks Samantha-Zhan)

StyleX v0.9.3 is now available with some big improvements and bug-fixes.

Improvements to Theming APIs​

There are some big improvements to the predictability and reliability of our theming APIs — defineVars and createTheme.

Breaking Change: Themes are now exclusive​

When you create a VarGroup with defineVars, you are able to theme any subset of the variables within using the createTheme API. These themes can then be applied like any other StyleX styles using props (or attrs). If you try to apply multiple themes for the same VarGroup, on the same element, the last applied theme wins, just as you might expect.

However, previously, if you instead applied one theme on a parent element, and another theme on a child element, the themes would end up being merged.

StyleX v0.8.0 is now available with a bunch of fixes and new ESlint rules.

Linting Enhancements​

We've been making a lot of improvements to our ESLint plugin. We've both improved our existing rules and added new ones. Thanks to Melissa Liu!

Here are some of the highlights:

New valid-shorthands rule​

This rule enforces our opinions on when and how you should use CSS shorthand properties. It disallows the use of multi-value shorthands for shorthands, and disallows certain properties altogether.