Bug 1487656 ‑ Comment out the indicator :matches(…) block for now

[ExE-Boss]

Fixes bug 1487656:

Inspecting the minified stylesheet, it turns out that the minifier actually merged the :matches(…) and non‑:matches(…) blocks together, which breaks on browsers which don’t support :matches(…).

A temporary solution would be to comment out the :matches(…) block, but a long term one will require a way to tell the CSS minifier to not merge the :matches(…) and non‑:matches(…) blocks together.

.note+.note, .note+.notice, .note+.overheadIndicator, .note+.warning,
.note+p:empty+.note, .note+p:empty+.notice,
.note+p:empty+.overheadIndicator, .note+p:empty+.warning, .note+p:empty+pre,
.note+pre, .notice+.note, .notice+.notice, .notice+.overheadIndicator,
.notice+.warning, .notice+p:empty+.note, .notice+p:empty+.notice,
.notice+p:empty+.overheadIndicator, .notice+p:empty+.warning,
.notice+p:empty+pre, .notice+pre, .overheadIndicator+.note,
.overheadIndicator+.notice, .overheadIndicator+.overheadIndicator,
.overheadIndicator+.warning, .overheadIndicator+p:empty+.note,
.overheadIndicator+p:empty+.notice,
.overheadIndicator+p:empty+.overheadIndicator,
.overheadIndicator+p:empty+.warning, .overheadIndicator+p:empty+pre,
.overheadIndicator+pre, .warning+.note, .warning+.notice,
.warning+.overheadIndicator, .warning+.warning, .warning+p:empty+.note,
.warning+p:empty+.notice, .warning+p:empty+.overheadIndicator,
.warning+p:empty+.warning, .warning+p:empty+pre, .warning+pre,
:matches(.warning, .overheadIndicator, .note, .notice,
pre)+:matches(.warning, .overheadIndicator, .note, .notice, pre),
:matches(.warning, .overheadIndicator, .note, .notice,
pre)+p:empty+:matches(.warning, .overheadIndicator, .note, .notice, pre),
pre+.note, pre+.notice, pre+.overheadIndicator, pre+.warning,
pre+p:empty+.note, pre+p:empty+.notice, pre+p:empty+.overheadIndicator,
pre+p:empty+.warning, pre+p:empty+pre, pre+pre {margin-top:-15px}

Follow‑up to #4958, necessary for #4884

---

review?(@jwhitlock)

See also w3c/csswg-drafts#3082, which is the reason why we are in this situation to begin with.

[jwhitlock]

I put my local dev environment into production assets mode. Before this change, the minimized rule is:

.note+.note,.note+.notice,.note+.overheadIndicator,.note+.warning,.note+p:empty+.note,.note+p:empty+.notice,.note+p:empty+.overheadIndicator,.note+p:empty+.warning,.note+p:empty+pre,.note+pre,.notice+.note,.notice+.notice,.notice+.overheadIndicator,.notice+.warning,.notice+p:empty+.note,.notice+p:empty+.notice,.notice+p:empty+.overheadIndicator,.notice+p:empty+.warning,.notice+p:empty+pre,.notice+pre,.overheadIndicator+.note,.overheadIndicator+.notice,.overheadIndicator+.overheadIndicator,.overheadIndicator+.warning,.overheadIndicator+p:empty+.note,.overheadIndicator+p:empty+.notice,.overheadIndicator+p:empty+.overheadIndicator,.overheadIndicator+p:empty+.warning,.overheadIndicator+p:empty+pre,.overheadIndicator+pre,.warning+.note,.warning+.notice,.warning+.overheadIndicator,.warning+.warning,.warning+p:empty+.note,.warning+p:empty+.notice,.warning+p:empty+.overheadIndicator,.warning+p:empty+.warning,.warning+p:empty+pre,.warning+pre,:matches(.warning,.overheadIndicator,.note,.notice,pre)+:matches(.warning,.overheadIndicator,.note,.notice,pre),:matches(.warning,.overheadIndicator,.note,.notice,pre)+p:empty+:matches(.warning,.overheadIndicator,.note,.notice,pre),pre+.note,pre+.notice,pre+.overheadIndicator,pre+.warning,pre+p:empty+.note,pre+p:empty+.notice,pre+p:empty+.overheadIndicator,pre+p:empty+.warning,pre+p:empty+pre,pre+pre {
 margin-top:-15px
}

The indicators have the desired spacing in Safari, but not in Chrome or Firefox:

After this PR, the rule is:

.note+.note,.note+.notice,.note+.overheadIndicator,.note+.warning,.note+p:empty+.note,.note+p:empty+.notice,.note+p:empty+.overheadIndicator,.note+p:empty+.warning,.note+p:empty+pre,.note+pre,.notice+.note,.notice+.notice,.notice+.overheadIndicator,.notice+.warning,.notice+p:empty+.note,.notice+p:empty+.notice,.notice+p:empty+.overheadIndicator,.notice+p:empty+.warning,.notice+p:empty+pre,.notice+pre,.overheadIndicator+.note,.overheadIndicator+.notice,.overheadIndicator+.overheadIndicator,.overheadIndicator+.warning,.overheadIndicator+p:empty+.note,.overheadIndicator+p:empty+.notice,.overheadIndicator+p:empty+.overheadIndicator,.overheadIndicator+p:empty+.warning,.overheadIndicator+p:empty+pre,.overheadIndicator+pre,.warning+.note,.warning+.notice,.warning+.overheadIndicator,.warning+.warning,.warning+p:empty+.note,.warning+p:empty+.notice,.warning+p:empty+.overheadIndicator,.warning+p:empty+.warning,.warning+p:empty+pre,.warning+pre,pre+.note,pre+.notice,pre+.overheadIndicator,pre+.warning,pre+p:empty+.note,pre+p:empty+.notice,pre+p:empty+.overheadIndicator,pre+p:empty+.warning,pre+p:empty+pre,pre+pre {
 margin-top:-15px
}

The indicators are now snug in Safari, Chrome, and Firefox: