Extending styles of multiple variants to form another variant

[a-y-u-s-h]

Is your feature request related to a problem? Please describe.
Currently the variant prop accepts a string and allows creating variants by extending a single variant. It's not really a problem, but doing so results in bigger theme files compared to a scenario where the variant key could take an array or a string, and then merge all their styles in order to create resulting variant.

Describe the solution you'd like
variant key should be able to accept a string or an array of variants, and then if it's a string - it behaves like how it behaves right now but if it's an array: it should merge the styles of those variants in order that they're mentioned in - sort of like how we extend styles in SCSS. This will result in less number of variants and more crazy combinations.

Describe alternatives you've considered
SCSS does this properly, but I just use Theme UI and then just extend one variant and copy styles from the variants that I want to extend.

[dreamyguy]

It would be great if variant could accept/be an array. Right now, if I want to merge two variants I have to create another variant, duplicating the styles. But the values are already defined, and the composition principle "breaks".

If I understood it right, I think it would solve #1209 as well.

[atanasster]

• @hasparus
  I would really appreciate some help checking the PR, as I am only getting familiar with the code base and tools/tests and into which branch to merge.