Stylus script: empty elements (and blank in Firefox)

empty-elements.css

/* ==UserStyle==
@name           Empty elements
@namespace      github.com/openstyles/stylus
@version        0.1.0
@description    Highlight and count empty elements (and blank ones only in Firefox)
@author         Philippe Vayssière
==/UserStyle== */

:root {
  --white: white;
  --error: red;
  --warning: #b07c00;
  --n: "element";
}

/* :-moz-only-whitespace (equivalent to :blank) only in Firefox... :blank isn't supported anywhere, alas
    https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace
*/
@supports (-moz-appearance: meterbar) {
  *:not(:where(div, span, i, time[datetime], iframe, canvas, script, td, textarea, select[disabled], option[disabled], del, ins)):-moz-only-whitespace::before {
    content: "Warning only whitespace <" var(--n) ">";
    color: var(--white) !important;
    background-color: var(--warning) !important;
    counter-increment: emptyWarning;
  }
}

/* :empty is cross-browser */
*:not(:where(div, span, i, time[datetime], iframe, canvas, script, td, textarea, select[disabled], option[disabled])):empty::before {
  content: "ERROR empty <" var(--n) ">";
  color: var(--white) !important;
  background-color: var(--error) !important;
  counter-increment: emptyError;
}

html {
  counter-reset: emptyError emptyWarning;
}

/* Display count in sidebar */
html::after {
  content: "Empty elements:\A" counter(emptyError) " errors\A";
  position: fixed !important;
  top: 300px !important;
  right: 0 !important;
  z-index: 123456 !important;
  width: 12em !important;
  border: 5px solid #fff;
  border-right: 0;
  padding: 15px !important;
  white-space: pre !important;
  font-family: sans-serif !important;
  font-size: 20px !important;
  font-weight: bold;
  color: #fff !important;
  background: #10415E !important;
}

/* CSS hack specific to Firefox http://browserhacks.com/#hack-48ca6fc2947b7850c571a2f69bdbffbd */
@supports (-moz-appearance: meterbar) {
  html::after {
    content: "Empty elements:\A" counter(emptyError) " errors\A" "" counter(emptyWarning) " warnings (whitespace)\A";
  }
}

/* A bunch of elements names */
address { --n: 'address' }
article { --n: 'article' }
aside { --n: 'aside' }
footer { --n: 'footer' }
header { --n: 'header' }
h1 { --n: 'h1' }
h2 { --n: 'h2' }
h3 { --n: 'h3' }
h4 { --n: 'h4' }
h5 { --n: 'h5' }
h6 { --n: 'h6' }
main { --n: 'main' }
nav { --n: 'nav' }
section { --n: 'section' }
blockquote { --n: 'blockquote' }
dd { --n: 'dd' }
dl { --n: 'dl' }
dt { --n: 'dt' }
figcaption { --n: 'figcaption' }
figure { --n: 'figure' }
li { --n: 'li' }
ol { --n: 'ol' }
p { --n: 'p' }
ul { --n: 'ul' }
a { --n: 'a' }
caption { --n: 'caption' }
th { --n: 'th' }
button { --n: 'button' }
fieldset { --n: 'fieldset' }
legend { --n: 'legend' }
label { --n: 'label' }
details { --n: 'details' }
dialog { --n: 'dialog' }
summary { --n: 'summary' }