v0.12.15
-
Fix a bug with
var()
in CSS color lowering (#1421)This release fixes a bug with esbuild's handling of the
rgb
andhsl
color functions when they containvar()
. Eachvar()
token sequence can be substituted for any number of tokens including zero or more than one, but previously esbuild's output was only correct if eachvar()
inside ofrgb
orhsl
contained exactly one token. With this release, esbuild will now not attempt to transform newer CSS color syntax to older CSS color syntax if it containsvar()
:/* Original code */ a { color: hsl(var(--hs), var(--l)); } /* Old output */ a { color: hsl(var(--hs), ,, var(--l)); } /* New output */ a { color: hsl(var(--hs), var(--l)); }
The bug with the old output above happened because esbuild considered the arguments to
hsl
as matching the patternhsl(h s l)
which is the new space-separated form allowed by CSS Color Module Level 4. Then esbuild tried to convert this to the formhsl(h, s, l)
which is more widely supported by older browsers. But this substitution doesn't work in the presence ofvar()
, so it has now been disabled in that case.