Deduplicate CSS variables created from color tokens

[adbutterfield]

Description

Currently, a new CSS variable is created for each semantic color token that references a global color token. For example:

  --eLRRDV: var(--fUtZST);
  --iapPBc: var(--jfSFfL);
  --jJSFog: var(--jfSFfL);
  --gidpOD: var(--etTVqn);
  --jSfsaG: var(--fUtZST);
  --qrNFe: var(--jfSFfL);
  --jdenfz: var(--etTVqn);
  --fGwJyg: var(--etTVqn);
  --bJIcUi: var(--ibzxgb);
  --dxqhXC: var(--ibzxgb);
  --fABWCR: var(--ibzxgb);
  --fZjaHc: var(--jmRNMc);
  --fdtfbY: var(--jmRNMc);
  --kzRiqf: var(--etTVqn);
  --iMpwjQ: var(--etTVqn);

Instead of creating this additional layer of CSS variables, it would be more efficient and reduce bundle size a bit if semantic tokens could use the same CSS variable for the global token directly.

Problem Statement/Justification

(As mentioned above) it would be more efficient and reduce bundle size a bit if semantic tokens could use the same CSS variable for the global token directly.

Proposed Solution or API

This affects internal implementation. I haven't looked into the source yet too see what change would be required...

Alternatives

No response

Additional Information

No response

[astahmer]

I see your point, but what if your semantic tokens now uses a condition (CSS selector/at-rule) ?
I don't think this optimization should be baked-in Panda as it creates inconsistent behaviour and doesn't seem future-proof (adding a condition to your semantic token means you'd have to use a different CSS var, maybe referenced somewhere outside of Panda like in a CSS file, so it would not type-safe and would not be caught)

instead, this seems like a good opportunity to make a user-land PostCSS plugin that does that
I'm wouldnt be surprised if this already exists, if not it shouldnt be too hard to make (you can ask gpt to help, it knows postcss pretty well)

[adbutterfield]

Not sure I follow the logic with the at-rule. Like, the variables just reference values, they can be used anywhere (in an at-rule or otherwise)?

Actually, I thourht this would be the default behavior of panda, and main benefit of referencing global tokens: semantic tokens would all reference the same value (not that they would make their own reference, to the same reference of the value).

But as you say, should be easy to handle that with a plugin. I'll see if I can figure out how to that.