CSS custom properties: whitespace is not removed

[baawiki]

:root{--blue: #033C73;--indigo: #6610f2} is left unchanged.

minify/css/css.go

Line 248 in 882f890

if _, err := c.w.Write(c.p.Values()[0].Data); err != nil {

Will it just need a parse.TrimWhitespace(c.p.Values()[0].Data), or does this fall into the unsafe/unsupported category?

[baawiki]

Further research suggests it's not as straightforward as trimming all whitespace, but there's still scope for some minification.

[tdewolff]

Nice one, thanks for the research! To me it looks like we can make the following minifications:

• Trim leading/trailing whitespace from custom declarations
• Remove custom declaration if value is empty or only whitespace looks like this is different from initial, so no (see https://drafts.csswg.org/css-variables-1/#guaranteed-invalid)
• Replace multiple whitespace by a single space, but not when between quotes? Not sure about this one. Probably too dangerous...

What are your thoughts on this?

[baawiki]

I'm by no means any kind of expert of CSS. Reading the spec it's not completely clear, and then there's what matters: the browser implementations...

Trim leading/trailing whitespace from custom declarations

I think this is reasonable, with some edge cases to consider like --foo: ;. At least one version of the spec says that --foo:; is invalid.

Replace multiple whitespace by a single space, but not when between quotes? Not sure about this one. Probably too dangerous...

Seems like it should be safe.

[tdewolff]

See 0ff4e9c to distinguish between empty and whitespace in custom variables.

From https://www.w3.org/TR/css-variables-1/#syntax:

Note: While must represent at least one token, that one token may be whitespace. This implies that --foo: ; is valid, and the corresponding var(--foo) call would have a single space as its substitution value, but --foo:; is invalid.

So we may not remove the last whitespace. It is unclear whether custom variables distinguish between one and more than one whitespaces. In any case, where would you use the whitespace of a custom variable? I have found no way to distinguish between whitespace usage in Chrome.

The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation, which is explained in the section defining var().

Is this equal to --foo: ;?