stylex.defineConsts

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

Note: defineConsts does not currently have enableMediaQueryOrder config support.

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