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.

[kris-ellery]

Keep us posted if you discover a solution or find a PostCSS plugin. I'm facing a similar issue and would appreciate CSS variables being flattened or replaced by inline raw values within atomic classes to minimize the bundle size.

[adbutterfield]

I was thinking of replacing with raw values inline too. I think that would work for a lot of tokens., but not for colors (at least for me, because we have dark mode).

I'm going to look more into this though...

[adbutterfield]

I gave a first try at implementing something yesterday. Problem is a bit more complicated than I initially thought.

To make a plugin that handles all the use cases for deduplicating variables and replacing with values inline where safe, is not so trivial. Potentially not as difficult to handle the use case for Panda only, but then it wouldn't be something I'd want to publish probably.

One thing I decided was to just not use global tokens for colors, and have semantic tokens only. That reduces a bit of the bundle without that extra layer. And for my use case, we don't ever consume global color tokens directly, nor do we want to expose them for use by consumers of our component library.

I think I'll make a plugin just for my use case, because I can actually only dedupe variables that have the same color value for both light and dark mode. I haven't checked yet how many tokens are like that yet.

[adbutterfield]

Actually I noticed too with our sizes tokens, it's not really optimal. Sometimes we have different height/width tokens with the same value (for components that have variants that can be circle or square), and we get a different CSS variable created for each. Also we have a lot of semantic sizes tokens that map to much fewer global tokens, ending up with CSS variables with duplicate values, and even worse, classes that could be deduplicated as well (example: 2 classes that have height using 2 different variables that have the same value). Could be better to just use global tokens directly.