color-mix is not transpiled after replace var with their color value

[Eptagone]

The docs says that Lightning CSS will evaluate color-mixwhen using the color instead of var. That's okey so I make a visitor to replace the var with the actual value and this works but the color transpilation never happens.

See example in playground

I was expecting lightningcss to compile the color like the docs. See expected transpilation in playground

Input

:root {
  --color-sample: hsl(120deg 10% 20%);
}

.bg-black\/50 {
  background-color: color-mix(in hsl, var(--color-sample) 25%, hsl(30deg 30% 40%));
}

Output

:root {
  --color-sample: #2e382e;
}

.bg-black\/50 {
  background-color: color-mix(in hsl, #2e382e 25.0%, #856647);
}

Expected

:root {
  --color-sample: #2e382e;
}

.bg-black\/50 {
  background-color: #706a43;
}

[mustafa0x]

This is indeed a problem. Did you find a solution?

I was hoping this was transpiled without a visitor.

:root {
  --primary: #008c8f; 
}
.bg-primary\/5 {
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
}

A visitor solution is fine. But strange that it doesn't work!

[devongovett]

Same issue as #459