diff --git a/src/parse.js b/src/parse.js index 85ae824e7..88a37d9cf 100644 --- a/src/parse.js +++ b/src/parse.js @@ -78,13 +78,15 @@ 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]; let alpha = env.parsed.rawArgs.indexOf("/") > 0 ? env.parsed.args.pop() : 1; for (let space of ColorSpace.all) { let colorSpec = space.getFormat("color"); if (colorSpec) { - if (id === colorSpec.id || colorSpec.ids?.includes(id)) { + if (ids.includes(colorSpec.id) || colorSpec.ids?.filter((specId) => ids.includes(specId)).length) { // From https://drafts.csswg.org/css-color-4/#color-function // If more s or s are provided than parameters that the colorspace takes, the excess s at the end are ignored. // If less s or s are provided than parameters that the colorspace takes, the missing parameters default to 0. (This is particularly convenient for multichannel printers where the additional inks are spot colors or varnishes that most colors on the page won’t use.) @@ -107,9 +109,10 @@ export default function parse (str, {meta} = {}) { // Not found let didYouMean = ""; - if (id in ColorSpace.registry) { + let registryId = id in ColorSpace.registry ? id : undashedId; + if (registryId in ColorSpace.registry) { // Used color space id instead of color() id, these are often different - let cssId = ColorSpace.registry[id].formats?.functions?.color?.id; + let cssId = ColorSpace.registry[registryId].formats?.functions?.color?.id; if (cssId) { didYouMean = `Did you mean color(${cssId})?`; diff --git a/src/spaces/cam16.js b/src/spaces/cam16.js index cf000f40f..2eb461db0 100644 --- a/src/spaces/cam16.js +++ b/src/spaces/cam16.js @@ -359,6 +359,8 @@ export default new ColorSpace({ ); }, formats: { - color: {} + color: { + id: "--cam16-jmh" + }, }, }); diff --git a/src/spaces/hct.js b/src/spaces/hct.js index 53d313477..ea4decc92 100644 --- a/src/spaces/hct.js +++ b/src/spaces/hct.js @@ -149,6 +149,8 @@ export default new ColorSpace({ return fromHct(hct, viewingConditions); }, formats: { - color: {} + color: { + id: "--hct" + }, }, }); diff --git a/src/spaces/rec2100-hlg.js b/src/spaces/rec2100-hlg.js index 855a68da2..a094f38cb 100644 --- a/src/spaces/rec2100-hlg.js +++ b/src/spaces/rec2100-hlg.js @@ -11,7 +11,7 @@ const scale = 3.7743; // Place 18% grey at HLG 0.38, so media white at 0.75 export default new RGBColorSpace({ id: "rec2100hlg", - cssid: "rec2100-hlg", + cssId: "rec2100-hlg", name: "REC.2100-HLG", referred: "scene", diff --git a/tests/parse.html b/tests/parse.html index b1c213fc4..7f894a09a 100644 --- a/tests/parse.html +++ b/tests/parse.html @@ -287,6 +287,10 @@

color()

color(jzazbz 0 25% -50%) {"spaceId":"jzazbz","coords":[0,0.125,-0.25],"alpha":1} + + color(--jzazbz 0 25% -50%) + {"spaceId":"jzazbz","coords":[0,0.125,-0.25],"alpha":1} + color(display-p3 0 1 0 / .5) {"spaceId":"p3","coords":[0,1,0],"alpha":0.5}