From 8b88da46e4f31cf97cbba48fbfce80057c7b41fa Mon Sep 17 00:00:00 2001 From: Evan Wallace Date: Sun, 10 Dec 2023 04:59:37 +0000 Subject: [PATCH] update website --- api/index.html | 2 +- content-types/index.html | 57 +++- gradient-tests/index.html | 320 +++++++++++++++++++ gradient-tests/style.css | 654 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 1030 insertions(+), 3 deletions(-) create mode 100644 gradient-tests/index.html create mode 100644 gradient-tests/style.css diff --git a/api/index.html b/api/index.html index fb71492..e962cea 100644 --- a/api/index.html +++ b/api/index.html @@ -2368,7 +2368,7 @@ }

Syntax features are specified using esbuild-specific feature names. The full set of feature names is as follows:

JavaScript:

-

CSS:

Target

Supported by: Build and Transform

This sets the target environment for the generated JavaScript and/or CSS code. It tells esbuild to transform JavaScript syntax that is too new for these environments into older JavaScript syntax that will work in these environments. For example, the ?? operator was introduced in Chrome 80 so esbuild will convert it into an equivalent (but more verbose) conditional expression when targeting Chrome 79 or earlier.

Note that this is only concerned with syntax features, not APIs. It does not automatically add polyfills for new APIs that are not used by these environments. You will have to explicitly import polyfills for the APIs you need (e.g. by importing core-js). Automatic polyfill injection is outside of esbuild's scope.

Each target environment is an environment name followed by a version number. The following environment names are currently supported:

In addition, you can also specify JavaScript language versions such as es2020. The default target is esnext which means that by default, esbuild will assume all of the latest JavaScript and CSS features are supported. Here is an example that configures multiple target environments. You don't need to specify all of them; you can just specify the subset of target environments that your project cares about. You can also be more precise about version numbers if you'd like (e.g. node12.19.0 instead of just node12):

+

CSS:

Target

Supported by: Build and Transform

This sets the target environment for the generated JavaScript and/or CSS code. It tells esbuild to transform JavaScript syntax that is too new for these environments into older JavaScript syntax that will work in these environments. For example, the ?? operator was introduced in Chrome 80 so esbuild will convert it into an equivalent (but more verbose) conditional expression when targeting Chrome 79 or earlier.

Note that this is only concerned with syntax features, not APIs. It does not automatically add polyfills for new APIs that are not used by these environments. You will have to explicitly import polyfills for the APIs you need (e.g. by importing core-js). Automatic polyfill injection is outside of esbuild's scope.

Each target environment is an environment name followed by a version number. The following environment names are currently supported:

In addition, you can also specify JavaScript language versions such as es2020. The default target is esnext which means that by default, esbuild will assume all of the latest JavaScript and CSS features are supported. Here is an example that configures multiple target environments. You don't need to specify all of them; you can just specify the subset of target environments that your project cares about. You can also be more precise about version numbers if you'd like (e.g. node12.19.0 instead of just node12):

CLI JS Go diff --git a/content-types/index.html b/content-types/index.html index a2de3a2..c8dbd2a 100644 --- a/content-types/index.html +++ b/content-types/index.html @@ -18,7 +18,7 @@ 1_000_000 -

These syntax features are conditionally transformed for older browsers depending on the configured language target:

+

These syntax features are conditionally transformed for older browsers depending on the configured language target:

@@ -522,7 +522,60 @@ os.Exit(1) } } -

You can @import other CSS files and reference image and font files with url() and esbuild will bundle everything together. Note that you will have to configure a loader for image and font files, since esbuild doesn't have any pre-configured. Usually this is either the data URL loader or the external file loader.

Note that by default, esbuild's output will take advantage of all modern CSS features. For example, color: rgba(255, 0, 0, 0.4) will become color: #f006 when minifying is enabled which makes use of syntax from CSS Color Module Level 4. If this is undesired, you must specify esbuild's target setting to say in which browsers you need the output to work correctly. Then esbuild will avoid using CSS features that are too modern for those browsers.

The new CSS nesting syntax is supported. To transform nested CSS into non-nested CSS for older browsers, make sure to specify those older browsers using esbuild's target setting.

When you provide a list of browser versions using the target setting, esbuild will also automatically insert vendor prefixes so that your CSS will work in those browsers at those versions or newer. Currently esbuild will do this for the following CSS properties:

Import from JavaScript

You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js. Here's an example of importing a CSS file from JavaScript:

import './button.css'
+

You can @import other CSS files and reference image and font files with url() and esbuild will bundle everything together. Note that you will have to configure a loader for image and font files, since esbuild doesn't have any pre-configured. Usually this is either the data URL loader or the external file loader.

These syntax features are conditionally transformed for older browsers depending on the configured language target:

Syntax transform
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Syntax transformExample
Nested declarationsa { &:hover { color: red } }
Modern RGB/HSL syntax#F008
inset shorthandinset: 0
hwb()hwb(120 30% 50%)
lab() and lch()lab(60 -5 58)
oklab() and oklch()oklab(0.5 -0.1 0.1)
color()color(display-p3 1 0 0)
Color stops with two positionslinear-gradient(red 2% 4%, blue)
Gradient transition hintslinear-gradient(red, 20%, blue) 1
Gradient color spaceslinear-gradient(in hsl, red, blue) 1
Gradient hue modelinear-gradient(in hsl longer hue, red, blue) 1

Note that by default, esbuild's output will take advantage of modern CSS features. For example, color: rgba(255, 0, 0, 0.4) will become color: #f006 when minifying is enabled which makes use of syntax from CSS Color Module Level 4. If this is undesired, you must specify esbuild's target setting to say in which browsers you need the output to work correctly. Then esbuild will avoid using CSS features that are too modern for those browsers.

When you provide a list of browser versions using the target setting, esbuild will also automatically insert vendor prefixes so that your CSS will work in those browsers at those versions or newer. Currently esbuild will do this for the following CSS properties:

Import from JavaScript

You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js. Here's an example of importing a CSS file from JavaScript:

import './button.css'
 
 export let Button = ({ text }) =>
   <div className="button">{text}</div>

The bundled JavaScript generated by esbuild will not automatically import the generated CSS into your HTML page for you. Instead, you should import the generated CSS into your HTML page yourself along with the generated JavaScript. This means the browser can download the CSS and JavaScript files in parallel, which is the most efficient way to do it. That looks like this:

<html>
diff --git a/gradient-tests/index.html b/gradient-tests/index.html
new file mode 100644
index 0000000..55cc658
--- /dev/null
+++ b/gradient-tests/index.html
@@ -0,0 +1,320 @@
+
+
+
+
+  
+  esbuild - Gradient Transformation Tests
+  
+  
+
+
+
+  
Gradient Transformation Tests

+  

+    This page is a visual test of esbuild's transformation of modern CSS gradient syntax for older browsers. Each test
+    case compares the browser's native rendering of the modern syntax to esbuild's transformation (which uses the legacy
+    syntax instead). This makes it easy to visually verify that esbuild's transformation is correct as well as to
+    visually inspect a given browser's rendering of these gradient syntax features.
+  

+  

+    At the time of writing, the latest versions of Chrome and Safari (Chrome 120 and Safari 17.1) can natively render
+    all of these test cases correctly, so you should expect these results to match in Chrome and Safari. However, the
+    latest version of Firefox (Firefox 120) contains multiple gradient rendering bugs, so esbuild's transformation is
+    currently necessary to get these test cases to render correctly in Firefox.
+  

+
+  
1. Red to green in P3

+  
gradient(
+  color(display-p3 1 0 0),
+  color(display-p3 0 0.6 0))

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+  
Note: Interpolation should happen in the oklab color space.

+
+  
2. Rainbow using shorter hue

+  
gradient(
+  in hwb shorter hue,
+  hsl(180deg 100% 75%) 10%,
+  hsl(240deg 100% 75%) 90%)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+
+  
3. Rainbow using longer hue

+  
gradient(
+  in hsl longer hue,
+  hsl(180deg 100% 75%) 10%,
+  hsl(240deg 100% 75%) 90%)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+
+  
4. Rainbow using increasing hue

+  
gradient(
+  in lch increasing hue,
+  hsl(240deg 100% 75%) 10%,
+  hsl(180deg 100% 75%) 90%)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+
+  
5. Rainbow using decreasing hue

+  
gradient(
+  in oklch decreasing hue,
+  hsl(180deg 100% 75%) 10%,
+  hsl(240deg 100% 75%) 90%)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+
+  
6. Transition hint / midpoint

+  
gradient(#f00, #ff0, 75%, #0ff, #00f)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+  
Note: The gradient should be "pulled" to one side.

+
+  
7. Premultiplied alpha

+  
gradient(#f00f, 10%, #00f1, 90%, #0f0f)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+  
Note: The transparent area should not have much blue color.

+
+  
8. Mixed units

+  
gradient(
+  color(display-p3 0.4 0 1) 30px,
+  color(display-p3 1 0.75 0.4) 60%)

+  
native

+  
esbuild

+  

+    
native

+    
esbuild

+    
native

+    
esbuild

+  

+  
Note: Mixed units can be supported by emitting calc() expressions.

+
+
+
diff --git a/gradient-tests/style.css b/gradient-tests/style.css
new file mode 100644
index 0000000..626c620
--- /dev/null
+++ b/gradient-tests/style.css
@@ -0,0 +1,654 @@
+.linear.red_to_green-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #ff0e0e,
+      #ff3004 6.25%,
+      #fa3900 9.38%,
+      #f54100 12.5%,
+      #de5c00 25%,
+      #ac7a00 50%,
+      #718c00 75%,
+      #5d9000 81.25%,
+      #439300 87.5%,
+      #349400 90.62%,
+      #279500 92.19%,
+      #1b9500 93.75%,
+      #00942a);
+  background:
+    linear-gradient(
+      to right,
+      color(xyz 0.487 0.229 0),
+      color(xyz 0.452 0.229 0.001) 6.25%,
+      color(xyz 0.435 0.229 0.002) 9.38%,
+      color(xyz 0.418 0.228 0.003) 12.5%,
+      color(xyz 0.356 0.228 0.005) 25%,
+      color(xyz 0.246 0.226 0.009) 50%,
+      color(xyz 0.157 0.223 0.012) 75%,
+      color(xyz 0.137 0.223 0.013) 81.25%,
+      color(xyz 0.118 0.222 0.014) 87.5%,
+      color(xyz 0.11 0.222 0.014) 90.62%,
+      color(xyz 0.101 0.221 0.014) 93.75%,
+      color(xyz 0.085 0.22 0.014));
+}
+.radial.red_to_green-esbuild {
+  background:
+    radial-gradient(
+      #ff0e0e,
+      #ff3004 6.25%,
+      #fa3900 9.38%,
+      #f54100 12.5%,
+      #de5c00 25%,
+      #ac7a00 50%,
+      #718c00 75%,
+      #5d9000 81.25%,
+      #439300 87.5%,
+      #349400 90.62%,
+      #279500 92.19%,
+      #1b9500 93.75%,
+      #00942a);
+  background:
+    radial-gradient(
+      color(xyz 0.487 0.229 0),
+      color(xyz 0.452 0.229 0.001) 6.25%,
+      color(xyz 0.435 0.229 0.002) 9.38%,
+      color(xyz 0.418 0.228 0.003) 12.5%,
+      color(xyz 0.356 0.228 0.005) 25%,
+      color(xyz 0.246 0.226 0.009) 50%,
+      color(xyz 0.157 0.223 0.012) 75%,
+      color(xyz 0.137 0.223 0.013) 81.25%,
+      color(xyz 0.118 0.222 0.014) 87.5%,
+      color(xyz 0.11 0.222 0.014) 90.62%,
+      color(xyz 0.101 0.221 0.014) 93.75%,
+      color(xyz 0.085 0.22 0.014));
+}
+.conic.red_to_green-esbuild {
+  background:
+    conic-gradient(
+      #ff0e0e,
+      #ff3004 6.25%,
+      #fa3900 9.38%,
+      #f54100 12.5%,
+      #de5c00 25%,
+      #ac7a00 50%,
+      #718c00 75%,
+      #5d9000 81.25%,
+      #439300 87.5%,
+      #349400 90.62%,
+      #279500 92.19%,
+      #1b9500 93.75%,
+      #00942a);
+  background:
+    conic-gradient(
+      color(xyz 0.487 0.229 0),
+      color(xyz 0.452 0.229 0.001) 6.25%,
+      color(xyz 0.435 0.229 0.002) 9.38%,
+      color(xyz 0.418 0.228 0.003) 12.5%,
+      color(xyz 0.356 0.228 0.005) 25%,
+      color(xyz 0.246 0.226 0.009) 50%,
+      color(xyz 0.157 0.223 0.012) 75%,
+      color(xyz 0.137 0.223 0.013) 81.25%,
+      color(xyz 0.118 0.222 0.014) 87.5%,
+      color(xyz 0.11 0.222 0.014) 90.62%,
+      color(xyz 0.101 0.221 0.014) 93.75%,
+      color(xyz 0.085 0.22 0.014));
+}
+.linear.rainbow_shorter-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #80ffff 10%,
+      #8080ff 90%);
+}
+.radial.rainbow_shorter-esbuild {
+  background: radial-gradient(#80ffff 10%, #8080ff 90%);
+}
+.conic.rainbow_shorter-esbuild {
+  background: conic-gradient(#80ffff 10%, #8080ff 90%);
+}
+.linear.rainbow_longer-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #80ffff,
+      #80a0ff 1.25%,
+      #8088ff 1.56%,
+      #9080ff 1.88%,
+      #c080ff 2.5%,
+      #ef80ff 3.12%,
+      #ff80f7 3.44%,
+      #ff80df 3.75%,
+      #ff8080 5%,
+      #ffdf80 6.25%,
+      #fff780 6.56%,
+      #efff80 6.88%,
+      #c0ff80 7.5%,
+      #90ff80 8.12%,
+      #80ff88 8.44%,
+      #80ffa0 8.75%,
+      #80ffff 10%,
+      #80ffb0 20%,
+      #80ff88 25%,
+      #8cff80 27.5%,
+      #a0ff80 30%,
+      #efff80 40%,
+      #fffb80 42.5%,
+      #ffe780 45%,
+      #ffbf80 50%,
+      #ff9880 55%,
+      #ff8480 57.5%,
+      #ff8090 60%,
+      #ff80df 70%,
+      #ff80f3 72.5%,
+      #f780ff 75%,
+      #cf80ff 80%,
+      #8080ff 90%,
+      #df80ff 91.25%,
+      #f780ff 91.56%,
+      #ff80ef 91.88%,
+      #ff80bf 92.5%,
+      #ff8090 93.12%,
+      #ff8880 93.44%,
+      #ffa080 93.75%,
+      #ffff80 95%,
+      #a0ff80 96.25%,
+      #88ff80 96.56%,
+      #80ff90 96.88%,
+      #80ffbf 97.5%,
+      #80ffef 98.12%,
+      #80f7ff 98.44%,
+      #80dfff 98.75%,
+      #8080ff);
+}
+.radial.rainbow_longer-esbuild {
+  background:
+    radial-gradient(
+      #80ffff,
+      #80a0ff 1.25%,
+      #8088ff 1.56%,
+      #9080ff 1.88%,
+      #c080ff 2.5%,
+      #ef80ff 3.12%,
+      #ff80f7 3.44%,
+      #ff80df 3.75%,
+      #ff8080 5%,
+      #ffdf80 6.25%,
+      #fff780 6.56%,
+      #efff80 6.88%,
+      #c0ff80 7.5%,
+      #90ff80 8.12%,
+      #80ff88 8.44%,
+      #80ffa0 8.75%,
+      #80ffff 10%,
+      #80ffb0 20%,
+      #80ff88 25%,
+      #8cff80 27.5%,
+      #a0ff80 30%,
+      #efff80 40%,
+      #fffb80 42.5%,
+      #ffe780 45%,
+      #ffbf80 50%,
+      #ff9880 55%,
+      #ff8480 57.5%,
+      #ff8090 60%,
+      #ff80df 70%,
+      #ff80f3 72.5%,
+      #f780ff 75%,
+      #cf80ff 80%,
+      #8080ff 90%,
+      #df80ff 91.25%,
+      #f780ff 91.56%,
+      #ff80ef 91.88%,
+      #ff80bf 92.5%,
+      #ff8090 93.12%,
+      #ff8880 93.44%,
+      #ffa080 93.75%,
+      #ffff80 95%,
+      #a0ff80 96.25%,
+      #88ff80 96.56%,
+      #80ff90 96.88%,
+      #80ffbf 97.5%,
+      #80ffef 98.12%,
+      #80f7ff 98.44%,
+      #80dfff 98.75%,
+      #8080ff);
+}
+.conic.rainbow_longer-esbuild {
+  background:
+    conic-gradient(
+      #80ffff,
+      #80a0ff 1.25%,
+      #8088ff 1.56%,
+      #9080ff 1.88%,
+      #c080ff 2.5%,
+      #ef80ff 3.12%,
+      #ff80f7 3.44%,
+      #ff80df 3.75%,
+      #ff8080 5%,
+      #ffdf80 6.25%,
+      #fff780 6.56%,
+      #efff80 6.88%,
+      #c0ff80 7.5%,
+      #90ff80 8.12%,
+      #80ff88 8.44%,
+      #80ffa0 8.75%,
+      #80ffff 10%,
+      #80ffb0 20%,
+      #80ff88 25%,
+      #8cff80 27.5%,
+      #a0ff80 30%,
+      #efff80 40%,
+      #fffb80 42.5%,
+      #ffe780 45%,
+      #ffbf80 50%,
+      #ff9880 55%,
+      #ff8480 57.5%,
+      #ff8090 60%,
+      #ff80df 70%,
+      #ff80f3 72.5%,
+      #f780ff 75%,
+      #cf80ff 80%,
+      #8080ff 90%,
+      #df80ff 91.25%,
+      #f780ff 91.56%,
+      #ff80ef 91.88%,
+      #ff80bf 92.5%,
+      #ff8090 93.12%,
+      #ff8880 93.44%,
+      #ffa080 93.75%,
+      #ffff80 95%,
+      #a0ff80 96.25%,
+      #88ff80 96.56%,
+      #80ff90 96.88%,
+      #80ffbf 97.5%,
+      #80ffef 98.12%,
+      #80f7ff 98.44%,
+      #80dfff 98.75%,
+      #8080ff);
+}
+.linear.rainbow_increasing-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #8080ff 10%,
+      #b477f1 15%,
+      #da6fdc 20%,
+      #f36bc3 25%,
+      #ff72a9 30%,
+      #ff8195 35%,
+      #ff8e83 40%,
+      #ff986d 45%,
+      #f4a960 50%,
+      #e3b95e 55%,
+      #d0c866 60%,
+      #a8e18d 70%,
+      #85f3c6 80%,
+      #7dfae3 85%,
+      #80ffff 90%);
+  background:
+    linear-gradient(
+      to right,
+      #8080ff 10%,
+      #b477f1 15%,
+      #da6fdc 20%,
+      #f36bc3 25%,
+      color(xyz 0.555 0.36 0.418) 30%,
+      color(xyz 0.571 0.387 0.311) 35%,
+      color(xyz 0.57 0.417 0.238) 40%,
+      color(xyz 0.557 0.449 0.194) 45%,
+      #f4a960 50%,
+      #e3b95e 55%,
+      #d0c866 60%,
+      #a8e18d 70%,
+      #85f3c6 80%,
+      #7dfae3 85%,
+      #80ffff 90%);
+}
+.radial.rainbow_increasing-esbuild {
+  background:
+    radial-gradient(
+      #8080ff 10%,
+      #b477f1 15%,
+      #da6fdc 20%,
+      #f36bc3 25%,
+      #ff72a9 30%,
+      #ff8195 35%,
+      #ff8e83 40%,
+      #ff986d 45%,
+      #f4a960 50%,
+      #e3b95e 55%,
+      #d0c866 60%,
+      #a8e18d 70%,
+      #85f3c6 80%,
+      #7dfae3 85%,
+      #80ffff 90%);
+  background:
+    radial-gradient(
+      #8080ff 10%,
+      #b477f1 15%,
+      #da6fdc 20%,
+      #f36bc3 25%,
+      color(xyz 0.555 0.36 0.418) 30%,
+      color(xyz 0.571 0.387 0.311) 35%,
+      color(xyz 0.57 0.417 0.238) 40%,
+      color(xyz 0.557 0.449 0.194) 45%,
+      #f4a960 50%,
+      #e3b95e 55%,
+      #d0c866 60%,
+      #a8e18d 70%,
+      #85f3c6 80%,
+      #7dfae3 85%,
+      #80ffff 90%);
+}
+.conic.rainbow_increasing-esbuild {
+  background:
+    conic-gradient(
+      #8080ff 10%,
+      #b477f1 15%,
+      #da6fdc 20%,
+      #f36bc3 25%,
+      #ff72a9 30%,
+      #ff8195 35%,
+      #ff8e83 40%,
+      #ff986d 45%,
+      #f4a960 50%,
+      #e3b95e 55%,
+      #d0c866 60%,
+      #a8e18d 70%,
+      #85f3c6 80%,
+      #7dfae3 85%,
+      #80ffff 90%);
+  background:
+    conic-gradient(
+      #8080ff 10%,
+      #b477f1 15%,
+      #da6fdc 20%,
+      #f36bc3 25%,
+      color(xyz 0.555 0.36 0.418) 30%,
+      color(xyz 0.571 0.387 0.311) 35%,
+      color(xyz 0.57 0.417 0.238) 40%,
+      color(xyz 0.557 0.449 0.194) 45%,
+      #f4a960 50%,
+      #e3b95e 55%,
+      #d0c866 60%,
+      #a8e18d 70%,
+      #85f3c6 80%,
+      #7dfae3 85%,
+      #80ffff 90%);
+}
+.linear.rainbow_decreasing-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #80ffff 10%,
+      #80fce2 15%,
+      #8df6c2 20%,
+      #bbe180 30%,
+      #d2d363 35%,
+      #e7c34d 40%,
+      #f7b247 45%,
+      #ffa359 50%,
+      #ff9772 55%,
+      #ff8984 60%,
+      #f177b8 70%,
+      #c477e7 80%,
+      #a57bf7 85%,
+      #8080ff 90%);
+  background:
+    linear-gradient(
+      to right,
+      #80ffff 10%,
+      #80fce2 15%,
+      #8df6c2 20%,
+      #bbe180 30%,
+      #d2d363 35%,
+      #e7c34d 40%,
+      #f7b247 45%,
+      color(xyz 0.568 0.481 0.142) 50%,
+      color(xyz 0.571 0.444 0.184) 55%,
+      color(xyz 0.562 0.41 0.256) 60%,
+      #f177b8 70%,
+      #c477e7 80%,
+      #a57bf7 85%,
+      #8080ff 90%);
+}
+.radial.rainbow_decreasing-esbuild {
+  background:
+    radial-gradient(
+      #80ffff 10%,
+      #80fce2 15%,
+      #8df6c2 20%,
+      #bbe180 30%,
+      #d2d363 35%,
+      #e7c34d 40%,
+      #f7b247 45%,
+      #ffa359 50%,
+      #ff9772 55%,
+      #ff8984 60%,
+      #f177b8 70%,
+      #c477e7 80%,
+      #a57bf7 85%,
+      #8080ff 90%);
+  background:
+    radial-gradient(
+      #80ffff 10%,
+      #80fce2 15%,
+      #8df6c2 20%,
+      #bbe180 30%,
+      #d2d363 35%,
+      #e7c34d 40%,
+      #f7b247 45%,
+      color(xyz 0.568 0.481 0.142) 50%,
+      color(xyz 0.571 0.444 0.184) 55%,
+      color(xyz 0.562 0.41 0.256) 60%,
+      #f177b8 70%,
+      #c477e7 80%,
+      #a57bf7 85%,
+      #8080ff 90%);
+}
+.conic.rainbow_decreasing-esbuild {
+  background:
+    conic-gradient(
+      #80ffff 10%,
+      #80fce2 15%,
+      #8df6c2 20%,
+      #bbe180 30%,
+      #d2d363 35%,
+      #e7c34d 40%,
+      #f7b247 45%,
+      #ffa359 50%,
+      #ff9772 55%,
+      #ff8984 60%,
+      #f177b8 70%,
+      #c477e7 80%,
+      #a57bf7 85%,
+      #8080ff 90%);
+  background:
+    conic-gradient(
+      #80ffff 10%,
+      #80fce2 15%,
+      #8df6c2 20%,
+      #bbe180 30%,
+      #d2d363 35%,
+      #e7c34d 40%,
+      #f7b247 45%,
+      color(xyz 0.568 0.481 0.142) 50%,
+      color(xyz 0.571 0.444 0.184) 55%,
+      color(xyz 0.562 0.41 0.256) 60%,
+      #f177b8 70%,
+      #c477e7 80%,
+      #a57bf7 85%,
+      #8080ff 90%);
+}
+.linear.midpoint_hint-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #ff0000,
+      #ffff00 37.5%,
+      #f6ff09 50%,
+      #e7ff18 56.25%,
+      #cfff30 62.5%,
+      #adff52 68.75%,
+      #7fff80 75%,
+      #46ffb9 81.25%,
+      #00ffff 87.5%,
+      #0000ff);
+}
+.radial.midpoint_hint-esbuild {
+  background:
+    radial-gradient(
+      #ff0000,
+      #ffff00 37.5%,
+      #f6ff09 50%,
+      #e7ff18 56.25%,
+      #cfff30 62.5%,
+      #adff52 68.75%,
+      #7fff80 75%,
+      #46ffb9 81.25%,
+      #00ffff 87.5%,
+      #0000ff);
+}
+.conic.midpoint_hint-esbuild {
+  background:
+    conic-gradient(
+      #ff0000,
+      #ffff00 37.5%,
+      #f6ff09 50%,
+      #e7ff18 56.25%,
+      #cfff30 62.5%,
+      #adff52 68.75%,
+      #7fff80 75%,
+      #46ffb9 81.25%,
+      #00ffff 87.5%,
+      #0000ff);
+}
+.linear.premultiplied_alpha-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #ff0000,
+      rgba(250, 0, 5, .792) 1.56%,
+      rgba(248, 0, 7, .718) 3.12%,
+      rgba(244, 0, 11, .62) 6.25%,
+      rgba(236, 0, 19, .486) 12.5%,
+      rgba(214, 0, 41, .306) 25%,
+      rgba(0, 0, 255, .067) 50%,
+      rgba(0, 43, 212, .08) 62.5%,
+      rgba(0, 109, 146, .11) 68.75%,
+      rgba(0, 169, 86, .176) 75%,
+      rgba(0, 209, 46, .282) 81.25%,
+      rgba(0, 233, 22, .447) 87.5%,
+      rgba(0, 247, 8, .682) 93.75%,
+      #00ff00);
+}
+.radial.premultiplied_alpha-esbuild {
+  background:
+    radial-gradient(
+      #ff0000,
+      rgba(250, 0, 5, .792) 1.56%,
+      rgba(248, 0, 7, .718) 3.12%,
+      rgba(244, 0, 11, .62) 6.25%,
+      rgba(236, 0, 19, .486) 12.5%,
+      rgba(214, 0, 41, .306) 25%,
+      rgba(0, 0, 255, .067) 50%,
+      rgba(0, 43, 212, .08) 62.5%,
+      rgba(0, 109, 146, .11) 68.75%,
+      rgba(0, 169, 86, .176) 75%,
+      rgba(0, 209, 46, .282) 81.25%,
+      rgba(0, 233, 22, .447) 87.5%,
+      rgba(0, 247, 8, .682) 93.75%,
+      #00ff00);
+}
+.conic.premultiplied_alpha-esbuild {
+  background:
+    conic-gradient(
+      #ff0000,
+      rgba(250, 0, 5, .792) 1.56%,
+      rgba(248, 0, 7, .718) 3.12%,
+      rgba(244, 0, 11, .62) 6.25%,
+      rgba(236, 0, 19, .486) 12.5%,
+      rgba(214, 0, 41, .306) 25%,
+      rgba(0, 0, 255, .067) 50%,
+      rgba(0, 43, 212, .08) 62.5%,
+      rgba(0, 109, 146, .11) 68.75%,
+      rgba(0, 169, 86, .176) 75%,
+      rgba(0, 209, 46, .282) 81.25%,
+      rgba(0, 233, 22, .447) 87.5%,
+      rgba(0, 247, 8, .682) 93.75%,
+      #00ff00);
+}
+.linear.mixed_units-esbuild {
+  background:
+    linear-gradient(
+      to right,
+      #6e1bff 30px,
+      #7225ff calc(29.06px + 1.88%),
+      #742fff calc(28.12px + 3.75%),
+      #7a42fa calc(26.25px + 7.5%),
+      #8860ea calc(22.5px + 15%),
+      #aa87c7 calc(15px + 30%),
+      #d3a49a calc(7.5px + 45%),
+      #e9b17d calc(3.75px + 52.5%),
+      #ffbd53 60%);
+  background:
+    linear-gradient(
+      to right,
+      color(xyz 0.263 0.11 1.044) 30px,
+      color(xyz 0.265 0.119 1.013) calc(29.06px + 1.88%),
+      color(xyz 0.267 0.129 0.982) calc(28.12px + 3.75%),
+      #7a42fa calc(26.25px + 7.5%),
+      #8860ea calc(22.5px + 15%),
+      #aa87c7 calc(15px + 30%),
+      #d3a49a calc(7.5px + 45%),
+      #e9b17d calc(3.75px + 52.5%),
+      #ffbd53 60%);
+}
+.radial.mixed_units-esbuild {
+  background:
+    radial-gradient(
+      #6e1bff 30px,
+      #7127ff calc(29.06px + 1.88%),
+      #7530ff calc(28.12px + 3.75%),
+      #7c42fb calc(26.25px + 7.5%),
+      #8b60eb calc(22.5px + 15%),
+      #b087c8 calc(15px + 30%),
+      #dca49b calc(7.5px + 45%),
+      #f3b07d calc(3.75px + 52.5%),
+      #ffc173 60%);
+  background:
+    radial-gradient(
+      color(xyz 0.263 0.11 1.044) 30px,
+      color(xyz 0.265 0.12 1.013) calc(29.06px + 1.88%),
+      color(xyz 0.268 0.13 0.983) calc(28.12px + 3.75%),
+      #7c42fb calc(26.25px + 7.5%),
+      #8b60eb calc(22.5px + 15%),
+      #b087c8 calc(15px + 30%),
+      #dca49b calc(7.5px + 45%),
+      #f3b07d calc(3.75px + 52.5%),
+      color(xyz 0.652 0.601 0.162) 60%);
+}
+.conic.mixed_units-esbuild {
+  background:
+    conic-gradient(
+      #6e1bff 8.33%,
+      #7127ff 9.95%,
+      #7530ff 11.56%,
+      #7c42fb 14.79%,
+      #8b60eb 21.25%,
+      #b087c8 34.17%,
+      #dca49b 47.08%,
+      #f3b07d 53.54%,
+      #ffc173 60%);
+  background:
+    conic-gradient(
+      color(xyz 0.263 0.11 1.044) 8.33%,
+      color(xyz 0.265 0.12 1.013) 9.95%,
+      color(xyz 0.268 0.13 0.983) 11.56%,
+      #7c42fb 14.79%,
+      #8b60eb 21.25%,
+      #b087c8 34.17%,
+      #dca49b 47.08%,
+      #f3b07d 53.54%,
+      color(xyz 0.652 0.601 0.162) 60%);
+}