Variants which contain numeric strings (e.g. "-12") and number keys (e.g. 12) are assigned a 'number' type when generating a union using the VariantProps type
willdspd opened this issue · comments
Let's say I create a component with a variant called 'margin', which has a mix of numeric and numeric string keys, like so:
const StyledBox = styled('div', {
margin: {
'-12': { margin: -12 },
12: { margin: 12 },
},
})
I would expect, if I then passed StyledBox
to Stitches.VariantProps (e.g. Stitches.VariantProps<typeof StyledBox>
), the following type would be generated considering that the keys are both technically numeric:
margin?: -12 | 12 | ({
"@md"?: -12 | 12 | undefined;
"@lg"?: -12 | 12 | undefined;
"@initial"?: -12 | 12 | undefined;
} & {
[x: string]: -12 | 12 | undefined;
}) | undefined
However, the following type is generated, which contains the 'number' type:
margin?: number | "-12" | "12" | ({
"@md"?: number | "-12" | "12" | undefined;
"@lg"?: number | "-12" | "12" | undefined;
"@initial"?: number | "-12" | "12" | undefined;
} & {
[x: string]: number | "-12" | "12" | undefined;
}) | undefined
Naturally this is not ideal for strong typing as any number can be accepted as a variant key. However, interestingly, if I change the variant negative key (e.g. "-12") to a non numeric string (e.g. "neg12") the types are correct/how I would want them in my first example. For example:
const StyledBox = styled('div', {
margin: {
'neg12': { margin: -12 },
12: { margin: 12 },
},
})
And the correctly generated types:
margin?: 12 | "12" | "neg12" | ({
"@md"?: 12 | "12" | "neg12" | undefined;
"@lg"?: 12 | "12" | "neg12" | undefined;
"@initial"?: 12 | "12" | "neg12" | undefined;
} & {
[x: string]: 12 | "12" | "neg12" | undefined;
}) | undefined
This is not a big issue as I can just change any numeric strings (e.g. "-12") to non-numeric strings (e.g. "neg12") in my variant keys, but I hope it's something that can be fixed in the future.
Stitches version: 1.2.8