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