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.
When using
esbuildwithtargetset to older browsers,oklchfunctions used in custom property values are not being transformed.See esbuild playground. Compare this with lightningcss playground.
I came across a similar old issue (https://github.com/evanw/esbuild/issues/2566) which was closed as "won't implement" with the following rationale:
Technically this may be correct, but I wonder how useful it is in practice.
oklchis 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.