CSS lint (#1201)

* Use single quotes instead of double

* Install stylelint

* Set up config

* Update package/tests

* Fix lint issues

* Update CSS rules

.github/workflows/ci.yml

@@ -21,6 +21,10 @@ jobs:
       run: npm run test-lint
       env:
         CI: true
+    - name: Lint CSS
+      run: npm run test-lint-css
+      env:
+        CI: true
     - name: Tests
       run: npm run test-code
       env:

.stylelintrc.json

@@ -0,0 +1,54 @@
+{
+    "extends": "stylelint-config-recommended",
+    "ignoreFiles": [
+        "ext/mixed/lib/**/*.css"
+    ],
+    "rules": {
+        "font-family-name-quotes": "always-where-recommended",
+        "string-quotes": "single",
+        "color-named": "never",
+        "declaration-no-important": true,
+        "function-calc-no-invalid": true,
+        "function-calc-no-unspaced-operator": true,
+        "string-no-newline": true,
+        "unit-no-unknown": true,
+        "block-no-empty": true,
+        "no-extra-semicolons": true,
+        "no-invalid-double-slash-comments": true,
+        "font-weight-notation": "named-where-possible",
+        "color-hex-case": "lower",
+        "function-comma-space-after": "always",
+        "function-comma-space-before": "never",
+        "function-name-case": "lower",
+        "function-parentheses-space-inside": "never",
+        "function-whitespace-after": "always",
+        "number-leading-zero": "always",
+        "number-no-trailing-zeros": true,
+        "unit-case": "lower",
+        "value-keyword-case": "lower",
+        "property-case": "lower",
+        "indentation": 4,
+        "max-empty-lines": 2,
+        "selector-type-no-unknown": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "selector-combinator-space-before": "never",
+        "selector-combinator-space-after": "never",
+        "selector-list-comma-newline-after": "always-multi-line",
+        "rule-empty-line-before": null,
+        "block-opening-brace-space-before": [
+            "always",
+            {
+                "ignoreSelectors": "/^\\.icon/"
+            }
+        ],
+        "block-opening-brace-space-after": "always-single-line",
+        "color-hex-length": null,
+        "declaration-colon-space-before": "never",
+        "declaration-colon-space-after": "always-single-line",
+        "length-zero-no-unit": null,
+        "selector-pseudo-element-colon-notation": "double",
+        "custom-property-empty-line-before": null,
+        "at-rule-empty-line-before": null
+    }
+}

ext/bg/css/context.css

@@ -18,7 +18,7 @@
 body {
     padding: 10px;
     margin: 0;
-    font-family: "Segoe UI", Tahoma, sans-serif;
+    font-family: 'Segoe UI', Tahoma, sans-serif;
     font-size: 14px;
 }
 
@@ -90,7 +90,7 @@ label {
     padding: 0;
 }
 .link-group-icon[data-icon=chevron]::after {
-    content: "";
+    content: '';
     display: block;
     width: 100%;
     height: 100%;
@@ -139,8 +139,8 @@ body[data-loaded=true] .toggle-group {
     display: block;
     padding: 6px 12px;
     font-size: 14px;
-    font-weight: 400;
+    font-weight: normal;
-    line-height: 1.42857143;
+    line-height: calc(20 / 14);
     text-align: center;
     white-space: nowrap;
     cursor: pointer;
@@ -203,7 +203,7 @@ body[data-loaded=true] .toggle-group {
     background-color: #ffffff;
     background-image: linear-gradient(#ffffff, #e0e0e0);
     background-repeat: repeat-x;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .toggle-off:focus,
 .toggle-off:hover,
@@ -234,14 +234,13 @@ body[data-loaded=true] .toggle-group {
     border: 1px solid #cccccc;
     margin: 0;
     padding: 2px 3px;
-    margin: 0;
     cursor: pointer;
 }
 .nav-button+.nav-button {
     margin-left: -1px;
 }
 .nav-button::after {
-    content: "";
+    content: '';
     display: block;
     width: 16px;
     height: 16px;

ext/bg/css/pitch-accents-preview.css

@@ -27,7 +27,7 @@ body {
     overflow: hidden;
     width: 100%;
     height: 100%;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
     line-height: calc(20 / 14);
 }

ext/bg/css/popup-preview.css

@@ -39,7 +39,7 @@ body {
     overflow: hidden;
     width: 100%;
     height: 100%;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
 }
 

ext/bg/css/settings.css

@@ -76,11 +76,11 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
 .condition>.input-group-btn {
     width: auto;
 }
-.condition>.profile-condition-prefix:after {
+.condition>.profile-condition-prefix::after {
-    content: "IF";
+    content: 'IF';
 }
-.condition:nth-child(n+2)>.profile-condition-prefix:after {
+.condition:nth-child(n+2)>.profile-condition-prefix::after {
-    content: "AND";
+    content: 'AND';
 }
 
 .profile-condition-prefix {
@@ -152,7 +152,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
     justify-content: center;
     align-items: center;
 }
-.scan-input-index:after {
+.scan-input-index::after {
     display: block;
     counter-increment: scan-input-id;
     content: counter(scan-input-id);
@@ -265,7 +265,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
     width: 39px;
     text-align: center;
 }
-.generic-input-list .generic-input-prefix:after {
+.generic-input-list .generic-input-prefix::after {
     counter-increment: generic-input-id;
     content: counter(generic-input-id);
 }
@@ -276,7 +276,6 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
     width: 100%;
     min-height: 34px;
     line-height: 18px;
-    height: 96px;
     resize: vertical;
     font-family: 'Courier New', Courier, monospace;
     white-space: pre;
@@ -395,7 +394,7 @@ html:root[data-operating-system=openbsd] [data-hide-for-operating-system~=openbs
 
 .dictionary-details-table {
     display: table;
-    width: 100%
+    width: 100%;
 }
 
 .dictionary-details-entry {

ext/bg/css/settings2.css

@@ -67,7 +67,7 @@
     --text-color-lighter: #888888;
     --separator-color1: #cccccc;
     --separator-color2: #eeeeee;
-    --outline-item-background-color: rgba(13, 13, 13, 0.0);
+    --outline-item-background-color: rgba(13, 13, 13, 0);
     --outline-item-background-color-hover: rgba(13, 13, 13, 0.15);
     --warning-color: #96751c;
     --warning-color-light: hsl(44, 80%, 65%);
@@ -116,7 +116,7 @@ body {
     padding: 0;
     border: none;
     font-size: var(--font-size);
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: var(--text-color);
     line-height: var(--line-height-default);
     height: 100%;
@@ -130,9 +130,15 @@ ul {
     margin: 0;
     padding: 0 0 0 1.5em;
 }
-p+p,  p+ol,  p+ul,
+p+p,
-ol+p, ol+ol, ol+ul,
+p+ol,
-ul+p, ul+ol, ul+ul,
+p+ul,
+ol+p,
+ol+ol,
+ol+ul,
+ul+p,
+ul+ol,
+ul+ul,
 li {
     margin: 0.425em 0;
 }
@@ -326,7 +332,8 @@ h3 {
 }
 .sidebar:hover {
     max-width: var(--sidebar-size);
-    transition: max-width var(--animation-duration) ease-out 0.5s,
+    transition:
+        max-width var(--animation-duration) ease-out 0.5s,
         box-shadow var(--animation-duration) ease-out;
 }
 .sidebar-inner {
@@ -455,7 +462,8 @@ h3 {
     width: 100%;
     min-width: 100%;
     max-width: 100%;
-    transition: width var(--animation-duration) ease-in-out,
+    transition:
+        width var(--animation-duration) ease-in-out,
         max-width var(--animation-duration) ease-in-out,
         box-shadow var(--animation-duration) ease-in-out;
 }
@@ -807,7 +815,7 @@ select.short-height {
     margin-right: calc(var(--modal-padding-horizontal) * -1);
 }
 .modal-body .settings-item+.settings-item {
-    border-top: none
+    border-top: none;
 }
 .modal-body .settings-item-left {
     padding-left: var(--modal-padding-horizontal);
@@ -1094,7 +1102,8 @@ button.popup-menu-item:disabled {
     width: 100%;
     min-width: 100%;
     max-width: 100%;
-    transition: width var(--animation-duration) ease-in-out,
+    transition:
+        width var(--animation-duration) ease-in-out,
         max-width var(--animation-duration) ease-in-out;
 }
 .fab-container-right-inner2 {
@@ -1128,7 +1137,7 @@ button.fab-button:active {
 .fab-button-background {
     position: absolute;
     display: block;
-    content: "";
+    content: '';
     left: 0;
     top: 0;
     right: 0;
@@ -1264,7 +1273,7 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
 }
 .dictionary-details-table {
     display: table;
-    width: 100%
+    width: 100%;
 }
 .dictionary-details-entry {
     display: table-row;
@@ -1332,7 +1341,7 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
     flex: 0 0 auto;
     min-width: 4em;
     text-align: center;
-    align-self: stretch
+    align-self: stretch;
 }
 .profile-entry-cell:nth-child(5) {
     flex: 0 0 auto;
@@ -1426,10 +1435,10 @@ input[type=text].profile-entry-name-input {
     margin-right: 0.25em;
 }
 .profile-condition-prefix::after {
-    content: "if"
+    content: 'if';
 }
 .profile-condition:nth-child(n+2)>.profile-condition-prefix::after {
-    content: "and"
+    content: 'and';
 }
 select.profile-condition-type,
 select.profile-condition-operator {
@@ -1743,9 +1752,9 @@ code.anki-field-marker {
     grid-template-columns: auto auto 1fr auto;
     grid-template-rows: auto;
     grid-template-areas:
-        "index pattern-label     pattern     button"
+        'index pattern-label     pattern     button'
-        ".     replacement-label replacement button"
+        '.     replacement-label replacement button'
-        ".     test-label        test        .";
+        '.     test-label        test        .';
     column-gap: 0.25em;
     row-gap: 0.25em;
     align-items: stretch;

ext/mixed/css/display.css

@@ -70,7 +70,7 @@
     --tag-border-style: none;
     --tag-font-weight: bold;
 
-    --compact-list-separator: " | ";
+    --compact-list-separator: ' | ';
     --list-padding1: 1.4em;
     --list-padding2: var(--list-padding1);
 
@@ -218,7 +218,7 @@
     background-color: transparent;
 }
 :root {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: var(--font-size);
     line-height: var(--line-height);
     height: 100%;
@@ -441,11 +441,6 @@ a {
 :root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
     flex-flow: row nowrap;
 }
-:root[data-popup-action-bar-location=top] button.sidebar-button,
-:root[data-popup-action-bar-location=bottom] button.sidebar-button {
-    width: var(--sidebar-width) !important;
-    height: 100% !important;
-}
 
 
 /* Sidebar buttons */
@@ -464,6 +459,11 @@ button.sidebar-button {
     border-radius: 0;
     box-shadow: none;
 }
+:root[data-popup-action-bar-location=top] button.sidebar-button,
+:root[data-popup-action-bar-location=bottom] button.sidebar-button {
+    width: var(--sidebar-width);
+    height: 100%;
+}
 button.sidebar-button:disabled {
     cursor: default;
 }
@@ -615,7 +615,7 @@ button.action-button:active {
     box-shadow: none;
 }
 button.action-button::before {
-    content: "";
+    content: '';
     width: var(--action-button-size);
     height: var(--action-button-size);
     display: block;
@@ -624,19 +624,19 @@ button.action-button::before {
     background-size: contain;
 }
 button.action-button[data-icon=view-note]::before {
-    background-image: url("/mixed/img/view-note.svg");
+    background-image: url('/mixed/img/view-note.svg');
 }
 button.action-button[data-icon=add-term-kanji]::before {
-    background-image: url("/mixed/img/add-term-kanji.svg");
+    background-image: url('/mixed/img/add-term-kanji.svg');
 }
 button.action-button[data-icon=add-term-kana]::before {
-    background-image: url("/mixed/img/add-term-kana.svg");
+    background-image: url('/mixed/img/add-term-kana.svg');
 }
 button.action-button[data-icon=play-audio]::before {
-    background-image: url("/mixed/img/play-audio.svg");
+    background-image: url('/mixed/img/play-audio.svg');
 }
 button.action-button[data-icon=source-term]::before {
-    background-image: url("/mixed/img/source-term.svg");
+    background-image: url('/mixed/img/source-term.svg');
 }
 .entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio {
     display: none;
@@ -694,24 +694,24 @@ button.action-button[data-icon=source-term]::before {
     display: block;
 }
 .tag-frequency-separator::before {
-    content: ":";
+    content: ':';
 }
 .tag-frequency-disambiguation-separator::before {
-    content: ":";
+    content: ':';
 }
 .tag-frequency-disambiguation::before {
-    content: "(";
+    content: '(';
 }
 .tag-frequency-disambiguation::after {
-    content: ") ";
+    content: ') ';
 }
 .frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-separator,
 .frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-reading,
-.entry[data-unique-expression-count="1"] .tag-frequency-disambiguation-separator,
+.entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-separator,
-.entry[data-unique-expression-count="1"] .tag-frequency-disambiguation-expression,
+.entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-expression,
-.entry[data-unique-reading-count="1"] .tag-frequency-disambiguation-separator,
+.entry[data-unique-reading-count='1'] .tag-frequency-disambiguation-separator,
-.entry[data-unique-reading-count="1"] .tag-frequency-disambiguation-reading,
+.entry[data-unique-reading-count='1'] .tag-frequency-disambiguation-reading,
-.entry[data-unique-expression-count="1"][data-unique-reading-count="1"] .tag-frequency-disambiguation {
+.entry[data-unique-expression-count='1'][data-unique-reading-count='1'] .tag-frequency-disambiguation {
     display: none;
 }
 
@@ -762,7 +762,7 @@ button.action-button[data-icon=source-term]::before {
     display: none;
 }
 .term-reasons>.term-reason+.term-reason-separator+.term-reason::before {
-    content: " \00AB  "; /* The two spaces is not a typo */
+    content: ' \00AB  '; /* The two spaces is not a typo */
     white-space: pre-wrap;
     display: inline;
 }
@@ -782,7 +782,7 @@ button.action-button[data-icon=source-term]::before {
     display: none;
 }
 .term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
-    content: "\3001";
+    content: '\3001';
 }
 
 
@@ -823,8 +823,7 @@ button.action-button[data-icon=source-term]::before {
 }
 .entry.entry-current .entry-current-indicator-inner {
     height: var(--entry-current-indicator-width);
-    transition:
+    transition: height var(--entry-current-indicator-transition-duration) linear;
-        height var(--entry-current-indicator-transition-duration) linear;
 }
 :root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,
 :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
@@ -834,8 +833,7 @@ button.action-button[data-icon=source-term]::before {
 :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {
     display: block;
     position: sticky;
-    transition:
+    transition: height var(--entry-current-indicator-transition-duration) linear;
-        height var(--entry-current-indicator-transition-duration) linear;
 }
 :root[data-popup-current-indicator-mode=none] .entry-current-indicator,
 :root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,
@@ -906,14 +904,14 @@ button.action-button[data-icon=source-term]::before {
     display: none;
 }
 .entry-current-indicator-icon::before {
-    content: "";
+    content: '';
     width: var(--action-button-size);
     height: var(--action-button-size);
     display: block;
     background-color: transparent;
     background-repeat: no-repeat;
     background-size: contain;
-    background-image: url("/mixed/img/entry-current.svg");
+    background-image: url('/mixed/img/entry-current.svg');
 }
 
 
@@ -969,8 +967,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.term-definition-list[data-count="0"],
+.term-definition-list[data-count='0'],
-.term-definition-list[data-count="1"] {
+.term-definition-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -979,8 +977,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding2);
     list-style-type: circle;
 }
-.term-glossary-list[data-count="0"],
+.term-glossary-list[data-count='0'],
-.term-glossary-list[data-count="1"] {
+.term-glossary-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -991,17 +989,17 @@ button.action-button[data-icon=source-term]::before {
 .term-definition-disambiguation-list {
     color: var(--text-color-light);
 }
-.term-definition-disambiguation-list[data-count="0"] {
+.term-definition-disambiguation-list[data-count='0'] {
     display: none;
 }
 .term-definition-disambiguation-list::before {
-    content: "(";
+    content: '(';
 }
 .term-definition-disambiguation-list::after {
-    content: " only) ";
+    content: ' only) ';
 }
 .term-definition-disambiguation+.term-definition-disambiguation::before {
-    content: ", ";
+    content: ', ';
 }
 .term-glossary-separator,
 .term-reason-separator {
@@ -1013,8 +1011,8 @@ button.action-button[data-icon=source-term]::before {
 .term-special-tags>.frequencies {
     display: inline;
 }
-.term-entry-body[data-section-count="0"] .term-entry-body-section-header,
+.term-entry-body[data-section-count='0'] .term-entry-body-section-header,
-.term-entry-body[data-section-count="1"] .term-entry-body-section-header {
+.term-entry-body[data-section-count='1'] .term-entry-body-section-header {
     display: none;
 }
 
@@ -1033,8 +1031,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.term-pitch-accent-group-list[data-count="0"],
+.term-pitch-accent-group-list[data-count='0'],
-.term-pitch-accent-group-list[data-count="1"] {
+.term-pitch-accent-group-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -1044,8 +1042,8 @@ button.action-button[data-icon=source-term]::before {
     list-style-type: circle;
     display: block;
 }
-.term-pitch-accent-list[data-count="0"],
+.term-pitch-accent-list[data-count='0'],
-.term-pitch-accent-list[data-count="1"] {
+.term-pitch-accent-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
     display: inline;
@@ -1058,8 +1056,8 @@ button.action-button[data-icon=source-term]::before {
     display: list-item;
     line-height: 1.5;
 }
-.term-pitch-accent-list[data-count="0"] .term-pitch-accent,
+.term-pitch-accent-list[data-count='0'] .term-pitch-accent,
-.term-pitch-accent-list[data-count="1"] .term-pitch-accent {
+.term-pitch-accent-list[data-count='1'] .term-pitch-accent {
     display: inline;
 }
 .term-pitch-accent-group-tag-list {
@@ -1070,18 +1068,18 @@ button.action-button[data-icon=source-term]::before {
     color: var(--text-color-light);
 }
 .term-pitch-accent-disambiguation-list::before {
-    content: "(";
+    content: '(';
 }
 .term-pitch-accent-disambiguation-list::after {
-    content: " only)";
+    content: ' only)';
 }
 .term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before {
-    content: ", ";
+    content: ', ';
 }
-.term-pitch-accent-disambiguation-list[data-count="0"] {
+.term-pitch-accent-disambiguation-list[data-count='0'] {
     display: none;
 }
-.term-pitch-accent-tag-list:not([data-count="0"]) {
+.term-pitch-accent-tag-list:not([data-count='0']) {
     margin-right: 0.375em;
 }
 .term-pitch-accent-character {
@@ -1092,7 +1090,7 @@ button.action-button[data-icon=source-term]::before {
     border-color: var(--pitch-accent-annotation-color);
 }
 .term-pitch-accent-character[data-pitch='high']::before {
-    content: "";
+    content: '';
     display: block;
     user-select: none;
     pointer-events: none;
@@ -1115,10 +1113,10 @@ button.action-button[data-icon=source-term]::before {
     margin-right: 0.1em;
 }
 .term-pitch-accent-position::before {
-    content: " [";
+    content: ' [';
 }
 .term-pitch-accent-position::after {
-    content: "]";
+    content: ']';
 }
 .term-pitch-accent-details {
     display: inline-block;
@@ -1196,7 +1194,7 @@ button.action-button[data-icon=source-term]::before {
     color: var(--text-color-light);
 }
 .term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after {
-    content: "Image failed to load";
+    content: 'Image failed to load';
     display: table-cell;
     width: 100%;
     height: 100%;
@@ -1227,17 +1225,17 @@ button.action-button[data-icon=source-term]::before {
     image-rendering: crisp-edges;
 }
 .term-glossary-image-aspect-ratio-sizer {
-    content: "";
+    content: '';
     display: inline-block;
     width: 0;
     vertical-align: top;
     font-size: 0;
 }
 .term-glossary-image-link-text::before {
-    content: "[";
+    content: '[';
 }
 .term-glossary-image-link-text::after {
-    content: "]";
+    content: ']';
 }
 
 
@@ -1247,7 +1245,7 @@ button.action-button[data-icon=source-term]::before {
     position: relative;
 }
 .kanji-glyph {
-    font-family: kanji-stroke-orders;
+    font-family: kanji-stroke-orders, sans-serif;
     font-size: 8.5em;
     line-height: 1;
     padding: 0.01em;
@@ -1292,8 +1290,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.kanji-glossary-list[data-count="0"],
+.kanji-glossary-list[data-count='0'],
-.kanji-glossary-list[data-count="1"] {
+.kanji-glossary-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -1346,7 +1344,7 @@ button.action-button[data-icon=source-term]::before {
 }
 .progress-bar-indeterminant::before,
 .progress-bar-indeterminant::after {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     left: 0;
@@ -1567,7 +1565,7 @@ button.footer-notification-close-button:active {
     display: none;
 }
 :root[data-glossary-layout-mode=compact] .term-definition-tag-list,
-:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count="0"]) {
+:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count='0']) {
     display: inline;
 }
 :root[data-glossary-layout-mode=compact] .term-glossary-list {
@@ -1596,7 +1594,7 @@ button.footer-notification-close-button:active {
     padding-bottom: 0;
     margin-bottom: 0;
 }
-:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count="0"],
+:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'],
 :root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] {
     display: none;
 }

ext/mixed/css/material.css

@@ -145,6 +145,7 @@
 .icon {
     --icon-image: none;
     --icon-size: contain;
+
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: center center;
     -webkit-mask-mode: alpha;
@@ -174,14 +175,20 @@
 .icon[data-icon=hamburger-menu]          { --icon-image: url(/mixed/img/hamburger-menu.svg); }
 .icon[data-icon=kebab-menu]              { --icon-image: url(/mixed/img/kebab-menu.svg); }
 .icon[data-icon=mouse]                   { --icon-image: url(/mixed/img/mouse.svg); }
-.icon[data-icon=material-down-arrow]     { --icon-image: url(/mixed/img/material-down-arrow.svg);  --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); }
-.icon[data-icon=material-right-arrow]    { --icon-image: url(/mixed/img/material-right-arrow.svg); --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); }
 .icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); }
 .icon[data-icon=magnifying-glass]        { --icon-image: url(/mixed/img/magnifying-glass.svg); }
 .icon[data-icon=collapse]                { --icon-image: url(/mixed/img/collapse.svg); }
 .icon[data-icon=expand]                  { --icon-image: url(/mixed/img/expand.svg); }
 .icon[data-icon=window]                  { --icon-image: url(/mixed/img/window.svg); }
 .icon[data-icon=cross]                   { --icon-image: url(/mixed/img/cross.svg); }
+.icon[data-icon=material-down-arrow] {
+    --icon-image: url(/mixed/img/material-down-arrow.svg);
+    --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
+}
+.icon[data-icon=material-right-arrow] {
+    --icon-image: url(/mixed/img/material-right-arrow.svg);
+    --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2);
+}
 
 
 /* Checkbox */
@@ -210,7 +217,6 @@ label.checkbox {
     width: 1em;
     height: 1em;
     position: relative;
-    cursor: pointer;
 }
 .checkbox>input[type=checkbox]:disabled+.checkbox-body {
     cursor: default;
@@ -326,13 +332,14 @@ label.toggle {
     box-shadow:
         0 0.0625em 0.25em 0 var(--shadow-color),
         0 0.125em 0.125em 0 var(--shadow-color);
-    transition: transform var(--animation-duration) ease-in-out,
+    transition:
+        transform var(--animation-duration) ease-in-out,
         background-color var(--animation-duration) ease-in-out;
 }
 .toggle-body>.toggle-knob::after {
     position: absolute;
     display: block;
-    content: "";
+    content: '';
     left: -0.75em;
     top: -0.75em;
     right: -0.75em;
@@ -343,7 +350,8 @@ label.toggle {
     transform: scale(0);
     opacity: 0;
     visibility: hidden;
-    transition: transform 0s ease-in-out var(--animation-duration2),
+    transition:
+        transform 0s ease-in-out var(--animation-duration2),
         background-color var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility 0s ease-in-out var(--animation-duration2);
@@ -353,7 +361,8 @@ label.toggle {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
-    transition: transform var(--animation-duration2) ease-in-out,
+    transition:
+        transform var(--animation-duration2) ease-in-out,
         background-color var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility var(--animation-duration2) ease-in-out;
@@ -445,7 +454,8 @@ label.radio {
     -webkit-mask-image: url(/mixed/img/radio-button-dot.svg);
     opacity: 1;
     transform: none;
-    transition: transform var(--animation-duration2) ease-in-out,
+    transition:
+        transform var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility var(--animation-duration2) ease-in-out;
 }
@@ -456,14 +466,15 @@ label.radio {
 .radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot {
     opacity: 0;
     transform: scale(0);
-    transition: transform 0s ease-in-out var(--animation-duration2),
+    transition:
+        transform 0s ease-in-out var(--animation-duration2),
         opacity var(--animation-duration2) ease-in-out,
         visibility 0s ease-in-out var(--animation-duration2);
 }
 .radio-body::after {
     position: absolute;
     display: block;
-    content: "";
+    content: '';
     left: -0.75em;
     top: -0.75em;
     right: -0.75em;
@@ -474,7 +485,8 @@ label.radio {
     transform: scale(0);
     opacity: 0;
     visibility: hidden;
-    transition: transform 0s ease-in-out var(--animation-duration2),
+    transition:
+        transform 0s ease-in-out var(--animation-duration2),
         background-color var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility 0s ease-in-out var(--animation-duration2);
@@ -484,7 +496,8 @@ label.radio {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
-    transition: transform var(--animation-duration2) ease-in-out,
+    transition:
+        transform var(--animation-duration2) ease-in-out,
         background-color var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility var(--animation-duration2) ease-in-out;
@@ -804,7 +817,7 @@ button.icon-button:active {
 .icon-button>.icon-button-inner::after {
     position: absolute;
     display: block;
-    content: "";
+    content: '';
     left: 0;
     top: 0;
     right: 0;
@@ -815,7 +828,8 @@ button.icon-button:active {
     transform: scale(0);
     opacity: 0;
     visibility: hidden;
-    transition: transform 0s ease-in-out var(--animation-duration2),
+    transition:
+        transform 0s ease-in-out var(--animation-duration2),
         background-color var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility 0s ease-in-out var(--animation-duration2);
@@ -824,7 +838,8 @@ button.icon-button:active {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
-    transition: transform var(--animation-duration2) ease-in-out,
+    transition:
+        transform var(--animation-duration2) ease-in-out,
         background-color var(--animation-duration2) ease-in-out,
         opacity var(--animation-duration2) ease-in-out,
         visibility var(--animation-duration2) ease-in-out;

ext/mixed/css/search.css

@@ -41,8 +41,7 @@ body {
     background-color: var(--background-color);
     margin: 0;
     padding: 0;
-    margin: 0;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: var(--text-color);
     height: 100%;
     overflow: hidden;
@@ -72,7 +71,6 @@ h1 {
     flex: 1 1 auto;
     box-sizing: border-box;
     padding: var(--textarea-padding);
-    font-family: 'Courier New', Courier, monospace;
     background-color: var(--input-background-color);
     border-radius: 0;
     line-height: var(--textarea-line-height);
@@ -84,8 +82,7 @@ h1 {
     max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2);
     resize: vertical;
     font-size: var(--font-size);
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: var(--text-color);
     white-space: pre-wrap;
     z-index: 1;
 }

package.json

@@ -7,8 +7,9 @@
     },
     "scripts": {
         "build": "node ./dev/build.js",
-        "test": "npm run test-lint && npm run test-code && npm run test-manifest && npm run test-build",
+        "test": "npm run test-lint && npm run test-lint-css && npm run test-code && npm run test-manifest && npm run test-build",
         "test-lint": "eslint . && node ./dev/lint/global-declarations.js && node ./dev/lint/html-scripts.js",
+        "test-lint-css": "npx stylelint \"**/*.css\"",
         "test-lint-web-ext": "npx web-ext lint",
         "test-code": "node ./test/test-all.js ./test --skip ./test/test-manifest.js",
         "test-manifest": "node ./test/test-manifest.js",
@@ -40,6 +41,8 @@
         "fake-indexeddb": "^3.1.2",
         "jsdom": "^16.4.0",
         "parse5": "^6.0.1",
+        "stylelint": "^13.8.0",
+        "stylelint-config-recommended": "^3.0.0",
         "web-ext": "^5.4.1"
     }
 }

test/data/html/test-stylesheet.css

@@ -1,5 +1,5 @@
 body {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
     max-width: 680px;
     padding: 0 1em;
@@ -39,9 +39,9 @@ y-test {
     border-radius: 4px;
 }
 
-.test:before,
+.test::before,
-y-test:before {
+y-test::before {
-    content: "Test " counter(test-id);
+    content: 'Test ' counter(test-id);
     display: block;
     counter-increment: test-id;
     margin-bottom: 0.5em;