Release 0.13.0

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.

constants.stylex.js

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,
  },
});

Breaking changes

• The attrs API is removed due to low usage and redundant functionality; non-React users can replace it with a wrapper around props as documented here.
• The runtimeInjection compiler option is now disabled by default in development mode (dev:true) to better match production behavior.
• ESLint rule no-legacy-conditional-styles is renamed to no-legacy-contextual-styles.
• The config option useRemForFontSize is renamed to enableFontSizePxToRem; now disabled by default and not intended for external use.
• The config option genConditionalClasses is renamed to enableInlinedConditionalMerge; now enabled by default and not intended for external use.

Fixes

• Fixed duplicate classNames in styles with nested pseudo-classes (Thanks jeongminsang!)
• ESLint plugin now correctly supports importSources object syntax in validImports (Thanks javascripter!)
• Fixed a bug where CSS variables would be wrapped in quotes when used with the content property.
• Fixed evaluation bug in firstThatWorks when the final value was a CSS variable.
• Fixed TypeScript types for themes and types functions.

Miscellaneous

• Rewrote the runtime style injection system to be more robust in dev. This resolves issues with hot reloading and duplicate style tags.
• Added Flow types for anchor positioning. (Thanks Jta26!)
• Added support for custom importSources in the PostCSS plugin for React Strict DOM compatibility. (Thanks javascripter!)
• Improved compiler error messages.

Deprecations

We’ve deprecated the @stylexjs/shared package on npm.