Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Declarations should support whitespace as a valid value

See original GitHub issue

Something I’ve run into this week while trying to solve some interesting problems using CSS custom properties is learning that this is valid CSS:

--my-custom-property: ;

From here:

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.

PostCSS parses this but importantly sets the value of the declaration to '', when it should be ' '.

This distinction is important because of situations like this:

.multiple-shadows {
  --shadow-1: ;
  --shadow-2: ;
  box-shadow: var(--shadow-1) var(--shadow-2);
}
.shadow-1 {
  --shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.shadow-2 {
  --shadow-2: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

Applying all three classes to an element (multiple-shadows shadow-1 shadow-2) should result in this computed box shadow (not too weird):

box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) 0 1px 2px 0 rgba(0, 0, 0, 0.05);

What is interesting is that applying only 2 classes (say multiple-shadows shadow-1) should result in this computed box shadow:

box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);

This is only possible because of --shadow-2: ; being valid CSS for assigning a single whitespace character to the value of --shadow-2.

When --shadow-2 has no value (rather than whitespace), the box shadow simply computes to none because --shadow-2 resolves to the “guaranteed invalid value” rather an whitespace, which is always a valid value.

This is the source of a minification issue that occurs in cssnano where the discardEmptyRules optimization removes declarations like this:

--shadow-1: ;

…which are actually not empty, and not safe to remove because they do impact how the browser actually renders the styles. This could be worked around in cssnano but I believe the ultimate cause of the issue is how we parse declarations in PostCSS, and based on what I know currently I think this is the right place to solve it.

Very weird corner case situation for sure, curious to hear any thoughts on it 👍