[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) etc.

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