How can I get the valid keys off of a defineVars?

[kennetpostigo]

I define a huge list of colors. I want it to be valid for the consumer of my component to be able to pass in only valid tokens for colors. How can I type this properly to allow that? For example i'm trying to do something like this:

<Text color={colors.gray11}>Hello World</Text>

In other styling solutions that allow styling via props this just works, and as i'm porting to stylex it's something I don't want to change everywhere, but would love to support being able to specify the color directly inline like this.

Is this possible with stylex?

[nmn]

StyleX supports a slightly different pattern to achieve the type-safety you're going for.

You're not allowed to pass just the value of a style, but you can accept the style itself.

type ColorsObj = typeof colors;

type Props = Readonly<{
  style?: StyleXStyles<{
    color: ColorsObj[keyof ColorsObj],
    ...
  }>
  ...
}>;

The StyleXStyles marks all keys not mentioned in the object as never, so you get to define exactly the style properties and their values that are accepted.

You can also just accept a "variant" prop and apply styles conditionally within the Text component which is described here: https://stylexjs.com/docs/learn/styling-ui/using-styles/#style-variants