Invalid css in css_variables.css about theming-base-content HOT 1 CLOSED

As far as I can tell, values of CSS custom properties have to be a <declaration-value>:

The <declaration-value> production matches any sequence of one or more tokens, so long as the sequence does not contain <bad-string-token>, <bad-url-token>, unmatched <)-token>, <]-token>, or <}-token>, or top-level <semicolon-token> tokens or <delim-token> tokens with a value of "!". It represents the entirety of what a valid declaration can have as its value.

So while unquoted JSON is most certainly an uncommon CSS custom property value, in my opinion it is still a valid one.

This goes in line with the behavior of all major browsers, which parse the CSS just fine and the property can be accessed just as intended:

JSON.parse(getComputedStyle(document.documentElement).getPropertyValue('--sapThemeMetaData-Base-baseLib'))

See this repro to convince yourself.

The --sapThemeMetaData* parameters are not intended to be used in CSS directly, but rather to convey information to JavaScript frameworks about the currently active SAP- or custom-theme.

With that, the conclusion is that the W3C CSS Validator Service and create-react-app have a bug in their CSS parsing algorithm. Please file an issue there.

from theming-base-content.