I came across a curly problem in some CSS where there were multiple psuedo selectors with grouping (commas). When the page was running in development the classes applied properly across browser, but when minified the whole rule would fail.
Explicitly defining each selector works:
input[type=range].event::-ms-thumb {
background: var(--event);
}
input[type=range].event::-moz-range-thumb{
background: var(--event);
}
input[type=range].event::-webkit-slider-thumb {
background: var(--event);
}
Refactored to use a grouping selector, also works IF there is a space behind the comma:
input[type=range].event::-ms-thumb ,
input[type=range].event::-moz-range-thumb ,
input[type=range].event::-webkit-slider-thumb {
background: var(--event);
}
when compressed the CSS most tools I've tried all remove the 'unnecessary' white space elements and the rule now fails:
input[type=range].event::-ms-thumb,input[type=range].event::-moz-range-thumb,input[type=range].event::-webkit-slider-thumb{background:var(--event)}
Turns out that the comma, which is normally a grouping selector, is then 'seen' as part of the first psuedo selector name and thus invalidates the entire rule (found in latest Edge, Chrome, Firefox and Safari).
With a comma behind the rule in compressed form, the rule works again.
input[type=range].event::-ms-thumb ,input[type=range].event::-moz-range-thumb ,input[type=range].event::-webkit-slider-thumb{background:var(--event)}
I read up and down the spec https://www.w3.org/TR/selectors-3/ and didn't find mention of this behaviour for psuedo selectors, so I figured I'd have to build an extra step to my deploy script after modification to find commas in minified css and put a space ahead of them and in my very small test case this works. Is there anything within CSS that defines how commas should be used? Are there any compressors that account for commas in psuedo selectors properly? Can anyone think of any reason replacing , with , will break something?