search

w3c / css-validator

W3C CSS Validation Service
https://jigsaw.w3.org/css-validator/
Other
204 stars 105 forks source link

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

Open tylerjmorg opened 3 months ago

tylerjmorg commented 3 months ago

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 commented 2 months ago

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.