Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parse dashed-ident color() ids. #407

Merged
merged 1 commit into from
Feb 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/parse.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 <number>s or <percentage>s are provided than parameters that the colorspace takes, the excess <number>s at the end are ignored.
// If less <number>s or <percentage>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.)
Expand All @@ -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})?`;
Expand Down
4 changes: 3 additions & 1 deletion src/spaces/cam16.js
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,8 @@ export default new ColorSpace({
);
},
formats: {
color: {}
color: {
id: "--cam16-jmh"
},
},
});
4 changes: 3 additions & 1 deletion src/spaces/hct.js
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,8 @@ export default new ColorSpace({
return fromHct(hct, viewingConditions);
},
formats: {
color: {}
color: {
id: "--hct"
},
},
});
2 changes: 1 addition & 1 deletion src/spaces/rec2100-hlg.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",

Expand Down
4 changes: 4 additions & 0 deletions tests/parse.html
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,10 @@ <h1>color()</h1>
<td>color(jzazbz 0 25% -50%)</td>
<td>{"spaceId":"jzazbz","coords":[0,0.125,-0.25],"alpha":1}</td>
</tr>
<tr>
<td>color(--jzazbz 0 25% -50%)</td>
<td>{"spaceId":"jzazbz","coords":[0,0.125,-0.25],"alpha":1}</td>
</tr>
<tr title="With transparency">
<td>color(display-p3 0 1 0 / .5)</td>
<td>{"spaceId":"p3","coords":[0,1,0],"alpha":0.5}</td>
Expand Down