Implement latest CSS Color Level 4 parsing (#190)

* Baseline css color parser
* Parser improvements
* Switch over all parsing to new parser.
* Add tests for #187
* Add tests & fixes re #167, #155, #153
* Update the ranges for lab/lch/oklab/oklch to match CSS reference ranges.
* Add docs on newly-exported parse fns

Author: danburzo

benchmark/package-lock.json

@@ -8,6 +8,7 @@
 		"chroma-js": "^2.4.2",
 		"d3-color": "^3.1.0",
 		"d3-interpolate": "^3.0.1",
-		"tinycolor2": "^1.5.2"
+		"tinycolor2": "^1.5.2",
+		"colorjs.io": "^0.4.3"
 	}
 }

benchmark/package.json

@@ -1,6 +1,7 @@
 import chroma from 'chroma-js';
 import { color } from 'd3-color';
 import tinycolor from 'tinycolor2';
+import { ColorSpace, sRGB, parse } from 'colorjs.io/fn';
 import { rgb } from '../../src/index.js';
 import benchmark from '../util/benchmark.js';
 
@@ -50,3 +51,24 @@ benchmark('culori: culori("rgb(r,g,b)")', () => {
 		}
 	}
 });
+
+benchmark('culori: culori("rgb(r g b)")', () => {
+	for (var r = 0; r <= 255; r += increment) {
+		for (var g = 0; g <= 255; g += increment) {
+			for (var b = 0; b <= 255; b += increment) {
+				rgb(`rgb(${r} ${g} ${b})`);
+			}
+		}
+	}
+});
+
+ColorSpace.register(sRGB);
+benchmark('colorjs.io: parse("rgb(r g b)")', () => {
+	for (var r = 0; r <= 255; r += increment) {
+		for (var g = 0; g <= 255; g += increment) {
+			for (var b = 0; b <= 255; b += increment) {
+				parse(`rgb(${r} ${g} ${b})`);
+			}
+		}
+	}
+});

benchmark/tests/rgb-parse-speed.js

@@ -1516,7 +1516,7 @@ The opposite of `toMode`. A set of function to convert from various color spaces
 
 #### `ranges` (_object_, optional)
 
-The ranges for values in specific channels; if left unspecified, defaults to `[0, 1]`.
+The reference ranges for values in specific channels; if left unspecified, defaults to `[0, 1]`.
 
 #### `parse` (_array_, optional)
 
@@ -1635,7 +1635,11 @@ parseHex('#abcdef12');
 
 <a id="parseHsl" href="#parseHsl">#</a> __parseHsl__(_string_) → _color_
 
-Parses `hsl(…)` / `hsla(…)` strings and returns `hsl` color objects.
+Parses `hsl(…)` strings in the modern format and returns `hsl` color objects.
+
+<a id="parseHslLegacy" href="#parseHslLegacy">#</a> __parseHslLegacy__(_string_) → _color_
+
+Parses `hsl(…)` / `hsla(…)` strings in the legacy (comma-separated) format and returns `hsl` color objects.
 
 <a id="parseHwb" href="#parseHwb">#</a> __parseHwb__(_string_) → _color_
 
@@ -1653,9 +1657,21 @@ Parses `lch(…)` strings and returns `lch` color objects.
 
 Parses named CSS colors (eg. `tomato`) and returns `rgb` color objects.
 
+<a id="parseOklab" href="#parseOklab">#</a> __parseOklab__(_string_) → _color_
+
+Parses `oklab(…)` strings and returns `oklab` color objects.
+
+<a id="parseOklch" href="#parseOklch">#</a> __parseOklch__(_string_) → _color_
+
+Parses `oklch(…)` strings and returns `oklch` color objects.
+
 <a id="parseRgb" href="#parseRgb">#</a> __parseRgb__(_color_) → _color_
 
-Parses `rgb(…)` / `rgba(…)` strings and returns `rgb` color objects.
+Parses `rgb(…)` strings in the modern syntax and returns `rgb` color objects.
+
+<a id="parseRgbLegacy" href="#parseRgbLegacy">#</a> __parseRgbLegacy__(_color_) → _color_
+
+Parses `rgb(…)` / `rgba(…)` strings in the legacy (comma-separated) syntax and returns `rgb` color objects.
 
 <a id="parseTransparent" href="#parseTransparent">#</a>__parseTransparent__(_string_) → _color_
 

docs/api.md

@@ -138,22 +138,22 @@ The [CIELAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space), also
 
 The CIELAB color space using the [D50 standard illuminant](https://en.wikipedia.org/wiki/Standard_illuminant) as the reference white, following the [CSS Color Module Level 4 specification](https://drafts.csswg.org/css-color/#lab-colors).
 
-| Channel | Range                 | Description           |
+| Channel | CSS Reference Range                 | Description           |
 | ------- | --------------------- | --------------------- |
 | `l`     | `[0, 100]`            | Lightness             |
-| `a`     | `[-79.287, 93.55]`≈   | Green–red component   |
-| `b`     | `[-112.029, 93.388]`≈ | Blue–yellow component |
+| `a`     | `[-100, 100]`   | Green–red component   |
+| `b`     | `[-100, 100]` | Blue–yellow component |
 
 Serialized as `lab(l% a b)`, with the `none` keyword for any missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
 
 #### `lch`
 
 The CIELCh color space using the D50 standard illuminant.
 
-| Channel | Range           | Description |
+| Channel | CSS Reference Range           | Description |
 | ------- | --------------- | ----------- |
 | `l`     | `[0, 100]`      | Lightness   |
-| `c`     | `[0, 131.207]`≈ | Chroma      |
+| `c`     | `[0, 150]` | Chroma      |
 | `h`     | `[0, 360)`      | Hue         |
 
 Serialized as `lch(l% c h)`. A missing hue is serialized as `0`, with the `none` keyword for any other missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
@@ -252,25 +252,25 @@ See also: [Okhsl and Okhsv, two new color spaces for color picking](https://bott
 
 The Oklab color space in Cartesian form.
 
-| Channel | Range              | Description           |
+| Channel | CSS Reference Range              | Description           |
 | ------- | ------------------ | --------------------- |
-| `l`     | `[0, 0.999]`≈      | Lightness             |
-| `a`     | `[-0.233, 0.276]`≈ | Green–red component   |
-| `b`     | `[-0.311, 0.198]`≈ | Blue–yellow component |
+| `l`     | `[0, 1]`     | Lightness             |
+| `a`     | `[-0.4, 0.4]` | Green–red component   |
+| `b`     | `[-0.4, 0.4]` | Blue–yellow component |
 
-Serialized as `color(--oklab l a b)`, with the `none` keyword for any missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
+Serialized as `oklab(l a b)`, with the `none` keyword for any missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
 
 #### `oklch`
 
 The Oklab color space in cylindrical form.
 
 | Channel | Range         | Description |
 | ------- | ------------- | ----------- |
-| `l`     | `[0, 0.999]`≈ | Lightness   |
-| `c`     | `[0, 0.322]`≈ | Chroma      |
+| `l`     | `[0, 1]` | Lightness   |
+| `c`     | `[0, 0.4]` | Chroma      |
 | `h`     | `[0, 360)`    | Hue         |
 
-Serialized as `color(--oklch l c h)`, with the `none` keyword for any missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
+Serialized as `oklch(l c h)`, with the `none` keyword for any missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
 
 ### `okhsl`
 
@@ -378,13 +378,15 @@ The XYB color model is part of [the JPEG XL Image Coding System](https://ds.jpeg
 
 #### `xyb`
 
-The default XYB color space, defined in relationship to sRGB, with the default Chroma from Luma adjustment applied.
+The default XYB color space, defined in relationship to sRGB. 
+
+It has the default _Chroma from Luma_ adjustment applied (effectively Y is subtracted from B) so that colors with `{ x: 0, b: 0 }` coordinates are achromatic.
 
 | Channel | Range         | Description |
 | ------- | ------------- | ----------- |
-| `x`       | `[-0.0154, 0.0281]`≈ | ?           |
-| `y`       | `[0, 0.8453]`≈     | ?           |
-| `b`       | `[ -0.2778, 0.3880 ]` ≈ | ?           |
+| `x`       | `[-0.0154, 0.0281]`≈ | Cyan-red component           |
+| `y`       | `[0, 0.8453]`≈     | Luma           |
+| `b`       | `[ -0.2778, 0.3880 ]` ≈ | Blue-yellow component           |
 
 ### Cubehelix
 

docs/color-spaces.md

@@ -1,5 +1,6 @@
 import convertHslToRgb from './convertHslToRgb.js';
 import convertRgbToHsl from './convertRgbToHsl.js';
+import parseHslLegacy from './parseHslLegacy.js';
 import parseHsl from './parseHsl.js';
 import { fixupHueShorter } from '../fixup/hue.js';
 import { fixupAlpha } from '../fixup/alpha.js';
@@ -24,7 +25,7 @@ const definition = {
 		h: [0, 360]
 	},
 
-	parse: [parseHsl],
+	parse: [parseHsl, parseHslLegacy],
 	serialize: c =>
 		`hsl(${c.h || 0} ${c.s !== undefined ? c.s * 100 + '%' : 'none'} ${
 			c.l !== undefined ? c.l * 100 + '%' : 'none'

src/hsl/definition.js

@@ -1,51 +1,38 @@
-import hueToDeg from '../util/hue.js';
-import {
-	hue,
-	per,
-	num_per,
-	hue_none,
-	per_none,
-	num_per_none,
-	c,
-	s
-} from '../util/regex.js';
+import { Tok } from '../parse.js';
 
-/*
-	hsl() regular expressions.
-	Reference: https://drafts.csswg.org/css-color/#the-hsl-notation
- */
-const hsl_old = new RegExp(
-	`^hsla?\\(\\s*${hue}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
-);
-const hsl_new = new RegExp(
-	`^hsla?\\(\\s*${hue_none}${s}${per_none}${s}${per_none}\\s*(?:\\/\\s*${num_per_none}\\s*)?\\)$`
-);
-
-const parseHsl = color => {
-	let match = color.match(hsl_old) || color.match(hsl_new);
-	if (!match) return;
-	let res = { mode: 'hsl' };
+function parseHsl(color, parsed) {
+	if (!parsed || (parsed[0] !== 'hsl' && parsed[0] !== 'hsla')) {
+		return undefined;
+	}
+	const res = { mode: 'hsl' };
+	const [, h, s, l, alpha] = parsed;
 
-	if (match[3] !== undefined) {
-		res.h = +match[3];
-	} else if (match[1] !== undefined && match[2] !== undefined) {
-		res.h = hueToDeg(match[1], match[2]);
+	if (h.type !== Tok.None) {
+		if (h.type === Tok.Percentage) {
+			return undefined;
+		}
+		res.h = h.value;
 	}
 
-	if (match[4] !== undefined) {
-		res.s = Math.min(Math.max(0, match[4] / 100), 1);
+	if (s.type !== Tok.None) {
+		if (s.type === Tok.Hue) {
+			return undefined;
+		}
+		res.s = s.type === Tok.Number ? s.value : s.value / 100;
 	}
 
-	if (match[5] !== undefined) {
-		res.l = Math.min(Math.max(0, match[5] / 100), 1);
+	if (l.type !== Tok.None) {
+		if (l.type === Tok.Hue) {
+			return undefined;
+		}
+		res.l = l.type === Tok.Number ? l.value : l.value / 100;
 	}
 
-	if (match[6] !== undefined) {
-		res.alpha = match[6] / 100;
-	} else if (match[7] !== undefined) {
-		res.alpha = +match[7];
+	if (alpha.type !== Tok.None) {
+		res.alpha = alpha.type === Tok.Number ? alpha.value : alpha.value / 100;
 	}
+
 	return res;
-};
+}
 
 export default parseHsl;

src/hsl/parseHsl.js

@@ -0,0 +1,39 @@
+import hueToDeg from '../util/hue.js';
+import { hue, per, num_per, c } from '../util/regex.js';
+
+/*
+	hsl() regular expressions for legacy format
+	Reference: https://drafts.csswg.org/css-color/#the-hsl-notation
+ */
+const hsl_old = new RegExp(
+	`^hsla?\\(\\s*${hue}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
+);
+
+const parseHslLegacy = color => {
+	let match = color.match(hsl_old);
+	if (!match) return;
+	let res = { mode: 'hsl' };
+
+	if (match[3] !== undefined) {
+		res.h = +match[3];
+	} else if (match[1] !== undefined && match[2] !== undefined) {
+		res.h = hueToDeg(match[1], match[2]);
+	}
+
+	if (match[4] !== undefined) {
+		res.s = Math.min(Math.max(0, match[4] / 100), 1);
+	}
+
+	if (match[5] !== undefined) {
+		res.l = Math.min(Math.max(0, match[5] / 100), 1);
+	}
+
+	if (match[6] !== undefined) {
+		res.alpha = match[6] / 100;
+	} else if (match[7] !== undefined) {
+		res.alpha = +match[7];
+	}
+	return res;
+};
+
+export default parseHslLegacy;