[css-variables] Whitespace-trimming and custom properties.

[emilio]

Today, these things are invalid syntax per spec:

• --a:;
• width: var(--b,);
• width: var(--c,/**/);

However these are valid:

• --a: ;
• width: var(--a, );

As per #774 (comment), we're supposed to trim whitespace from declaration values. I was looking at implementing this in Gecko (while I was going through CSS variables failures) and I think we should make the former examples also valid, if we want to keep the resolution in #774.

We should also consider trimming whitespace from the fallback value, too...

For reference, this contains the test changes: https://phabricator.services.mozilla.com/D116459

[tabatkins]

--a:; is valid per spec; https://drafts.csswg.org/css-variables/#defining-variables got changed a while back to make the <declaration-value> optional.

I'm okay with making the other two valid; it would just mean putting in a specific exception to the general comma-omission rules.

[LeaVerou]

I agree that if --a:; is valid, then empty values should be valid as fallbacks. Otherwise you can end up with var(--b,var(--a)) being valid or invalid based on whether there's whitespace after the comma!

[LeaVerou]

About trimming, one potential issue is that it could break uses of the space toggle if JS is involved to read the variable value. Though I think the value add it offers for the common case is worth it.

[css-meeting-bot]

The CSS Working Group just discussed [css-variables] Whitespace-trimming and custom properties..

The full IRC log of that discussion

<dael> Topic: [css-variables] Whitespace-trimming and custom properties.
<dael> github: https://github.com//issues/6345
<dael> emilio: This one; we resolved a while ago on trimming whitespace from decorations. TabAtkins pointed out some examples invalid in impl should be valid.
<dael> emilio: For system prop fallback there's no trimming. Felt odd when impl that if you're using fallback in computed you get whitespace but if the fallback you have a variable it's stringed.
<TabAtkins> q+
<dael> emilio: Trimming whitespace from fallback functions would be simpliest. I think in general makes sense
<dael> Rossen_: Feedback?
<leaverou_> q?
<Rossen_> ack TabAtkins
<dael> TabAtkins: Yes, we absolutely should. That this doesn't work is accident of css rules for comma omission. You have to omit comna when not separating but this is the case where lack of a thing can be a thing. Need something in var to set the exception that you can set a comma
<dael> emilio: fwiw it's very easy to impl
<dael> Rossen_: Other feedback? leaverou_ you're in issue?
<dael> leaverou_: I added my thoughts to issue. I support that change
<TabAtkins> `foo(--a,)` is currently syntacitcally invalid, and that is good for everything *but* `var()`
<dael> Rossen_: Obj to adding the spec proposal?
<dael> Resolved: Accept the proposal

[emilio]

(FWIW there's a resolution, though Resolved was in lowercase so the bot didn't pick it up):

Resolved: Accept the proposal