Allow strings in style variants

[Spaubleit]

When I try to use sprinkles with the styleVariants, I need to wrap it in an array:

export const size = styleVariants({
    small: [sprinkles({ 
        height: "x2",
        fontSize: 12,
    })],
    medium: [sprinkles({
        height: "x3",
        fontSize: 14,
    })],
    large: [sprinkles({
        height: "x4",
        fontSize: 16,
    })],
})

I think the array is redundant here. It would be better as in the example below:

export const size = styleVariants({
    small: sprinkles({ 
        height: "x2",
        fontSize: 12,
    }),
    medium: sprinkles({
        height: "x3",
        fontSize: 14,
    }),
    large: sprinkles({
        height: "x4",
        fontSize: 16,
    }),
})

Am I right or not? Perhaps some implementation details prevent it. Thank you.

[bwyx]

if you really hate the redundant array, you could replace styleVariants() with a simple js object like this:

export const size = {
  small: sprinkles({}),
  medium: sprinkles({}),
  large: sprinkles({})
}

it's still type-safe since it's just an object.

<div className={size['extraLarge']} /> // TypeError

but I've no idea what VE styleVariants() does under the hood, or what it impacts if exports sprinkles inside an object. maybe other folks can explain.

[Spaubleit]

Good idea. But I use variants in recipes later. So this is not an option for me.