Compound Variants definition consolidation

[imjakechapman]

Hopefully I can get some hot takes on this.

Was building out a component that has 15+ variants. As well as different states it can be in depending on the compounded variants that are applied. I noticed that it quickly began to grow the compoundVariants object.

What if along with compound variants allowing a single variant at a time

compoundVariants: [
    {
      size: '1',
      weight: 'normal'
      css: {
        fontColor: '$primary',
      },
    },
    {
      size: '2',
      weight: 'semibold',
      css: {
        fontColor: '$secondary',
      },
    },
    {
      size: '2',
      weight: 'bold',
      css: {
        fontColor: '$secondary',
      },
    },
   {
      size: '3',
      weight: 'semibold',
      css: {
        fontColor: '$secondary',
      },
    },
    {
      size: '3',
      weight: 'bold',
      css: {
        fontColor: '$secondary',
      },
    },
  ],

Instead, there was a way to consolidate these multiple compound variants down to reduce the definition footprint a bit? Like so...

compoundVariants: [
    {
      size: '1',
      weight: 'normal'
      css: {
        fontColor: '$primary',
      },
    },
    {
      size: ['2', '3'],
      weight: ['semibold', 'bold'],
      css: {
        fontColor: '$secondary',
      },
    },
  ],

The variant property can stay a single string value, but we can also pass an array of string values that basically is saying if the compound variants size is either 2 or 3, and weight is either semibold or bold, font-color is secondary. This would drastically reduce the amount of compound variants we'd need to end up writing to cover components that have many different states they can be in (I'm looking at you Mr. Button)