[css-var] var(property)

[Crissov]

Will var(foo) always resolve to the value of the foo property if anything at all?
That is, currently foo is limited to a <dashed-ident> for custom properties, so always has a prefix of a double hyphen-minus --, but if var() was ever specified to accept other values then those would be the normal properties defined by CSS modules and never anything else.

bar 
{
  --color: orange;
  color: green;
  background-color: var(color, red); /* similar to `currentcolor` */
}

• var(background-color) would basically solve [css-color-5] Add currentBackgroundColor Variable #5292.
• var(font-size) would be almost the same as 1em.
• var(line-height) would be almost the same as 1lh. [css-values] The lh and rlh units are more complicated than what they seem. #3257

[castastrophe]

Very interesting idea. 🤔 Can you provide any more use-cases to help me grok the usefulness? Since you shared alternative ways to accomplish the same without var, I'm wondering if perhaps this is an ease-of-use concept or if there's ways to use this that fill functionality gaps.

[Crissov]

I'm not really proposing to add this, but was just asking for clarification if this would be the only feasible meaning such var() references could ever have.

[TheComputerM]

The main benefit would be with numerical values:

.class {
  width: 10px;
  height: calc(var(width) + 5em);
}

[andruud]

(I think this adds too much complexity to be worth doing, but I'll play anyway):

Is there a benefit vs. just using custom props? E.g.

.class {
  --width: 10px;
  width: var(--width);
  height: calc(var(--width) + 5em);
}

[tabatkins]

That would indeed be the only feasible meaning, yes.

This is explicitly off the table, however, because var-substitution has to know the full graph of variable dependencies to detect cycles. Normal properties can gain dependencies on each other in sometimes-nonobvious ways, making it hard to specify and potentially confusing to use; we also add new dependencies over time, which would break code currently relying on there not being such a dependency between two given properties. Custom properties, since they have no meaning whatsoever, don't suffer from either of these problems.