stylex.defineConsts

Defines static style constants that can be used directly in stylex.create calls anywhere in the codebase. Unlike stylex.defineVars, these values are inlined at build time and do not generate actual CSS variables.

Note: stylex.defineConsts is an experimental feature and cannot currently be used with stylex.firstThatWorks or when runtimeInjection is enabled.

Common use cases include:

• Media queries
• Fixed z-index layers
• Animation durations or easing curves
• Static spacing, font sizes, or colors that don’t need theming

function defineConsts<Consts extends { [key: string]: string }>(
  consts: Consts,
): Consts<{ [key in keyof Consts]: string }>;

Example use

Like defineVars, you must define your constants as named exports in a .stylex.js (or .stylex.ts) file. You can mix constants and variables in the same file.

constants.stylex.js

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

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 zIndices = stylex.defineConsts({
  modal: '1000',
  tooltip: '1100',
  toast: '1200',
});

export const animations = stylex.defineConsts({
  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
  fast: '150ms',
});

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

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

const styles = stylex.create({
  container: {
    position: 'relative',
    zIndex: zIndices.modal,
    transitionTimingFunction: animations.easeInOut,
    transitionDuration: animations.fast,
    color: {
      default: 'black',
      [breakpoints.small]: 'red',
      [breakpoints.medium]: 'blue',
      [breakpoints.large]: 'green',
    },
    padding: {
      default: 4,
      [breakpoints.medium]: 8,
      [breakpoints.large]: 16,
    },
  },
});