Fix SCSS linting issues (#2207)

* Disable font-family-no-missing-generic-family-keyword for font-awesome accessibility icons

* Run stylelint --fix

* Avoid `@extend` directives with doodle modal CSS

* Drop use of `@extend` for notification cleanup buttons SCSS

* Run prettier on SCSS

app/javascript/flavours/glitch/components/notification_purge_buttons.jsx

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'flavours/glitch/components/icon';
+import classNames from 'classnames';
 
 const messages = defineMessages({
   btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
@@ -36,19 +37,19 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
     //className='active'
     return (
       <div className='column-header__notif-cleaning-buttons'>
-        <button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}>
+        <button onClick={this.props.onMarkAll} className={classNames('column-header__button', { active: markNewForDelete })}>
           <b>∀</b><br />{intl.formatMessage(messages.btnAll)}
         </button>
 
-        <button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}>
+        <button onClick={this.props.onMarkNone} className={classNames('column-header__button', { active: !markNewForDelete })}>
           <b>∅</b><br />{intl.formatMessage(messages.btnNone)}
         </button>
 
-        <button onClick={this.props.onInvert}>
+        <button onClick={this.props.onInvert} className='column-header__button'>
           <b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
         </button>
 
-        <button onClick={this.props.onDeleteMarked}>
+        <button onClick={this.props.onDeleteMarked} className='column-header__button'>
           <Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
         </button>
       </div>

app/javascript/flavours/glitch/styles/accessibility.scss

@@ -24,9 +24,11 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
     position: absolute;
     content: '\F00C';
     font-size: 50%;
-    font-family: FontAwesome;
     inset-inline-end: -0.55em;
     top: -0.44em;
+
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- this is an icon font, this can't use a generic font */
+    font-family: FontAwesome;
   }
 }
 

app/javascript/flavours/glitch/styles/accounts.scss

@@ -33,7 +33,7 @@
       border-radius: 4px 4px 0 0;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       height: 200px;
     }
   }
@@ -162,7 +162,7 @@
     color: lighten($inverted-text-color, 10%);
   }
 
-  @media screen and (max-width: 700px) {
+  @media screen and (width <= 700px) {
     padding: 30px 20px;
 
     .page {

app/javascript/flavours/glitch/styles/admin.scss

@@ -1377,7 +1377,7 @@ a.sparkline {
     }
   }
 
-  @media screen and (max-width: 930px) {
+  @media screen and (width <= 930px) {
     grid-template-columns: minmax(0, 1fr);
   }
 }
@@ -1663,7 +1663,7 @@ a.sparkline {
     }
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (width <= 800px) {
     border: 0;
 
     &__item {

app/javascript/flavours/glitch/styles/components/about.scss

@@ -136,7 +136,7 @@
       margin-bottom: 20px;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       display: block;
 
       h4 {

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -281,7 +281,7 @@
 
 .notification__message {
   margin-inline-start: 42px;
-  padding-top:8px;
+  padding-top: 8px;
   padding-inline-start: 26px;
   cursor: default;
   color: $darker-text-color;

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -79,7 +79,7 @@ $ui-header-height: 55px;
       display: none;
     }
 
-    @media screen and (min-width: 320px) {
+    @media screen and (width >= 320px) {
       .logo--wordmark {
         display: block;
       }
@@ -205,7 +205,7 @@ $ui-header-height: 55px;
 
   &:last-child {
     padding: 0;
-    padding-inline-end: 15px;;
+    padding-inline-end: 15px;
   }
 }
 
@@ -441,9 +441,7 @@ $ui-header-height: 55px;
   align-items: stretch;
   justify-content: space-around;
 
-  button {
-    @extend .column-header__button;
-
+  .column-header__button {
     background: transparent;
     text-align: center;
     padding: 10px 5px;
@@ -809,7 +807,7 @@ $ui-header-height: 55px;
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         font-size: 16px;
       }
     }

app/javascript/flavours/glitch/styles/components/doodle.scss

@@ -1,8 +1,6 @@
 $doodle-background: #d9e1e8;
 
 .doodle-modal {
-  @extend .boost-modal;
-
   width: unset;
 }
 
@@ -16,8 +14,6 @@ $doodle-background: #d9e1e8;
 }
 
 .doodle-modal__action-bar {
-  @extend .boost-modal__action-bar;
-
   .filler {
     flex-grow: 1;
     margin: 0;

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -229,7 +229,7 @@
     cursor: inherit;
   }
 
-  @media screen and (min-height: 640px) {
+  @media screen and (height >= 640px) {
     display: block;
   }
 }

app/javascript/flavours/glitch/styles/components/lists.scss

@@ -6,7 +6,7 @@
   width: 380px;
   overflow: hidden;
 
-  @media screen and (max-width: 420px) {
+  @media screen and (width <= 420px) {
     width: 90%;
   }
 
@@ -60,7 +60,7 @@
   width: 380px;
   overflow: hidden;
 
-  @media screen and (max-width: 420px) {
+  @media screen and (width <= 420px) {
     width: 90%;
   }
 

app/javascript/flavours/glitch/styles/components/local_settings.scss

@@ -125,7 +125,7 @@
   margin-bottom: 10px;
 }
 
-@media screen and (max-width: 630px) {
+@media screen and (width <= 630px) {
   .glitch.local-settings__navigation {
     width: 40px;
     flex-shrink: 0;

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -827,7 +827,7 @@ body > [data-popper-placement] {
   overflow: hidden;
 }
 
-@media screen and (min-width: 631px) {
+@media screen and (width >= 631px) {
   .columns-area {
     padding: 0;
   }
@@ -1134,19 +1134,19 @@ body > [data-popper-placement] {
       }
     }
 
-    @media screen and (max-height: 810px) {
+    @media screen and (height <= 810px) {
       .trends__item:nth-of-type(3) {
         display: none;
       }
     }
 
-    @media screen and (max-height: 720px) {
+    @media screen and (height <= 720px) {
       .trends__item:nth-of-type(2) {
         display: none;
       }
     }
 
-    @media screen and (max-height: 670px) {
+    @media screen and (height <= 670px) {
       display: none;
     }
 

app/javascript/flavours/glitch/styles/components/modal.scss

@@ -115,7 +115,7 @@
   text-align: center;
 }
 
-@media screen and (max-width: 550px) {
+@media screen and (width <= 550px) {
   .onboarding-modal {
     width: 100%;
     height: 100%;
@@ -382,7 +382,7 @@
   }
 }
 
-@media screen and (max-width: 320px) and (max-height: 600px) {
+@media screen and (width <= 320px) and (height <= 600px) {
   .onboarding-modal__page p {
     font-size: 14px;
     line-height: 20px;
@@ -413,6 +413,7 @@
   margin-inline-start: 10px;
 }
 
+.doodle-modal,
 .boost-modal,
 .confirmation-modal,
 .report-modal,
@@ -485,6 +486,7 @@
   }
 }
 
+.doodle-modal__action-bar,
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -560,7 +562,7 @@
     font-weight: 700;
     margin-bottom: 15px;
 
-    @media screen and (max-height: 800px) {
+    @media screen and (height <= 800px) {
       font-size: 22px;
     }
   }
@@ -747,7 +749,7 @@
   display: flex;
   border-top: 1px solid $ui-secondary-color;
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     flex-wrap: wrap;
     overflow-y: auto;
   }
@@ -758,7 +760,7 @@
   box-sizing: border-box;
   width: 50%;
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     width: 100%;
   }
 }
@@ -775,13 +777,13 @@
     color: $highlight-text-color;
   }
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     max-height: 10vh;
   }
 }
 
 .focal-point-modal__content {
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     max-height: 40vh;
   }
 }
@@ -877,7 +879,7 @@
     }
   }
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     padding: 10px;
     max-width: 100%;
     order: 2;
@@ -1152,7 +1154,7 @@
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         font-size: 16px;
       }
     }
@@ -1233,7 +1235,7 @@
     }
   }
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     img,
     video {
       max-height: 100%;

app/javascript/flavours/glitch/styles/components/single_column.scss

@@ -94,7 +94,7 @@
   }
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
   .tabs-bar__link {
     span {
       display: inline;

app/javascript/flavours/glitch/styles/containers.scss

@@ -2,7 +2,7 @@
   width: 700px;
   margin: 0 auto;
 
-  @media screen and (max-width: 740px) {
+  @media screen and (width <= 740px) {
     width: 100%;
     margin: 0;
   }
@@ -44,7 +44,7 @@
     margin-top: 40px;
     box-sizing: border-box;
 
-    @media screen and (max-width: 400px) {
+    @media screen and (width <= 400px) {
       width: 100%;
       margin-top: 0;
       padding: 20px;
@@ -64,7 +64,7 @@
   margin-bottom: 10px;
   border-bottom: 1px solid $ui-base-color;
 
-  @media screen and (max-width: 440px) {
+  @media screen and (width <= 440px) {
     width: 100%;
     margin: 0;
     padding: 20px;

app/javascript/flavours/glitch/styles/dashboard.scss

@@ -59,7 +59,7 @@
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
   grid-gap: 10px;
 
-  @media screen and (max-width: 1350px) {
+  @media screen and (width <= 1350px) {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
 

app/javascript/flavours/glitch/styles/forms.scss

@@ -723,7 +723,7 @@ code {
     }
   }
 
-  @media screen and (max-width: 740px) and (min-width: 441px) {
+  @media screen and (width <= 740px) and (width >= 441px) {
     margin-top: 40px;
   }
 

app/javascript/flavours/glitch/styles/modal.scss

@@ -30,7 +30,7 @@
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (width <= 600px) {
   .account-header {
     margin-top: 0;
   }

app/javascript/flavours/glitch/styles/statuses.scss

@@ -59,7 +59,7 @@
       }
     }
 
-    @media screen and (max-width: 740px) {
+    @media screen and (width <= 740px) {
       .detailed-status,
       .status,
       .load-more {

app/javascript/flavours/glitch/styles/tables.scss

@@ -357,7 +357,7 @@ a.table-action-link {
     }
   }
 
-  @media screen and (max-width: 870px) {
+  @media screen and (width <= 870px) {
     .accounts-table tbody td.optional {
       display: none;
     }

app/javascript/styles/fonts/roboto-mono.scss

@@ -3,8 +3,7 @@
   src: local('Roboto Mono'),
     url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
     url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
-    url('~fonts/roboto-mono/robotomono-regular-webfont.ttf')
-      format('truetype'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
     url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
       format('svg');
   font-weight: 400;

app/javascript/styles/mailer.scss

@@ -547,7 +547,7 @@ ul.rules-list {
   }
 }
 
-@media (max-width: 697px) {
+@media (width <= 697px) {
   .email-container,
   .col-1,
   .col-2,

app/javascript/styles/mastodon/accounts.scss

@@ -33,7 +33,7 @@
       border-radius: 4px 4px 0 0;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       height: 200px;
     }
   }
@@ -158,7 +158,7 @@
     color: lighten($inverted-text-color, 10%);
   }
 
-  @media screen and (max-width: 700px) {
+  @media screen and (width <= 700px) {
     padding: 30px 20px;
 
     .page {

app/javascript/styles/mastodon/admin.scss

@@ -1371,7 +1371,7 @@ a.sparkline {
     }
   }
 
-  @media screen and (max-width: 930px) {
+  @media screen and (width <= 930px) {
     grid-template-columns: minmax(0, 1fr);
   }
 }
@@ -1657,7 +1657,7 @@ a.sparkline {
     }
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (width <= 800px) {
     border: 0;
 
     &__item {

app/javascript/styles/mastodon/components.scss

@@ -514,7 +514,7 @@ body > [data-popper-placement] {
       outline: 0;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       font-size: 16px;
     }
   }
@@ -535,7 +535,7 @@ body > [data-popper-placement] {
       all: unset;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       height: 100px !important; // Prevent auto-resize textarea
       resize: vertical;
     }
@@ -2413,7 +2413,7 @@ $ui-header-height: 55px;
       display: none;
     }
 
-    @media screen and (min-width: 320px) {
+    @media screen and (width >= 320px) {
       .logo--wordmark {
         display: block;
       }
@@ -2525,7 +2525,7 @@ $ui-header-height: 55px;
   overflow: hidden;
 }
 
-@media screen and (min-width: 631px) {
+@media screen and (width >= 631px) {
   .columns-area {
     padding: 0;
   }
@@ -2585,7 +2585,7 @@ $ui-header-height: 55px;
   &:hover,
   &:focus,
   &:active {
-    @media screen and (min-width: 631px) {
+    @media screen and (width >= 631px) {
       background: lighten($ui-base-color, 14%);
       border-bottom-color: lighten($ui-base-color, 14%);
     }
@@ -2602,7 +2602,7 @@ $ui-header-height: 55px;
   }
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -2825,7 +2825,7 @@ $ui-header-height: 55px;
     color: $darker-text-color;
   }
 
-  @media screen and (min-width: 600px) {
+  @media screen and (width >= 600px) {
     padding: 40px;
   }
 }
@@ -2935,7 +2935,7 @@ $ui-header-height: 55px;
       height: 36px;
       color: $dark-text-color;
 
-      @media screen and (min-width: 600px) {
+      @media screen and (width >= 600px) {
         display: flex;
       }
     }
@@ -2987,7 +2987,7 @@ $ui-header-height: 55px;
   position: sticky;
   background: $ui-base-color;
 
-  @media screen and (min-width: 600) {
+  @media screen and (width >= 600) {
     padding: 0 40px;
   }
 
@@ -3255,7 +3255,7 @@ $ui-header-height: 55px;
     user-select: none;
   }
 
-  @media screen and (min-height: 640px) {
+  @media screen and (height >= 640px) {
     display: block;
   }
 }
@@ -3604,19 +3604,19 @@ $ui-header-height: 55px;
       }
     }
 
-    @media screen and (max-height: 810px) {
+    @media screen and (height <= 810px) {
       .trends__item:nth-of-type(3) {
         display: none;
       }
     }
 
-    @media screen and (max-height: 720px) {
+    @media screen and (height <= 720px) {
       .trends__item:nth-of-type(2) {
         display: none;
       }
     }
 
-    @media screen and (max-height: 670px) {
+    @media screen and (height <= 670px) {
       display: none;
     }
 
@@ -3700,7 +3700,7 @@ $ui-header-height: 55px;
     margin-bottom: 20px;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (width <= 600px) {
     font-size: 16px;
   }
 }
@@ -4496,7 +4496,7 @@ a.status-card.compact:hover {
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         font-size: 16px;
       }
     }
@@ -5831,7 +5831,7 @@ a.status-card.compact:hover {
     font-weight: 700;
     margin-bottom: 15px;
 
-    @media screen and (max-height: 800px) {
+    @media screen and (height <= 800px) {
       font-size: 22px;
     }
   }
@@ -6018,7 +6018,7 @@ a.status-card.compact:hover {
   display: flex;
   border-top: 1px solid $ui-secondary-color;
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     flex-wrap: wrap;
     overflow-y: auto;
   }
@@ -6029,7 +6029,7 @@ a.status-card.compact:hover {
   box-sizing: border-box;
   width: 50%;
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     width: 100%;
   }
 }
@@ -6051,13 +6051,13 @@ a.status-card.compact:hover {
     color: $inverted-text-color;
   }
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     max-height: 10vh;
   }
 }
 
 .focal-point-modal__content {
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     max-height: 40vh;
   }
 }
@@ -6108,7 +6108,7 @@ a.status-card.compact:hover {
     }
   }
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     padding: 10px;
     max-width: 100%;
     order: 2;
@@ -7136,7 +7136,7 @@ noscript {
   }
 }
 
-@media screen and (max-width: 630px) and (max-height: 400px) {
+@media screen and (width <= 630px) and (height <= 400px) {
   $duration: 400ms;
   $delay: 100ms;
 
@@ -7266,7 +7266,7 @@ noscript {
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         font-size: 16px;
       }
     }
@@ -7357,7 +7357,7 @@ noscript {
   width: 380px;
   overflow: hidden;
 
-  @media screen and (max-width: 420px) {
+  @media screen and (width <= 420px) {
     width: 90%;
   }
 
@@ -7412,7 +7412,7 @@ noscript {
   width: 380px;
   overflow: hidden;
 
-  @media screen and (max-width: 420px) {
+  @media screen and (width <= 420px) {
     width: 90%;
   }
 
@@ -7511,7 +7511,7 @@ noscript {
     }
   }
 
-  @media screen and (max-width: 480px) {
+  @media screen and (width <= 480px) {
     img,
     video {
       max-height: 100%;
@@ -9068,7 +9068,7 @@ noscript {
       margin-bottom: 20px;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       display: block;
 
       h4 {

app/javascript/styles/mastodon/containers.scss

@@ -2,7 +2,7 @@
   width: 700px;
   margin: 0 auto;
 
-  @media screen and (max-width: 740px) {
+  @media screen and (width <= 740px) {
     width: 100%;
     margin: 0;
   }
@@ -44,7 +44,7 @@
     margin-top: 40px;
     box-sizing: border-box;
 
-    @media screen and (max-width: 400px) {
+    @media screen and (width <= 400px) {
       width: 100%;
       margin-top: 0;
       padding: 20px;
@@ -64,7 +64,7 @@
   margin-bottom: 10px;
   border-bottom: 1px solid $ui-base-color;
 
-  @media screen and (max-width: 440px) {
+  @media screen and (width <= 440px) {
     width: 100%;
     margin: 0;
     padding: 20px;

app/javascript/styles/mastodon/dashboard.scss

@@ -59,7 +59,7 @@
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
   grid-gap: 10px;
 
-  @media screen and (max-width: 1350px) {
+  @media screen and (width <= 1350px) {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
 

app/javascript/styles/mastodon/forms.scss

@@ -722,7 +722,7 @@ code {
     }
   }
 
-  @media screen and (max-width: 740px) and (min-width: 441px) {
+  @media screen and (width <= 740px) and (width >= 441px) {
     margin-top: 40px;
   }
 

app/javascript/styles/mastodon/modal.scss

@@ -30,7 +30,7 @@
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (width <= 600px) {
   .account-header {
     margin-top: 0;
   }

app/javascript/styles/mastodon/statuses.scss

@@ -63,7 +63,7 @@
       }
     }
 
-    @media screen and (max-width: 740px) {
+    @media screen and (width <= 740px) {
       .detailed-status,
       .status,
       .load-more {

app/javascript/styles/mastodon/tables.scss

@@ -361,7 +361,7 @@ a.table-action-link {
     }
   }
 
-  @media screen and (max-width: 870px) {
+  @media screen and (width <= 870px) {
     .accounts-table tbody td.optional {
       display: none;
     }