Invalid css in css_variables.css

[MarcusNotheis]

Hi colleagues,

in my opinion, the CSS Variable --sapThemeMetaData-Base-baseLib in the css_variables.css is invalid in all themes (I guess there are some quotes missing around the json data):

theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css

Line 9 in 72f3764

:root{--sapThemeMetaData-Base-baseLib:{"Path": "Base.baseLib.sap_fiori_3.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_base_fiori","baseTheme"], "Tags": ["Fiori_3","LightColorScheme"], "FallbackThemeId": "sap_belize", "Engine": {"Name": "theming-engine", "Version": "1.69.2"}, "Version": { "Build": "11.1.37.20220329125434", "Source": "11.1.37"}};}

The W3C CSS Validator Service is also reporting errors for this file.

This is e.g. causing errors in the production build of create-react-app when trying to import the CSS Variable files directly.

cc @vladitasev

[dominikschreiber]

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.