css: support for color() colors

CHANGELOG.md

@@ -2,22 +2,27 @@
 
 ## Unreleased
 
-* Add support for HWB colors in CSS
+* Add support for `hwb()` and `color()` in CSS
 
-    CSS has recently added lots of new ways of specifying colors. This release adds support for lowering and/or minifying colors that use the `hwb()` syntax:
+    CSS has recently added lots of new ways of specifying colors. This release adds support for lowering and/or minifying colors that use the `hwb()` or `color()` syntax for browsers that don't support it yet:
 
     ```css
     /* Original code */
     div {
       color: hwb(90deg 20% 40%);
+      background: color(display-p3 1 0 0);
     }
 
     /* New output (with --target=chrome99) */
     div {
       color: #669933;
+      background: #ff0f0e;
+      background: color(display-p3 1 0 0);
     }
     ```
 
+    As you can see, colors outside of the sRGB color space such as `color(display-p3 1 0 0)` are mapped back into the sRGB gamut and inserted as a fallback for browsers that don't support the `color()` syntax.
+
 * Allow empty type parameter lists in certain cases ([#3512](https://github.com/evanw/esbuild/issues/3512))
 
     TypeScript allows interface declarations and type aliases to have empty type parameter lists. Previously esbuild didn't handle this edge case but with this release, esbuild will now parse this syntax:

compat-table/src/css_table.ts

@@ -66,7 +66,7 @@ import (
 \t"github.com/evanw/esbuild/internal/css_ast"
 )
 
-type CSSFeature uint8
+type CSSFeature uint16
 
 const (
 ${Object.keys(map).sort().map((feature, i) => `\t${feature}${i ? '' : ' CSSFeature = 1 << iota'}`).join('\n')}

compat-table/src/index.ts

@@ -89,6 +89,7 @@ export const jsFeatures = {
 
 export type CSSFeature = keyof typeof cssFeatures
 export const cssFeatures = {
+  ColorFunction: true,
   HexRGBA: true,
   HWB: true,
   InlineStyle: true,

compat-table/src/mdn.ts

@@ -26,9 +26,10 @@ const jsFeatures: Partial<Record<JSFeature, string>> = {
 }
 
 const cssFeatures: Partial<Record<CSSFeature, string | string[]>> = {
-  InsetProperty: 'css.properties.inset',
-  RebeccaPurple: 'css.types.color.named-color.rebeccapurple',
+  ColorFunction: 'css.types.color.color',
   HexRGBA: 'css.types.color.rgb_hexadecimal_notation.alpha_hexadecimal_notation',
+  HWB: 'css.types.color.hwb',
+  InsetProperty: 'css.properties.inset',
   Modern_RGB_HSL: [
     'css.types.color.hsl.alpha_parameter',
     'css.types.color.hsl.space_separated_parameters',
@@ -39,8 +40,8 @@ const cssFeatures: Partial<Record<CSSFeature, string | string[]>> = {
     'css.types.color.rgba.float_values',
     'css.types.color.rgba.space_separated_parameters',
   ],
-  HWB: 'css.types.color.hwb',
   Nesting: 'css.selectors.nesting',
+  RebeccaPurple: 'css.types.color.named-color.rebeccapurple',
 }
 
 const similarPrefixedProperty: Record<string, { prefix: string, property: string }> = {

internal/compat/css_table.go

@@ -6,10 +6,11 @@ import (
 	"github.com/evanw/esbuild/internal/css_ast"
 )
 
-type CSSFeature uint8
+type CSSFeature uint16
 
 const (
-	HWB CSSFeature = 1 << iota
+	ColorFunction CSSFeature = 1 << iota
+	HWB
 	HexRGBA
 	InlineStyle
 	InsetProperty
@@ -20,6 +21,7 @@ const (
 )
 
 var StringToCSSFeature = map[string]CSSFeature{
+	"color-function":  ColorFunction,
 	"hwb":             HWB,
 	"hex-rgba":        HexRGBA,
 	"inline-style":    InlineStyle,
@@ -39,6 +41,14 @@ func (features CSSFeature) ApplyOverrides(overrides CSSFeature, mask CSSFeature)
 }
 
 var cssTable = map[CSSFeature]map[Engine][]versionRange{
+	ColorFunction: {
+		Chrome:  {{start: v{111, 0, 0}}},
+		Edge:    {{start: v{111, 0, 0}}},
+		Firefox: {{start: v{113, 0, 0}}},
+		IOS:     {{start: v{15, 0, 0}}},
+		Opera:   {{start: v{97, 0, 0}}},
+		Safari:  {{start: v{15, 0, 0}}},
+	},
 	HWB: {
 		Chrome:  {{start: v{101, 0, 0}}},
 		Edge:    {{start: v{101, 0, 0}}},

internal/css_ast/css_ast.go

@@ -281,6 +281,28 @@ func TokensAreCommaSeparated(tokens []Token) bool {
 	return false
 }
 
+func (t Token) NumberOrFractionForPercentage() (float64, bool) {
+	switch t.Kind {
+	case css_lexer.TNumber:
+		if f, err := strconv.ParseFloat(t.Text, 64); err == nil {
+			return f, true
+		}
+
+	case css_lexer.TPercentage:
+		if f, err := strconv.ParseFloat(t.PercentageValue(), 64); err == nil {
+			if f < 0 {
+				return 0, true
+			}
+			if f > 100 {
+				return 1, true
+			}
+			return f / 100, true
+		}
+	}
+
+	return 0, false
+}
+
 func (t Token) ClampedFractionForPercentage() (float64, bool) {
 	if t.Kind == css_lexer.TPercentage {
 		if f, err := strconv.ParseFloat(t.PercentageValue(), 64); err == nil {
@@ -290,9 +312,10 @@ func (t Token) ClampedFractionForPercentage() (float64, bool) {
 			if f > 100 {
 				return 1, true
 			}
-			return f / 100.0, true
+			return f / 100, true
 		}
 	}
+
 	return 0, false
 }