Parse both dashed-ident and ident versions, and add missing dashed-idents to color spaces.

Author: jgerigmeyer

src/parse.js

@@ -78,8 +78,9 @@ export default function parse (str, {meta} = {}) {
 		if (name === "color") {
 			// color() function
 			let id = env.parsed.args.shift();
-			let undashedId = id.startsWith("--") ? id.substring(2) : id;
-			let ids = [id, undashedId];
+			// Check against both <dashed-ident> and <ident> versions
+			let alternateId = id.startsWith("--") ? id.substring(2) : `--${id}`;
+			let ids = [id, alternateId];
 			let alpha = env.parsed.rawArgs.indexOf("/") > 0 ? env.parsed.args.pop() : 1;
 
 			for (let space of ColorSpace.all) {
@@ -109,10 +110,10 @@ export default function parse (str, {meta} = {}) {
 
 			// Not found
 			let didYouMean = "";
-			let registryId = id in ColorSpace.registry ? id : undashedId;
+			let registryId = id in ColorSpace.registry ? id : alternateId;
 			if (registryId in ColorSpace.registry) {
 				// Used color space id instead of color() id, these are often different
-				let cssId = ColorSpace.registry[registryId].formats?.functions?.color?.id;
+				let cssId = ColorSpace.registry[registryId].formats?.color?.id;
 
 				if (cssId) {
 					didYouMean = `Did you mean color(${cssId})?`;

src/space.js

@@ -45,12 +45,12 @@ export default class ColorSpace {
 			format.name ||= name;
 		}
 
-		if (options.cssId && !this.formats.functions?.color) {
+		if (options.cssId && !this.formats.color) {
 			this.formats.color = { id: options.cssId };
 			Object.defineProperty(this, "cssId", {value: options.cssId});
 		}
-		else if (this.formats?.color && !this.formats?.color.id) {
-			this.formats.color.id = this.id;
+		else if (!this.formats.color?.id) {
+			this.formats.color = { ...this.formats.color ?? {}, id: this.id };
 		}
 
 		// Gamut space
@@ -122,7 +122,7 @@ export default class ColorSpace {
 	}
 
 	get cssId () {
-		return this.formats.functions?.color?.id || this.id;
+		return this.formats?.color?.id || this.id;
 	}
 
 	get isPolar () {

src/spaces/a98rgb-linear.js

@@ -20,6 +20,7 @@ const fromXYZ_M = [
 
 export default new RGBColorSpace({
 	id: "a98rgb-linear",
+	cssId: "--a98-rgb-linear",
 	name: "Linear Adobe® 98 RGB compatible",
 	white: "D65",
 	toXYZ_M,

src/spaces/a98rgb.js

@@ -3,13 +3,9 @@ import A98Linear from "./a98rgb-linear.js";
 
 export default new RGBColorSpace({
 	id: "a98rgb",
+	cssId: "a98-rgb",
 	name: "Adobe® 98 RGB compatible",
 	base: A98Linear,
 	toBase: RGB => RGB.map(val => Math.pow(Math.abs(val), 563 / 256) * Math.sign(val)),
-	fromBase: RGB => RGB.map(val => Math.pow(Math.abs(val), 256 / 563) * Math.sign(val)),
-	formats: {
-		color: {
-			id: "a98-rgb"
-		}
-	},
+	fromBase: RGB => RGB.map(val => Math.pow(Math.abs(val), 256 / 563) * Math.sign(val))
 });

src/spaces/acescc.js

@@ -13,6 +13,7 @@ const ACES_cc_max = (Math.log2(65504) + 9.72) / 17.52; // 1.468
 
 export default new RGBColorSpace({
 	id: "acescc",
+	cssId: "--acescc",
 	name: "ACEScc",
 	// see S-2014-003 ACEScc – A Logarithmic Encoding of ACES Data
 	// https://docs.acescentral.com/specifications/acescc/
@@ -69,10 +70,7 @@ export default new RGBColorSpace({
 				return  (Math.log2(val) + 9.72) / 17.52;
 			}
 		});
-	},
+	}
 	// encoded media white (rgb 1,1,1) => linear  [ 222.861, 222.861, 222.861 ]
 	// encoded media black (rgb 0,0,0) => linear [ 0.0011857, 0.0011857, 0.0011857]
-	formats: {
-		color: {}
-	}
 });

src/spaces/acescg.js

@@ -22,6 +22,7 @@ const fromXYZ_M = [
 
 export default new RGBColorSpace({
 	id: "acescg",
+	cssId: "--acescg",
 	name: "ACEScg",
 
 	// ACEScg – A scene-referred, linear-light encoding of ACES Data
@@ -47,11 +48,7 @@ export default new RGBColorSpace({
 	white: WHITES.ACES,
 
 	toXYZ_M,
-	fromXYZ_M,
-
-	formats: {
-		color: {}
-	},
+	fromXYZ_M
 });
 
 // export default Color;

src/spaces/cam16.js

@@ -329,6 +329,7 @@ export function toCam16 (xyzd65, env) {
 // Results compared against: https://github.com/colour-science/colour
 export default new ColorSpace({
 	id: "cam16-jmh",
+	cssId: "--cam16-jmh",
 	name: "CAM16-JMh",
 	coords: {
 		j: {
@@ -357,10 +358,5 @@ export default new ColorSpace({
 			{J: cam16[0], M: cam16[1], h: cam16[2]},
 			viewingConditions
 		);
-	},
-	formats: {
-		color: {
-			id: "--cam16-jmh"
-		},
-	},
+	}
 });

src/spaces/ictcp.js

@@ -66,6 +66,7 @@ const LMStoXYZ_M = [
 // https://professional.dolby.com/siteassets/pdfs/dolby-vision-measuring-perceptual-color-volume-v7.1.pdf
 export default new ColorSpace({
 	id: "ictcp",
+	cssId: "--ictcp",
 	name: "ICTCP",
 	// From BT.2100-2 page 7:
 	// During production, signal values are expected to exceed the
@@ -102,10 +103,7 @@ export default new ColorSpace({
 		let LMS = ICtCptoLMS(ICtCp);
 
 		return multiplyMatrices(LMStoXYZ_M, LMS);
-	},
-	formats: {
-		color: {}
-	},
+	}
 });
 
 function LMStoICtCp (LMS) {

src/spaces/jzazbz.js

@@ -112,6 +112,7 @@ export default new ColorSpace({
 	formats: {
 		// https://drafts.csswg.org/css-color-hdr/#Jzazbz
 		"color": {
+			id: "--jzazbz",
 			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
 		}
 	}

src/spaces/jzczhz.js

@@ -4,6 +4,7 @@ import {constrain as constrainAngle} from "../angles.js";
 
 export default new ColorSpace({
 	id: "jzczhz",
+	cssId: "--jzczhz",
 	name: "JzCzHz",
 	coords: {
 		jz: {
@@ -49,8 +50,5 @@ export default new ColorSpace({
 			jzczhz[1] * Math.cos(jzczhz[2] * Math.PI / 180), // az
 			jzczhz[1] * Math.sin(jzczhz[2] * Math.PI / 180)  // bz
 		];
-	},
-	formats: {
-		color: {}
-	},
+	}
 });