`oklch` in CSS custom properties is not transformed

[mayank99]

When using esbuild with target set to older browsers, oklch functions used in custom property values are not being transformed.

--color: oklch(69% 0.1 50); /* should become #cd8962 */

See esbuild playground. Compare this with lightningcss playground.

---

I came across a similar old issue (#2566) which was closed as "won't implement" with the following rationale:

CSS variables are arbitrary token sequences and don't have specific semantics. You can also read the value of a CSS variable from JavaScript so doing what you suggested could introduce bugs.

Technically this may be correct, but I wonder how useful it is in practice. oklch is a built-in CSS function which will always compute to a <color> value, so I would expect it to be transformed no matter where it used.

It is extremely common to assign color values to CSS variables to make them easier to reference later, whereas I have never once seen a color variable being read from JS in a way that relies on its exact verbatim value. The current behavior makes esbuild unreliable for CSS transformations.