Validator does not recognize "background-color" and "fill" properties with custom values

[tylerjmorg]

It looks like the validator does not recognize custom property values with the "background-color" and "fill" properties.

Consider the following example:

CSS: :root { --primary-color: light-dark(#000,#fff); } ... body { background-color: var(--primary-color); }

or

:root { --primary-color: light-dark(#000,#fff); } ... body { fill: var(--primary-color); }

The validator displays the following:

Value Error : background-color [var(--primary-color)] is not a [background-color] value : [var(--primary-color)]

or

[var(--primary-color)] is not a [fill] value : [var(--primary-color)]

Although, it looks like the "background-color" property is used as an example in the W3C standard.

Standard (CR): https://www.w3.org/TR/css-variables-1/ Standard (Editor's Draft): https://drafts.csswg.org/css-variables/

You can also test the examples with https://tylermorgan.co/ in the validator.

[nakoo]

It looks background-variant properties don't allow css variable in current version.

--bg-color: 50 95% 65%;
background: hsl(var(--bg-color));

return

error: CSS: “background”: Cannot invoke "org.w3c.css.values.CssValue.getType()" because "val" is null.

[ylafon]

Multiple issues here, light-dark() is not yet implemented, background-color might have issues with var(), attr() etc.. and hsl expect multiple values when var() brings multiple, which is wrong. Working on that.

[ylafon]

The first part is fixed by 3682b2f7484535f815ce792615f31aeabbb5935c leaving this open for the hsl() and the variable containing multiple values.

[ylafon]

Processing of multi-valued variable definition should be improved everywhere, but at least it works for this example. Closing the issue.