TypeScript Error When Using CSS Variables in Props

[michaltarasiuk]

Describe the issue

I'm trying to pass styles as props in TypeScript, but I'm getting an error when I use a CSS variable. The error says that the type 'Color<...>' can't be assigned to 'Readonly<string | null | undefined>' in the style prop.

Expected behavior

Extend the type 'Readonly<string | null | undefined>' to include a CSS variable

Steps to reproduce

function Parent() {
  return <Child style={styles.base} />;
}

function Child({style}: {style: stylex.StyleXStyles}) {
  return <div {...stylex.props(style)} />;
}

const styles = stylex.create({
  base: {
    backgroundColor: baseColors.background,
  },
});

// tokens.stylex.ts
const baseColors = stylex.defineVars({
  background: stylex.types.color('#000000'),
});

[michaltarasiuk]

It can be solved this way, but I'm not sure it's the best option.

function Parent() {
  return <Child style={styles.base} />;
}

function Child({
  style,
}: {
  style: stylex.StyleXStyles<{
    backgroundColor: Readonly<string | null | undefined> | stylex.Types.Color<string>;
  }>;
}) {
  return <div {...stylex.props(style)} />;
}

const styles = stylex.create({
  base: {
    backgroundColor: baseColors.background,
  },
});

// tokens.stylex.ts
const baseColors = stylex.defineVars({
  background: stylex.types.color('#000000'),
});