Grouping of the Compound Variants

[dvlden]

I came across this problem, where I have to duplicate some of the properties...
Say if I had a shape variant that supported circle and square, I'd have them used in compound with size where width and height would be the same for both of the shapes. The only difference is that circle would have border-radius.

Example:

const Button = styled('button', {
  variants: {
    size: {
      s: {
        fontSize: '$3',
        padding: '$2'
      },
      m: {
        fontSize: '$3',
        padding: '$3'
      },
      l: {
        fontSize: '$4',
        padding: '$4'
      }
    },
    shape: {
      square: {
        padding: 0
      },
      circle: {
        padding: 0,
        borderRadius: '$round'
      }
    }
  },

  compoundVariants: [
    {
      size: 's',
      shape: 'circle',
      css: {
        square: '32px',
        minWidth: '32px'
      }
    },
    {
      size: 'm',
      shape: 'circle',
      css: {
        square: '40px',
        minWidth: '40px'
      }
    },
    {
      size: 'l',
      shape: 'circle',
      css: {
        square: '48px',
        minWidth: '48px'
      }
    },
    // Duplications for a different shape
    {
      size: 's',
      shape: 'square',
      css: {
        square: '32px',
        minWidth: '32px'
      }
    },
    {
      size: 'm',
      shape: 'square',
      css: {
        square: '40px',
        minWidth: '40px'
      }
    },
    {
      size: 'l',
      shape: 'square',
      css: {
        square: '48px',
        minWidth: '48px'
      }
    }
  ]
})

Desired solution:

compoundVariants: [
    {
      size: 's',
      shape: ['circle', 'square'],
      css: {
        square: '32px',
        minWidth: '32px'
      }
    },
    {
      size: 'm',
      shape: ['circle', 'square'],
      css: {
        square: '40px',
        minWidth: '40px'
      }
    },
    {
      size: 'l',
      shape: ['circle', 'square'],
      css: {
        square: '48px',
        minWidth: '48px'
      }
    }
]

It'd be nice if this was supported, atm I just have these duplications, to support these two shapes. If it was more than two, I'd definitely exclude shapes from variants. 😆