Conditionally resolving references in style-dictionary v3

[BitwiseAndrea]

I am the lucky individual to inherit our tokens pipeline and am attempting to get valid output with references. I'm still onboarding onto the system, and am having a difficult time since we are on V3....

When i have outputReferences set to true, there are a couple cases where i get invalid css

  --light-mode-over-media-300: rgba( var(--light-mode-surface-300), 0.92);
  --light-mode-over-media-200: rgba( var(--light-mode-surface-200), 0.92);
  --light-mode-over-media-100: rgba( var(--light-mode-surface-100), 0.92);
  --light-mode-over-media-0: rgba( var(--light-mode-surface-0), 0.92);

I tried fixing this in a transform specific to over-media tokens, but the value field is correct / resolved already to a valid rgba field, and i'm not sure if i can hack in a conditionally resolved value in another way. Transforms seem to be mostly ignored when outputReferences is set to true.

I'm ok with breaking the references in this single case but i feel icky if i edit original at all and i feel like it would break something elsewhere.

Any advice? I can't use color-mix and i don't want --light-mode-surface-0 to map to raw r g b values, i can't live with myself if i do that.

---

Why have i not upgraded to v4? I tried yesterday and ran into several issues

1. codemods didn't helped with type imports at all
2. we have some custom behavior shimmed into styledictionary and it will be a little difficult to replace

[jorenbroekema]

Yeah our Type imports docs and codemods needs some love probably, sorry for that.

https://styledictionary.com/reference/hooks/formats/#references-in-output-files we do support conditionally outputting references in v4 and we made quite some improvements to this topic in general in v4. E.g. not outputting references when it is unsafe to do so, and not doing it when the variable that is referenced was filtered out by a filter