Why don't we write all cva variant rules as compound styles?

[jorgezreik]

The cva function lets us write simple variants and compound variants. If compound variants are a more expressive way to write multi-variant styles, why use simple variants at all?

Not a suggestion, just trying to understand the design decisions behind the syntax!

Example

With simple and compound variants you would write a style like this:

const button = cva({
  base: {
    padding: '8px 16px',
    borderRadius: '4px',
  },
  variants: {
    color: {
      primary: {
        backgroundColor: 'blue',
        color: 'white'
      },
      secondary: {
        backgroundColor: 'gray',
        color: 'black'
      }
    },
    disabled: {
      true: {
        opacity: 0.5,
        cursor: 'not-allowed'
      }
    }
  },
  compoundVariants: [
    {
      size: 'large',
      color: 'secondary',
      disabled: true,
      css: {
        backgroundColor: 'lightgray',
        color: 'darkgray',
        border: 'none'
      }
    }
  ]
})

With just compound variants, we could write this:

const button = cva({
  base: {
    padding: "8px 16px",
    borderRadius: "4px",
  },
  compoundVariants: [
    {
      color: "primary",
      css: {
        backgroundColor: "blue",
        color: "white",
      },
    },
    {
      color: "secondary",
      css: {
        backgroundColor: "gray",
        color: "black",
      },
    },
    {
      disabled: "true",
      css: {
        opacity: 0.5,
        cursor: "not-allowed",
      },
    },
    {
      size: "large",
      color: "secondary",
      disabled: true,
      css: {
        backgroundColor: "lightgray",
        color: "darkgray",
        border: "none",
      },
    },
  ],
});

Why is the first preferred?

[segunadebayo]

Hi @jorgezreik,

That's an interesting thought. Technically speaking, Panda doesn't impose any recommended way of writing cvas. You can use both variants and compound variants.

Regarding your suggested syntax, I think this is a bug in our code. Compound variants should only allow you to select from already defined variants. This will be updated pretty soon.

You also lose type safety for the second syntax since you're selecting variants that were not defined.

[prasadsawant7-spinach]

@jorgezreik I also find compound variants useful and more expressive as well as more customized.