Sourced from esbuild's releases.
v0.19.9
Add support for transforming new CSS gradient syntax for older browsers
The specification called CSS Images Module Level 4 introduces new CSS gradient syntax for customizing how the browser interpolates colors in between color stops. You can now control the color space that the interpolation happens in as well as (for "polar" color spaces) control whether hue angle interpolation happens clockwise or counterclockwise. You can read more about this in Mozilla's blog post about new CSS gradient features.
With this release, esbuild will now automatically transform this syntax for older browsers in the
targetlist. For example, here's a gradient that should appear as a rainbow in a browser that supports this new syntax:/* Original code */ .rainbow-gradient { width: 100px; height: 100px; background: linear-gradient(in hsl longer hue, #7ff, #77f); }/* New output (with --target=chrome99) */ .rainbow-gradient { width: 100px; height: 100px; background: linear-gradient( #77ffff, #77ffaa 12.5%, #77ff80 18.75%, #84ff77 21.88%, #99ff77 25%, #eeff77 37.5%, #fffb77 40.62%, #ffe577 43.75%, #ffbb77 50%, #ff9077 56.25%, #ff7b77 59.38%, #ff7788 62.5%, #ff77dd 75%, #ff77f2 78.12%, #f777ff 81.25%, #cc77ff 87.5%, #7777ff); }
You can now use this syntax in your CSS source code and esbuild will automatically convert it to an equivalent gradient for older browsers. In addition, esbuild will now also transform "double position" and "transition hint" syntax for older browsers as appropriate:
/* Original code */ .stripes { width: 100px; height: 100px; background: linear-gradient(#e65 33%, #ff2 33% 67%, #99e 67%); }
... (truncated)
Sourced from esbuild's changelog.
0.19.9
Add support for transforming new CSS gradient syntax for older browsers
The specification called CSS Images Module Level 4 introduces new CSS gradient syntax for customizing how the browser interpolates colors in between color stops. You can now control the color space that the interpolation happens in as well as (for "polar" color spaces) control whether hue angle interpolation happens clockwise or counterclockwise. You can read more about this in Mozilla's blog post about new CSS gradient features.
With this release, esbuild will now automatically transform this syntax for older browsers in the
targetlist. For example, here's a gradient that should appear as a rainbow in a browser that supports this new syntax:/* Original code */ .rainbow-gradient { width: 100px; height: 100px; background: linear-gradient(in hsl longer hue, #7ff, #77f); }/* New output (with --target=chrome99) */ .rainbow-gradient { width: 100px; height: 100px; background: linear-gradient( #77ffff, #77ffaa 12.5%, #77ff80 18.75%, #84ff77 21.88%, #99ff77 25%, #eeff77 37.5%, #fffb77 40.62%, #ffe577 43.75%, #ffbb77 50%, #ff9077 56.25%, #ff7b77 59.38%, #ff7788 62.5%, #ff77dd 75%, #ff77f2 78.12%, #f777ff 81.25%, #cc77ff 87.5%, #7777ff); }
You can now use this syntax in your CSS source code and esbuild will automatically convert it to an equivalent gradient for older browsers. In addition, esbuild will now also transform "double position" and "transition hint" syntax for older browsers as appropriate:
/* Original code */ .stripes { width: 100px; height: 100px; background: linear-gradient(#e65 33%, #ff2 33% 67%, #99e 67%);
... (truncated)
9edc9d4
publish 0.19.9 to npm791619e
release notes: link to gradient tests83b4171
css: implement lowering of gradient syntax4a3b265
css: fix calc() inlining whitespace bug90989ec
remove a stray log statementf260285
css gradients: handle color transition hintse4c55af
css gradients: lower colors, fix double positionsa389c52
css: add lab() + lch() + oklab()
+ oklch()b837f21
css: avoid overwriting manual fallback colors824ede6
css: simplify color() duplication fallback logic