Parse both dashed-ident and ident versions, and add missing dashed-idents to color spaces. (color-js#439)

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

* Warn when using incorrect dashed-ident/ident

* refactor

* Update warnings

* Add trailing commas and make warning more descriptive.

* Remove dashed-ident prefix for HDR colors.

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) {
@@ -102,17 +103,26 @@ export default function parse (str, {meta} = {}) {
 							Object.assign(meta, {formatId: "color", types});
 						}
 
+						if (colorSpec.id.startsWith("--") && !id.startsWith("--")) {
+							console.warn(`${space.name} is a non-standard space and not currently supported in the CSS spec. ` +
+							             `Use prefixed color(${colorSpec.id}) instead of color(${id}).`);
+						}
+						if (id.startsWith("--") && !colorSpec.id.startsWith("--")) {
+							console.warn(`${space.name} is a standard space and supported in the CSS spec. ` +
+							             `Use color(${colorSpec.id}) instead of prefixed color(${id}).`);
+						}
+
 						return {spaceId: space.id, coords, alpha};
 					}
 				}
 			}
 
 			// 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,11 @@ export default class ColorSpace {
 			format.name ||= name;
 		}
 
-		if (options.cssId && !this.formats.functions?.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;
+		if (!this.formats.color?.id) {
+			this.formats.color = {
+				...this.formats.color ?? {},
+				id: options.cssId || this.id,
+			};
 		}
 
 		// Gamut space
@@ -122,7 +121,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",
-		},
-	},
 });

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/
@@ -72,7 +73,4 @@ export default new RGBColorSpace({
 	},
 	// 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
@@ -48,10 +49,6 @@ export default new RGBColorSpace({
 
 	toXYZ_M,
 	fromXYZ_M,
-
-	formats: {
-		color: {},
-	},
 });
 
 // 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: {
@@ -358,9 +359,4 @@ export default new ColorSpace({
 			viewingConditions,
 		);
 	},
-	formats: {
-		color: {
-			id: "--cam16-jmh",
-		},
-	},
 });

src/spaces/ictcp.js

@@ -103,9 +103,6 @@ export default new ColorSpace({
 
 		return multiplyMatrices(LMStoXYZ_M, LMS);
 	},
-	formats: {
-		color: {},
-	},
 });
 
 function LMStoICtCp (LMS) {

src/spaces/jzczhz.js

@@ -50,7 +50,4 @@ export default new ColorSpace({
 			jzczhz[1] * Math.sin(jzczhz[2] * Math.PI / 180),  // bz
 		];
 	},
-	formats: {
-		color: {},
-	},
 });

src/spaces/p3-linear.js

@@ -14,6 +14,7 @@ const fromXYZ_M = [
 
 export default new RGBColorSpace({
 	id: "p3-linear",
+	cssId: "--display-p3-linear",
 	name: "Linear P3",
 	white: "D65",
 	toXYZ_M,

src/spaces/p3.js

@@ -4,14 +4,10 @@ import sRGB from "./srgb.js";
 
 export default new RGBColorSpace({
 	id: "p3",
+	cssId: "display-p3",
 	name: "P3",
 	base: P3Linear,
 	// Gamma encoding/decoding is the same as sRGB
 	fromBase: sRGB.fromBase,
 	toBase: sRGB.toBase,
-	formats: {
-		color: {
-			id: "display-p3",
-		},
-	},
 });

src/spaces/prophoto-linear.js

@@ -19,6 +19,7 @@ const fromXYZ_M = [
 
 export default new RGBColorSpace({
 	id: "prophoto-linear",
+	cssId: "--prophoto-rgb-linear",
 	name: "Linear ProPhoto",
 	white: "D50",
 	base: XYZ_D50,

src/spaces/prophoto.js

@@ -6,6 +6,7 @@ const Et2 = 16 / 512;
 
 export default new RGBColorSpace({
 	id: "prophoto",
+	cssId: "prophoto-rgb",
 	name: "ProPhoto",
 	base: ProPhotoLinear,
 	toBase (RGB) {
@@ -15,9 +16,4 @@ export default new RGBColorSpace({
 	fromBase (RGB) {
 		return RGB.map(v => v >= Et ? v ** (1 / 1.8) : 16 * v);
 	},
-	formats: {
-		color: {
-			id: "prophoto-rgb",
-		},
-	},
 });

src/spaces/rec2020-linear.js

@@ -19,11 +19,9 @@ const fromXYZ_M = [
 
 export default new RGBColorSpace({
 	id: "rec2020-linear",
+	cssId: "--rec2020-linear",
 	name: "Linear REC.2020",
 	white: "D65",
 	toXYZ_M,
 	fromXYZ_M,
-	formats: {
-		color: {},
-	},
 });

src/spaces/rec2020.js

@@ -28,7 +28,4 @@ export default new RGBColorSpace({
 			return 4.5 * val;
 		});
 	},
-	formats: {
-		color: {},
-	},
 });

src/spaces/rec2100-hlg.js

@@ -46,9 +46,4 @@ export default new RGBColorSpace({
 			return a * Math.log(12 * val - b) + c;
 		});
 	},
-	formats: {
-		color: {
-			id: "rec2100-hlg",
-		},
-	},
 });

src/spaces/rec2100-pq.js

@@ -12,6 +12,7 @@ const c3 = 2392 / (2 ** 7);
 
 export default new RGBColorSpace({
 	id: "rec2100pq",
+	cssId: "rec2100-pq",
 	name: "REC.2100-PQ",
 	base: REC2020Linear,
 	toBase (RGB) {
@@ -33,9 +34,4 @@ export default new RGBColorSpace({
 			return ((num / denom)  ** m);
 		});
 	},
-	formats: {
-		color: {
-			id: "rec2100-pq",
-		},
-	},
 });

src/spaces/srgb-linear.js

@@ -27,7 +27,4 @@ export default new RGBColorSpace({
 	white: "D65",
 	toXYZ_M,
 	fromXYZ_M,
-	formats: {
-		color: {},
-	},
 });

src/spaces/xyz-abs-d65.js

@@ -9,6 +9,7 @@ export default new ColorSpace({
 // SDR spaces are converted per BT.2048
 // so that diffuse, media white is 203 cd/m²
 	id: "xyz-abs-d65",
+	cssId: "--xyz-abs-d65",
 	name: "Absolute XYZ D65",
 	coords: {
 		x: {

src/spaces/xyz-d50.js

@@ -9,7 +9,4 @@ export default new ColorSpace({
 	base: XYZ_D65,
 	fromBase: coords => adapt(XYZ_D65.white, "D50", coords),
 	toBase: coords => adapt("D50", XYZ_D65.white, coords),
-	formats: {
-		color: {},
-	},
 });