CSS variables containing only whitespace are incorrectly removed

Environment

Just testing at https://clean-css.github.io/

Input CSS

.inset {
  --inset: inset;
}

.outset {
  --inset: ;
}

.shadow {
  box-shadow: var(--inset) 0 2px 2px #0004;
}

Actual output CSS

.inset{--inset:inset}.shadow{box-shadow:var(--inset) 0 2px 2px #0004}

Expected output CSS

.inset{--inset:inset}.outset{--inset: ;}.shadow{box-shadow:var(--inset) 0 2px 2px #0004}

Explanation

Whitespace is a valid value for a CSS variable, like this:

--my-var: ;

This is semantically not the same as:

--my-var:;

From CSS Custom Properties for Cascading Variables Module Level 1:

Note: While <declaration-value> 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.

Because of this issue, clean-css currently cannot be used with Tailwind CSS, as we rely on this feature a lot to support class composition in the framework.

Thanks for your awesome work on this lib ❤️

[jakubpawlowicz]

Thanks @adamwathan for more details on this.

@SuyashJoshi179 go ahead with fixing it, that’s much appreciated!

I think you need to fix the tokenizer first as it doesn’t understand that spaces can be significant. Then level 1 optimizations default to whitespace removal for variables, but in this case it should skip if variable’s value is just whitespace.

Hth, let us know if you need anything else.

[adamwathan]

Hey @SuyashJoshi179! Semicolon is not required you’re correct, here’s a demo:

https://jsfiddle.net/cgys45af/

To test this issue in general, change line 5 to remove the whitespace, then notice that the demo breaks 👍