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]

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