Fix sass-lint config (#10982)

.sass-lint.yml

@@ -4,261 +4,34 @@
 files:
   include: app/javascript/styles/**/*.scss
   ignore:
-    - app/javascript/styles/reset.scss
+    - app/javascript/styles/mastodon/reset.scss
 
-linters:
+rules:
-  # Reports when you use improper spacing around ! (the "bang") in !default,
+  # Disallows
-  # !global, !important, and !optional flags.
+  no-color-literals: 0
-  BangFormat:
+  no-css-comments: 0
-    enabled: false
+  no-duplicate-properties: 0
+  no-ids: 0
+  no-important: 0
+  no-mergeable-selectors: 0
+  no-misspelled-properties: 0
+  no-qualifying-elements: 0
+  no-transition-all: 0
+  no-vendor-prefixes: 0
 
-  # Whether or not to prefer `border: 0` over `border: none`.
+  # Nesting
-  BorderZero:
+  force-element-nesting: 0
-    enabled: false
+  force-attribute-nesting: 0
+  force-pseudo-nesting: 0
 
-  # Reports when you define a rule set using a selector with chained classes
+  # Name Formats
-  # (a.k.a. adjoining classes).
+  class-name-format: 0
-  ChainedClasses:
+  leading-zero: 0
-    enabled: false
 
-  # Prefer hexadecimal color codes over color keywords.
+  # Style Guide
-  # (e.g. `color: green` is a color keyword)
+  attribute-quotes: 0
-  ColorKeyword:
+  hex-length: 0
-    enabled: false
+  indentation: 0
-
+  nesting-depth: 0
-  # Prefer color literals (keywords or hexadecimal codes) to be used only in
+  property-sort-order: 0
-  # variable declarations. They should be referred to via variables everywhere
+  quotes: 0
-  # else.
-  ColorVariable:
-    enabled: true
-
-  # Which form of comments to prefer in CSS.
-  Comment:
-    enabled: false
-
-  # Reports @debug statements (which you probably left behind accidentally).
-  DebugStatement:
-    enabled: false
-
-  # Rule sets should be ordered as follows:
-  # - @extend declarations
-  # - @include declarations without inner @content
-  # - properties, @include declarations with inner @content
-  # - nested rule sets.
-  DeclarationOrder:
-    enabled: false
-
-  # `scss-lint:disable` control comments should be preceded by a comment
-  # explaining why these linters are being disabled for this file.
-  # See https://github.com/brigade/scss-lint#disabling-linters-via-source for
-  # more information.
-  DisableLinterReason:
-    enabled: true
-
-  # Reports when you define the same property twice in a single rule set.
-  DuplicateProperty:
-    enabled: false
-
-  # Separate rule, function, and mixin declarations with empty lines.
-  EmptyLineBetweenBlocks:
-    enabled: true
-
-  # Reports when you have an empty rule set.
-  EmptyRule:
-    enabled: true
-
-  # Reports when you have an @extend directive.
-  ExtendDirective:
-    enabled: false
-
-  # Files should always have a final newline. This results in better diffs
-  # when adding lines to the file, since SCM systems such as git won't
-  # think that you touched the last line.
-  FinalNewline:
-    enabled: false
-
-  # HEX colors should use three-character values where possible.
-  HexLength:
-    enabled: false
-
-  # HEX color values should use lower-case colors to differentiate between
-  # letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
-  HexNotation:
-    enabled: true
-
-  # Avoid using ID selectors.
-  IdSelector:
-    enabled: false
-
-  # The basenames of @imported SCSS partials should not begin with an
-  # underscore and should not include the filename extension.
-  ImportPath:
-    enabled: false
-
-  # Avoid using !important in properties. It is usually indicative of a
-  # misunderstanding of CSS specificity and can lead to brittle code.
-  ImportantRule:
-    enabled: false
-
-  # Indentation should always be done in increments of 2 spaces.
-  Indentation:
-    enabled: true
-    width: 2
-
-  # Don't write leading zeros for numeric values with a decimal point.
-  LeadingZero:
-    enabled: false
-
-  # Reports when you define the same selector twice in a single sheet.
-  MergeableSelector:
-    enabled: false
-
-  # Functions, mixins, variables, and placeholders should be declared
-  # with all lowercase letters and hyphens instead of underscores.
-  NameFormat:
-    enabled: false
-
-  # Avoid nesting selectors too deeply.
-  NestingDepth:
-    enabled: false
-
-  # Always use placeholder selectors in @extend.
-  PlaceholderInExtend:
-    enabled: false
-
-  # Sort properties in a strict order.
-  PropertySortOrder:
-    enabled: false
-
-  # Reports when you use an unknown or disabled CSS property
-  # (ignoring vendor-prefixed properties).
-  PropertySpelling:
-    enabled: false
-
-  # Configure which units are allowed for property values.
-  PropertyUnits:
-    enabled: false
-
-  # Pseudo-elements, like ::before, and ::first-letter, should be declared
-  # with two colons. Pseudo-classes, like :hover and :first-child, should
-  # be declared with one colon.
-  PseudoElement:
-    enabled: true
-
-  # Avoid qualifying elements in selectors (also known as "tag-qualifying").
-  QualifyingElement:
-    enabled: false
-
-  # Don't write selectors with a depth of applicability greater than 3.
-  SelectorDepth:
-    enabled: false
-
-  # Selectors should always use hyphenated-lowercase, rather than camelCase or
-  # snake_case.
-  SelectorFormat:
-    enabled: false
-    convention: hyphenated_lowercase
-
-  # Prefer the shortest shorthand form possible for properties that support it.
-  Shorthand:
-    enabled: true
-
-  # Each property should have its own line, except in the special case of
-  # single line rulesets.
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: true
-
-  # Split selectors onto separate lines after each comma, and have each
-  # individual selector occupy a single line.
-  SingleLinePerSelector:
-    enabled: true
-
-  # Commas in lists should be followed by a space.
-  SpaceAfterComma:
-    enabled: false
-
-  # Properties should be formatted with a single space separating the colon
-  # from the property's value.
-  SpaceAfterPropertyColon:
-    enabled: true
-
-  # Properties should be formatted with no space between the name and the
-  # colon.
-  SpaceAfterPropertyName:
-    enabled: true
-
-  # Variables should be formatted with a single space separating the colon
-  # from the variable's value.
-  SpaceAfterVariableColon:
-    enabled: true
-
-  # Variables should be formatted with no space between the name and the
-  # colon.
-  SpaceAfterVariableName:
-    enabled: false
-
-  # Operators should be formatted with a single space on both sides of an
-  # infix operator.
-  SpaceAroundOperator:
-    enabled: true
-
-  # Opening braces should be preceded by a single space.
-  SpaceBeforeBrace:
-    enabled: true
-
-  # Parentheses should not be padded with spaces.
-  SpaceBetweenParens:
-    enabled: false
-
-  # Enforces that string literals should be written with a consistent form
-  # of quotes (single or double).
-  StringQuotes:
-    enabled: false
-
-  # Property values, @extend, @include, and @import directives, and variable
-  # declarations should always end with a semicolon.
-  TrailingSemicolon:
-    enabled: true
-
-  # Reports lines containing trailing whitespace.
-  TrailingWhitespace:
-    enabled: true
-
-  # Don't write trailing zeros for numeric values with a decimal point.
-  TrailingZero:
-    enabled: false
-
-  # Don't use the `all` keyword to specify transition properties.
-  TransitionAll:
-    enabled: false
-
-  # Numeric values should not contain unnecessary fractional portions.
-  UnnecessaryMantissa:
-    enabled: false
-
-  # Do not use parent selector references (&) when they would otherwise
-  # be unnecessary.
-  UnnecessaryParentReference:
-    enabled: false
-
-  # URLs should be valid and not contain protocols or domain names.
-  UrlFormat:
-    enabled: true
-
-  # URLs should always be enclosed within quotes.
-  UrlQuotes:
-    enabled: true
-
-  # Properties, like color and font, are easier to read and maintain
-  # when defined using variables rather than literals.
-  VariableForProperty:
-    enabled: false
-
-  # Avoid vendor prefixes. Or rather: don't write them yourself.
-  VendorPrefix:
-    enabled: false
-
-  # Omit length units on zero values, e.g. `0px` vs. `0`.
-  ZeroUnit:
-    enabled: true

app/javascript/styles/contrast/diff.scss

@@ -5,7 +5,7 @@
       &-description {
         input {
           &::placeholder {
-            opacity: 1.0;
+            opacity: 1;
           }
         }
       }

app/javascript/styles/contrast/variables.scss

@@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default;
 $action-button-color: #8d9ac2;
 
 $inverted-text-color: $black !default;
-$lighter-text-color: darken($ui-base-color,6%) !default;
+$lighter-text-color: darken($ui-base-color, 6%) !default;
 $light-text-color: darken($ui-primary-color, 40%) !default;

app/javascript/styles/mailer.scss

@@ -279,6 +279,8 @@ h5 {
 }
 
 .hero-with-button {
+  padding-bottom: 16px;
+
   h1 {
     margin-bottom: 4px;
   }
@@ -286,8 +288,6 @@ h5 {
   p.lead {
     margin-bottom: 32px;
   }
-
-  padding-bottom: 16px;
 }
 
 .header {

app/javascript/styles/mastodon/_mixins.scss

@@ -1,21 +1,21 @@
-@mixin avatar-radius() {
+@mixin avatar-radius {
   border-radius: 4px;
   background: transparent no-repeat;
   background-position: 50%;
   background-clip: padding-box;
 }
 
-@mixin avatar-size($size:48px) {
+@mixin avatar-size($size: 48px) {
   width: $size;
   height: $size;
   background-size: $size $size;
 }
 
-@mixin search-input() {
+@mixin search-input {
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  border: none;
+  border: 0;
   box-shadow: none;
   font-family: inherit;
   background: $ui-base-color;
@@ -42,7 +42,7 @@
   }
 }
 
-@mixin search-popout() {
+@mixin search-popout {
   background: $simple-background-color;
   border-radius: 4px;
   padding: 10px 14px;

app/javascript/styles/mastodon/admin.scss

@@ -171,7 +171,7 @@ $content-width: 840px;
       text-transform: none;
       padding-bottom: 0;
       margin-bottom: 0;
-      border-bottom: none;
+      border-bottom: 0;
     }
 
     & > p {

app/javascript/styles/mastodon/basics.scss

@@ -2,7 +2,8 @@
   @if type-of($color) == 'color' {
     $color: str-slice(ie-hex-str($color), 4);
   }
-  @return '%23' + unquote($color)
+
+  @return '%23' + unquote($color);
 }
 
 body {
@@ -15,7 +16,7 @@ body {
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
   text-size-adjust: none;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 
   &.system-font {

app/javascript/styles/mastodon/components.scss

@@ -128,7 +128,7 @@
   display: inline-block;
   padding: 0;
   color: $action-button-color;
-  border: none;
+  border: 0;
   background: transparent;
   cursor: pointer;
   transition: color 100ms ease-in;
@@ -196,7 +196,7 @@
 
 .text-icon-button {
   color: $lighter-text-color;
-  border: none;
+  border: 0;
   background: transparent;
   cursor: pointer;
   font-weight: 600;
@@ -353,12 +353,12 @@
   .spoiler-input {
     height: 0;
     transform-origin: bottom;
-    opacity: 0.0;
+    opacity: 0;
 
     &.spoiler-input--visible {
       height: 36px;
       margin-bottom: 11px;
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 
@@ -1193,7 +1193,7 @@
 }
 
 .account__avatar {
-  @include avatar-radius();
+  @include avatar-radius;
   position: relative;
 
   &-inline {
@@ -1203,11 +1203,11 @@
   }
 
   &-composite {
-    @include avatar-radius();
+    @include avatar-radius;
     overflow: hidden;
 
     & > div {
-      @include avatar-radius();
+      @include avatar-radius;
       float: left;
       position: relative;
       box-sizing: border-box;
@@ -1223,12 +1223,12 @@ a .account__avatar {
   @include avatar-size(48px);
 
   &-base {
-    @include avatar-radius();
+    @include avatar-radius;
     @include avatar-size(36px);
   }
 
   &-overlay {
-    @include avatar-radius();
+    @include avatar-radius;
     @include avatar-size(24px);
 
     position: absolute;
@@ -1606,13 +1606,13 @@ a.account__display-name {
     .icon-button.close {
       position: absolute;
       pointer-events: none;
-      transform: scale(0.0, 1.0) translate(-100%, 0);
+      transform: scale(0, 1) translate(-100%, 0);
       opacity: 0;
     }
 
     .compose__action-bar .icon-button {
       pointer-events: auto;
-      transform: scale(1.0, 1.0) translate(0, 0);
+      transform: scale(1, 1) translate(0, 0);
       opacity: 1;
     }
   }
@@ -2711,7 +2711,7 @@ a.account__display-name {
 .setting-text {
   color: $darker-text-color;
   background: transparent;
-  border: none;
+  border: 0;
   border-bottom: 2px solid $ui-primary-color;
   box-sizing: border-box;
   display: block;
@@ -3049,7 +3049,7 @@ a.status-card.compact:hover {
 
   & > button {
     margin: 0;
-    border: none;
+    border: 0;
     padding: 15px 0 15px 15px;
     color: inherit;
     background: transparent;
@@ -3214,11 +3214,11 @@ a.status-card.compact:hover {
 }
 
 .no-reduce-motion .loading-indicator span {
-  animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .no-reduce-motion .loading-indicator__figure {
-  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 @keyframes loader-figure {
@@ -3385,7 +3385,7 @@ a.status-card.compact:hover {
 
   .column-select {
     &__control {
-      @include search-input();
+      @include search-input;
     }
 
     &__placeholder {
@@ -3436,7 +3436,7 @@ a.status-card.compact:hover {
     }
 
     &__menu {
-      @include search-popout();
+      @include search-popout;
       padding: 0;
       background: $ui-secondary-color;
     }
@@ -3597,7 +3597,7 @@ a.status-card.compact:hover {
 
 .no-reduce-motion .shake-bottom {
   transform-origin: 50% 100%;
-  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
+  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
 }
 
 .emoji-picker-dropdown__menu {
@@ -3892,10 +3892,11 @@ a.status-card.compact:hover {
 }
 
 .search__input {
+  @include search-input;
+
   display: block;
   padding: 10px;
   padding-right: 30px;
-  @include search-input();
 }
 
 .search__icon {
@@ -4503,14 +4504,14 @@ a.status-card.compact:hover {
 }
 
 .actions-modal {
+  max-height: 80vh;
+  max-width: 80vw;
+
   .status {
     overflow-y: auto;
     max-height: 300px;
   }
 
-  max-height: 80vh;
-  max-width: 80vw;
-
   .actions-modal__item-label {
     font-weight: 500;
   }
@@ -4725,7 +4726,7 @@ a.status-card.compact:hover {
 }
 
 .media-gallery__item {
-  border: none;
+  border: 0;
   box-sizing: border-box;
   display: block;
   float: left;
@@ -5185,7 +5186,7 @@ a.status-card.compact:hover {
 }
 
 .account-gallery__item {
-  border: none;
+  border: 0;
   box-sizing: border-box;
   display: block;
   position: relative;
@@ -5259,7 +5260,7 @@ a.status-card.compact:hover {
 }
 
 .search-popout {
-  @include search-popout();
+  @include search-popout;
 }
 
 noscript {
@@ -5361,14 +5362,14 @@ noscript {
         .icon-button.close {
           pointer-events: auto;
           opacity: 1;
-          transform: scale(1.0, 1.0) translate(0, 0);
+          transform: scale(1, 1) translate(0, 0);
           bottom: 5px;
         }
 
         .compose__action-bar .icon-button {
           pointer-events: none;
           opacity: 0;
-          transform: scale(0.0, 1.0) translate(100%, 0);
+          transform: scale(0, 1) translate(100%, 0);
         }
       }
     }
@@ -5398,7 +5399,7 @@ noscript {
       box-sizing: border-box;
       display: block;
       width: 100%;
-      border: none;
+      border: 0;
       padding: 10px;
       font-family: $font-monospace, monospace;
       background: $ui-base-color;

app/javascript/styles/mastodon/containers.scss

@@ -121,7 +121,7 @@
   grid-auto-rows: max-content;
 
   .column-0 {
-    grid-column: 1/3;
+    grid-column: 1 / 3;
     grid-row: 1;
   }
 
@@ -136,7 +136,7 @@
   }
 
   .column-3 {
-    grid-column: 1/3;
+    grid-column: 1 / 3;
     grid-row: 3;
   }
 

app/javascript/styles/mastodon/emoji_picker.scss

@@ -1,14 +1,14 @@
 .emoji-mart {
+  font-size: 13px;
+  display: inline-block;
+  color: $inverted-text-color;
+
   &,
   * {
     box-sizing: border-box;
     line-height: 1.15;
   }
 
-  font-size: 13px;
-  display: inline-block;
-  color: $inverted-text-color;
-
   .emoji-mart-emoji {
     padding: 6px;
   }

app/javascript/styles/mastodon/forms.scss

@@ -553,7 +553,7 @@ code {
     box-sizing: border-box;
     display: block;
     width: 100%;
-    border: none;
+    border: 0;
     padding: 10px;
     font-family: $font-monospace, monospace;
     background: $ui-base-color;

app/javascript/styles/mastodon/polls.scss

@@ -47,7 +47,6 @@
       width: 100%;
       font-size: 14px;
       color: $inverted-text-color;
-      display: block;
       outline: 0;
       font-family: inherit;
       background: $simple-background-color;

app/javascript/styles/mastodon/rtl.scss

@@ -180,7 +180,6 @@ body.rtl {
   }
 
   .fa-ul {
-    margin-left: 0;
     margin-left: 2.14285714em;
   }
 

package.json

@@ -10,9 +10,10 @@
     "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack",
     "manage:translations": "node ./config/webpack/translationRunner.js",
     "start": "node ./streaming/index.js",
-    "test": "${npm_execpath} run test:lint && ${npm_execpath} run test:jest",
+    "test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest",
-    "test:lint": "eslint --ext=js .",
+    "test:lint": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:lint:sass",
-    "test:lint:sass": "sass-lint .",
+    "test:lint:js": "eslint --ext=js .",
+    "test:lint:sass": "sass-lint -v",
     "test:jest": "cross-env NODE_ENV=test jest --coverage"
   },
   "repository": {