stylex.defineVars

Creates global CSS Custom Properties (variables) that can be imported and used within create calls anywhere within a codebase.

function defineVars<Styles extends {[key: string]: Value}>(
  styles: Styles,
): Vars<{[key in keyof Styles]: string}>;

By default, defineVars will create unique, hashed variable names. To create variables with custom names use a key that starts with --. These will generate CSS custom properties with the provided name instead of generating a globally unique name.

Example use:

You must define your variables as named exports in a .stylex.js (or .stylex.ts) file.

vars.stylex.js

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

export const colors = stylex.defineVars({
  accent: 'blue',
  line: 'gray',
  '--background': 'black',
});

You can then import and use these variables in any create call.

import * as stylex from '@stylexjs/stylex';
import { colors } from './vars.stylex.js';

const styles = stylex.create({
  container: {
    color: colors.accent,
    backgroundColor: colors['--background'],
  },
});