[css-variables] Insert empty comments during serialization to separate adjacent tokens

[Loirooriol]

var s = document.body.style;
var cs = getComputedStyle(document.body);
s.cssText = "--a:a; --b:var(--a)b; counter-reset:var(--b)";
cs.counterReset; // "a 0 b 0" or equivalent
cs.getPropertyValue("--b"); // ???

I have noticed that Firefox serializes --b as "a/**/b". this is nice, because then

s.setProperty("--b", cs.getPropertyValue("--b"));
cs.counterReset; // still "a 0 b 0"

However, Blink serializes --b as "ab", so

s.setProperty("--b", cs.getPropertyValue("--b"));
cs.counterReset; // "ab 0" :(

I think https://drafts.csswg.org/css-variables/#serializing-custom-props should standardize what Firefox does in order to have round-trip.

[andruud]

Huh. I thought this was already in the spec. I'm pretty sure we have WPTs for it, at least.

[tabatkins]

It is in the spec already, but the Syntax spec rather than Variables (because this is a wider issue than just variables).

[Loirooriol]

Well, that section in css-syntax seems to assume this will only happen if there was a comment in the first place.

For any consecutive pair of tokens, if [...] the pair of tokens must be serialized with a comment between them.
If the tokenizer preserves comments, the preserved comment should be used

What "preserved comment" if I just used --b:var(--a)b?

The section should take var() into account, and css-variables should have a note or something.

[tabatkins]

I don't understand the question. If there's no preserved comment, you... don't use the (non-existent) preserved comment. So you instead insert an empty comment.

[tabatkins]

(I'm fine with having a note in Variables talking about this, tho.)

[Loirooriol]

you... don't use the (non-existent) preserved comment

Sure, so I would add something like

If the tokenizer preserves comments and there was a comment at that location, the preserved comment should be used

Or say

If the tokenizer preserved a comment between the tokens, the preserved comment should be used

Or in plural, I guess there may be multiple comments.

[tabatkins]

All right, tweaked the wording in Syntax and added to the example in Variables to allude to this.