evanw / evanw/esbuild

`oklch` in CSS custom properties is not transformed

Open
#3,908 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
40.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

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

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

See [esbuild playground](https://esbuild.github.io/try/#YgAwLjIzLjEAewogIHRhcmdldDogWwogICAgImNocm9tZTExMCIsCiAgICAiZmlyZWZveDExMCIKICBdCn0KAGUAZW50cnkuY3NzAGJvZHkgewogIC0tY29sb3I6IG9rbGNoKDY5JSAwLjEgNTApOwogIGNvbG9yOiBva2xjaCg2OSUgMC4xIDUwKTsKfQ). Compare this with [lightningcss playground](https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Afalse%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A7208960%2C%22firefox%22%3A7208960%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22body%20%7B%5Cn%20%20--color%3A%20oklch(69%25%200.1%2050)%3B%5Cn%20%20color%3A%20oklch(69%25%200.1%2050)%3B%5Cn%7D%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D).

---

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:

> 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 [``](https://drafts.csswg.org/css-color-5/#typedef-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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.