The fallback part of a var() function does not validate against the type of the custom property being referenced.
A var() function can provide fallback value, in case the referenced custom property does not exist (or is invalid in some other way): .component { width: var(--component-width, 100px); } When custom properties are registered with some type (e.g. with @property), the current behavior is to consider the var() function invalid if the fallback does not match the type of the property being referenced: @property --length { syntax: "<length>"; inherits: false; initial-value: 0px; } .foo { --length: 100px; width: var(--length, 50px); /* Valid, width becomes '100px' */ } .bar { --length: 100px; width: var(--length, auto); /* Invalid, width becomes 'unset' */ } As you can see above, this type restriction even applies when the fallback would not be used (--length is present and valid in both cases). This behavior is now seen as a mistake by the CSSWG, and in https://github.com/w3c/csswg-drafts/issues/10455 we resolved to change it: the fallback is no longer validated against the type of the referenced property (regardless of whether or not it's used): .baz { --length: 100px; width: var(--length, auto); /* Now valid, width becomes '100px' */ } .bax { /* Also valid, regardless of --undefined's type. Width becomes 'auto'. */ width: var(--undefined, auto); }