Shorthand use case to defining variants

[kerimcet]

Is there any shorthand use case to variant definition?

variants: {
  spaceY: {
    1: { 
      spaceY: "$1" 
    },
    5: { 
      spaceY: "$5" 
    },
    10: { 
      spaceY: "$10" 
    }
  }
}

I would like to use this instead of code above:

variants: {
  spaceY: {
    1: "$1",
    5: "$5",
    10: "$10" 
  }
}

Also that might be a feature idea if its possible.

[lukemorales]

Your idea is very similar to this PR implementation: #721, they're discussing if this feature fits the plans for Stitches.

But your approach with the PR would become:

variants: {
  spaceY: (value: 1 | 5 | 10) => ({
    spaceY: value
  )}
}

or even better, if you want that to be dynamic with every space token:

variants: {
  spaceY: (value: Stitches.ScaleValue<'space'>) => ({
    spaceY: value
  )}
}

then you would be able to use:

<Component spaceY="$5" />

[kerimcet]

Thanks for the info! 😊