Insufficient CSS Purge on variants after build

[theMasix]

Description

I've written a button component with 3 color variants and 3 variant variants. (Checkout the project below for complete description):

import { defineRecipe } from '@pandacss/dev';

export const buttonRecipe = defineRecipe({
  className: 'button',
  description: 'The styles for the Button component',
  base: {
    color: 'neutral.700',
    p: '4px',
  },
  variants: {
    variant: {
      contained: {
        bg: 'blue.500',
      },
      outlined: {
        borderWidth: '4px',
      },
      text: {},
    },
    color: {
      blue: {},
      indigo: {},
      purple: {},
    },
  },
  compoundVariants: [
    {
      variant: 'contained',
      color: 'blue',
      css: {
        bg: 'blue.500',
      },
    },
    {
      variant: 'outlined',
      color: 'indigo',
      css: {
        border: 'indigo.500',
      },
    },
   ...
   ],
}

I only use color=blue and variant=contained in my app. When I build the app, I expect the Just-in-time compiler to remove unused variants styles from the final CSS file. But here is the end of CSS file:

...
@layer recipes {
 .button--variant_outlined {
   border-width: 4px;
 }
 @layer _base {
   .button {
     color: var(--colors-neutral-700);
     padding: 4px;
   }
 }
}
@layer utilities {
 .bg_blue\.500 {
   background: var(--colors-blue-500);
 }
 .bg_indigo\.500 {
   background: var(--colors-indigo-500);
 }
 .bg_purple\.500 {
   background: var(--colors-purple-500);
 }
 .border_blue\.500 {
   border-color: var(--colors-blue-500);
 }
 .border_indigo\.500 {
   border-color: var(--colors-indigo-500);
 }
 .border_purple\.500 {
   border-color: var(--colors-purple-500);
 }
}

As it can be seen, the border-{color}‍ and bg-{color} has been generated for all of the color and variants (that has been written in compoundVariants section)

Here is the question, why PandaCSS can not remove unused and extra border-{color} and bg-{color} classes since we don't use them at all?

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-ygnv7y?file=src%2Fcomponents%2Fbutton.style.ts

Steps to reproduce

1. install packages
2. build the app
3. checkout CSS file placed in dist dir

JS Framework

React (TS)

Panda CSS Version

^0.17.3

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

compoundVariants generates atomic CSS in the @layer utilities
due to static limitations, it's way easier to reason about if we just generate that CSS no matter the usage in your code (just like cva/sva)

if we JIT'd this as well, users would often expect those styles to be generated in simple cases that involves dynamic stuff
things like

const Button = ({ color, children }) => {
    const [variant, setVariant] = useState("contained")
    // ...
    return <div className={button({ color, variant })}>{children}</div>
}

which compoundVariants CSS should we generate in that case ? do we not generate anything unless using config.staticCss ? that doesn't look like a good DX

---

btw for your use-case, it looks like you're looking for colorPalette
https://panda-css.com/docs/guides/virtual-color#using-with-recipes