Add className support to compoundVariants

[thisissakamoto]

Description

Add className support to compoundVariants

Description

Currently, compoundVariants generate long, complex class names that include all variant combinations and CSS properties. This makes the HTML output verbose and difficult to debug. Pandacss should add support for a className property in compoundVariant objects to allow custom, predictable class names for specific variant combinations. e.g

compoundVariants: [
    {
      className: "btn-cvs",
      palette: ["neutral"],
      variant: ["primary"],
      css: {
        "--bg-hover":
          "color-mix(in oklab, 100% var(--bg-contrast), 8% {colors.bg.primary})",
        "--bg-active":
          "color-mix(in oklab, 100% var(--bg-contrast), 12% {colors.bg.primary})",
      },
    },
  ],

Current Behavior

When using compoundVariants, the generated class name includes:

• All variant combinations (size, wide, palette, radius, variant)
• All CSS properties with their values encoded in the class name

Example output:

<button class="btn btn--size_md btn--wide_false btn--palette_neutral btn--radius_full btn--variant_primary --bg-hover_color-mix(in_oklab,_100%_var(--bg-contrast),_8%_{colors.bg.primary}) --bg-active_color-mix(in_oklab,_100%_var(--bg-contrast),_12%_{colors.bg.primary})">

Expected output:

<button class="btn btn--size_md btn--wide_false btn--palette_neutral btn--radius_full btn--variant_primary --btn--variant_primary--palette_neutral">

or related

Problem Statement/Justification

Enable custom className for compound variant combinations

Proposed Solution or API

compoundVariants: [
    {
      className: "btn-cvs",
      palette: ["neutral"],
      variant: ["primary"],
      css: {
        "--bg-hover":
          "color-mix(in oklab, 100% var(--bg-contrast), 8% {colors.bg.primary})",
        "--bg-active":
          "color-mix(in oklab, 100% var(--bg-contrast), 12% {colors.bg.primary})",
      },
    },
  ],

Alternatives

No response

Additional Information

No response