[css-variables] Unable to do feature matching at parse time when using var()

[alancutter]

When using var() references you can no longer rely on parse time failure to automatically match on supported syntax/features.

See example from user bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=700445#c13

--x1: url(data:image/png;base64,<PNG>);
--x2: url(data:image/png;base64,<PNG>);
background-image: var(--x1);
background-image: image-set(var(--x1) 1x, var(--x2) 2x);

One workaround for this use case is to use @supports. Is this a desirable state of the API or should the fallback behaviour that used to happen at parse time be brought to variable resolution in some form?

[AmeliaBR]

This is a known limitation of CSS Custom Properties Level 1. As you say, if you need parse-time checking, the solution for now is an @supports test, where you use the substituted value in the tested declaration:

@supports (background-image: image-set(url("x") 1x, url("y") 2x) ) {
    background-image: image-set(var(--x1) 1x, var(--x2) 2x);
}

For future levels of CSS Custom Properties, there are proposals for declaring the data type of the property. For example, in your case the data time would be a single image. That would allow the parser to check the --x1 and --x2 values to confirm that they are valid images, and it would also allow it to check the two background-image declarations, to confirm they would make sense if the var() calls were each replaced by an image.

Currently, the draft spec for making these declarations if part of the Houdini project, via a DOM API: The CSS Properties and Values API Level 1. There's an open issue to create a declarative @-rule API, but it is not likely to happen until all the bugs and details have been worked out for the DOM API. There are other open issues on the spec that relate to parsing and type checking of custom property values after their data type has been registered.

[FremyCompany]

For future levels of CSS Custom Properties, there are proposals for declaring the data type of the property. For example, in your case the data time would be a single image. That would allow the parser to check the --x1 and --x2 values to confirm that they are valid images, and it would also allow it to check the two background-image declarations, to confirm they would make sense if the var() calls were each replaced by an image.

Sadly this part has been removed from the proposal because Blink engineers thought it would be too complex to implement for them. Using support will thus remain the only option, except if the group changes its mind.

[FremyCompany]

cc @tabatkins to confirm I remember correctly

[upsuper]

Another option is to keep the content of all declarations of a single property when they have variable reference, and do fallback at compute time. That would probably give developers the most intuitive result.

[tabatkins]

While we don't have a declarative version of it yet, the Houdini Properties & Values API lets you register a custom property with a grammar, and that gives us back the fallback behavior desired here.

However, you would have to instead write it as:

--x1: url(data:image/png;base64,<PNG>);
--x2: image-set(var(--x1) 1x, url(data:image/png;base64,<PNG>) 2x);
background-image: var(--x2, var(--x1));

Assuming --x1 and --x2 were both declared with a grammar: "<image>" term in their registration, a browser that doesn't understand image-set() will fail to parse --x2 (at computed-value time, post-substitution), thus treating references to it as invalid, and triggering variable fallback.

@FremyCompany’s recollection is otherwise correct - we did resolve to not treat variable references as typed, even when their property has been given a type. There were some weird implementation implications, and not all grammars you can specify map to a type in an easy way. So all properties with var references are assumed to be correct at parse-time, and we don't get the automatic CSS fallback. You have to fake it it with variable fallback, as explained above.

[tabatkins]

Closing because this is WAI.