Issue with Panda CSS Generating Extra Tokens

[mahanfakhimi]

Description

Hello, hope you're doing well. Could you please provide more context regarding the extra tokens generated by Panda CSS? Specifically, examples such as colors, sizes, and others would be helpful. The tool ideally should only generate the tokens that are explicitly used.

Link to Reproduction

.

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

React TS

Panda CSS Version

0.38.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

you can use a postcss plugin to achieve that like this one
https://github.com/astahmer/pandabox/blob/main/packages/postcss-plugins/src/remove-unused-css-vars.ts

note that by doing so, you will not be able to use token(xxx) where xxx is a token path (leading to a CSS var) that wasn't explicitly used in your app code (from the include of panda.config.ts), as the postcss plugin only looks at the generated CSS and removes any CSS variable not referenced in some CSS rule

[astahmer]

no, as I mentioned earlier, you can dynamically reference CSS variables with the token fn at runtime

[kris-ellery]

I could see this as an opt-in option in panda.config.ts, offering a multi-level approach to flattening the CSS output. Certain users may prefer CSS variables to utilize runtime, while others may only want used tokens, and some may opt to remove CSS variables entirely, instead opting to inline raw values into atomic classes.

While I understand that achieving this through PostCSS plugins is possible, integrating it directly would provide a smoother entry point for all Panda users.

[astahmer]

this is available as a panda plugin here https://github.com/astahmer/pandakit/blob/91b4f3aa295da55a978557b2cbe081c5a003bb56/packages/panda-plugins/src/remove-unused-css.ts

pnpm add -D @pandabox/panda-plugins

[kris-ellery]

Thanks @astahmer! Yes, it enables the removal of unused CSS variables, but I want to take it a step further by either collapsing all tokens or inlining raw values directly into selectors, eliminating any global CSS variables in the process. Related to #2558

[astahmer]

this looks like another use-case for a PostCSS plugin, like this one https://www.npmjs.com/package/postcss-css-variables