[css-values] Key-Value and Index Maps for attr()

[Crissov]

Note: […] The attr() expression cannot return everything, […]. This is intentional, as the intent of the attr() expression is not to make it possible to describe a presentational language’s formatting using CSS, but to enable CSS to take semantic data into account.

To achieve this goal, I think attr() would benefit from a way to map attribute values to CSS values.

• Key-value pairs: attr(party map("Dem" blue, "Rep" red, "Grn" green) color, gray)
• Numeric index:
  • 1-based: attr(rank map(gold, silver, orange) color, gray)
  • 0-based: attr(rank map(black, gold, silver, orange) color, gray)
  • explicit: attr(rank map(1 gold, 2 silver, 3 orange) color, gray)
• mixed: attr(rank map(gold, silver, orange, "DQ" red) color, gray)

Similar results can already be achieved with attribute selectors, though:

[party] {color: gray}
[party="Dem"] {color: blue}
[party="Rep"] {color: red}
[party="Grn"] {color: green}

[rank] {color: gray}
[rank=1] {color: gold}
[rank=2] {color: silver}
[rank=3] {color: orange}
[rank=NQ] {color: red}

[Crissov]

Rediscovering this suggestion of mine, I think with recent changes and additions to CSS, it probably makes more sense to do such mappings in a way that is also usable with var() etc., i.e. move the attr() inside the map():

map(attr(party <string>),
"Dem" blue,
"Rep" red,
"Grn" green,
gray)

I thought @LeaVerou had raised a similar issue, but neither #9992 nor #11543 seems to be it.

[tabatkins]

This is now doable with the if() function:

--foo: attr(party);
background-color: if(
  style(--foo: "Dem"): blue;
  style(--foo: "Rep"): red;
  style(--foo: "Grn"): green;
  else: gray);

So, closing as addressed. ^_^

[Crissov]

I did not think of it like that yet, so I gladly give you ”doable“, but I won’t give you pretty.

background-color: map(attr(party),
  "Dem": blue, 
  "Rep": red,
  "Grn": green,
  else: gray
);

background-color: switch(attr(party),
  "Dem": blue, 
  "Rep": red,
  "Grn": green,
  gray
);