Generate CSS file with all variants

[TheOrdinaryDev]

Is it possible to generate CSS file with all variants including the unused ones?
In my use case, the value comes from the runtime and I need to generate all possible variants at build time.

[astahmer]

hey, yes you can "static" CSS (as in, always generating it even if no usage found in your app) using config.staticCss

[TheOrdinaryDev]

Hello, thanks for your reply. Unfortunately, I cannot configure this so that variants are generated.
My config file

// panda.config.ts
import { defineConfig } from '@pandacss/dev';

export default defineConfig({
    include: ['./src/*.{tsx,jsx}'],
    jsxFramework: 'react',
    staticCss: {
        recipes: {
            button: ['*'],
        },
    },
    theme: {
        extend: {
            recipes: {
                button: {
                    name: 'button',
                    base: {},
                    variants: {
                        size: {
                            small: { padding: '6px 12px', height: '32px' },
                            medium: { padding: '8px 16px', height: '40px' },
                            large: { padding: '12px 24px', height: '48px' },
                        },
                    },
                },
            },
        },
    },
});

My Button component

// src/Button.tsx
import { button } from '../styled-system/recipes';

type ButtonProps = { size: 'small' | 'medium' | 'large' };

export const Button = ({ size = 'medium' }: ButtonProps) => {
    return <button className={button({ size })}>Button</button>;
};

When I run panda style.css is

@layer reset, base, tokens, recipes, utilities;

@import './global.css';

@import './static.css';

@import './tokens/index.css';

@import './tokens/keyframes.css';

When I add a component that uses the variant

// src/SmallButton.tsx
import { Button } from './Button';

export const SmallButton = () => {
    return <Button size="small" />;
};

and run panda style.css is

@layer reset, base, tokens, recipes, utilities;

@import './global.css';

@import './static.css';

@import './tokens/index.css';

@import './tokens/keyframes.css';

@layer recipes {
  .button--size_small {
    padding: 6px 12px;
    height: 32px
    }
}

I need to generate style.css with all recipe variant classes and styles without using variant values explicitly in the code.

[TheOrdinaryDev]

Ah, and static.css file was not created and an error with message "Error: Can't resolve './static.css'" occurs.

[astahmer]

doing this button: ['*'] isn't (yet ?) supported, you should do something like button: [{ size: ['*'] }], instead

Ah, and static.css file was not created and an error with message "Error: Can't resolve './static.css'" occurs.

I couldnt reproduce this, if the issue still happens, can you make a minimal repro from this template ?
https://github.com/astahmer/panda-vite-template

[TheOrdinaryDev]

Thank you, button: [{ size: ['*'] }] works!
Thanks for raising PR with ['*'] support.