Change Sass linting configuration to take advantage of stylelint capa…

…bilities

.stylelintrc.yaml

@@ -2,6 +2,7 @@ ignoreFiles:
   - node_modules
 plugins:
   - stylelint-scss
+# See https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md
 rules:
   block-closing-brace-newline-after:
     - always
@@ -15,6 +16,7 @@ rules:
   color-hex-length: short
   color-named: never
   color-no-invalid-hex: true
+  comment-no-empty: true
   declaration-bang-space-after: never
   declaration-bang-space-before: always
   declaration-block-no-duplicate-properties: true
@@ -26,17 +28,27 @@ rules:
   declaration-property-value-blacklist:
     - /^border/: [none]
     - severity: error
+  declaration-no-important: true
+  font-family-no-duplicate-names: true
+  function-calc-no-unspaced-operator: true
   function-comma-space-after: always
+  function-linear-gradient-no-nonstandard-direction: true
   function-parentheses-space-inside: never
   function-url-quotes: always
   indentation:
     - 4
     - severity: warning
   length-zero-no-unit: true
-  max-nesting-depth: 5
+  max-nesting-depth: 3
+  media-feature-name-no-unknown: true
+  no-empty-source: true
   no-eol-whitespace: true
+  no-extra-semicolons: true
   no-missing-end-of-source-newline: true
   number-no-trailing-zeros: true
+  number-leading-zero: always
+  property-case: lower
+  property-no-unknown: true
   rule-empty-line-before:
     - always
     - except:
@@ -53,4 +65,14 @@ rules:
       - class
   selector-list-comma-newline-after: always
   selector-max-id: 0
+  selector-pseudo-element-no-unknown: true
+  selector-type-no-unknown: true
+  scss/at-rule-no-unknown: true
+  scss/media-feature-value-dollar-variable: always
+  scss/selector-no-redundant-nesting-selector: true
+  string-no-newline: true
   string-quotes: single
+  unit-no-unknown: true
+  unit-case: lower
+  value-no-vendor-prefix: true
+  property-no-vendor-prefix: true

client/scss/_objects.scss

@@ -1,7 +1,7 @@
 .o-pill {
     display: inline-block;
-    padding: .2em .5em;
-    border-radius: .25em;
+    padding: 0.2em 0.5em;
+    border-radius: 0.25em;
     vertical-align: middle;
     line-height: 1.5;
 }

client/scss/_utilities.scss

@@ -1,3 +1,4 @@
+// stylelint-disable declaration-no-important
 .u-hidden {
     display: none !important;
 }

client/src/components/Explorer/Explorer.scss

@@ -102,14 +102,14 @@ $menu-footer-height: 50px;
 }
 
 .c-explorer__header__inner {
-    padding: 1em .75em;
+    padding: 1em 0.75em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
     .icon {
         color: $c-explorer-secondary;
-        margin-right: .25rem;
+        margin-right: 0.25rem;
         font-size: 1rem;
     }
 

client/src/components/Explorer/ExplorerItem.scss

@@ -49,7 +49,7 @@
     justify-content: center;
     flex-shrink: 0;
     width: 50px;
-    padding: 0 .5em;
+    padding: 0 0.5em;
     line-height: 1;
     font-size: 2em;
     cursor: pointer;

client/src/components/PublicationStatus/PublicationStatus.scss

@@ -1,6 +1,6 @@
 .c-status {
     background: $color-grey-1;
     text-transform: uppercase;
-    letter-spacing: .03rem;
+    letter-spacing: 0.03rem;
     font-size: 10px;
 }

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -87,8 +87,8 @@
         outline: none;
         box-sizing: border-box;
         -webkit-font-smoothing: auto;
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-appearance: none;
-        -moz-box-sizing: border-box;
 
         &:hover {
             background-color: #358c8b;
@@ -98,7 +98,9 @@
     }
 
     li.selected a {
+        // stylelint-disable-next-line declaration-no-important
         color: #fff !important;
+        // stylelint-disable-next-line declaration-no-important
         border-color: #43b1b0 !important;
         background-color: #43b1b0;
     }
@@ -137,7 +139,7 @@ p.no-results {
 }
 
 
-@media screen and (min-width: 50em) {
+@media screen and (min-width: $breakpoint-mobile) {
     .changelist-filter {
         float: right;
         padding: 0 1.5%;
@@ -174,7 +176,7 @@ p.no-results {
 }
 
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: $breakpoint-desktop-large) {
     .result-list.col9 {
         width: 79%;
     }

wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss

@@ -100,8 +100,6 @@ section {
     }
 
     ul {
-        -webkit-column-count: 3; // Chrome, Safari, Opera
-        -moz-column-count: 3; // Firefox
         column-count: 3;
     }
 

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_datetimepicker.scss

@@ -153,6 +153,7 @@
                 height: 2.3em;
                 line-height: 2.3em;
 
+                // stylelint-disable-next-line max-nesting-depth
                 &:first-child {
                     border-top-width: 0;
                 }
@@ -289,12 +290,6 @@
 }
 
 .xdsoft_noselect {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
     user-select: none;
 }
 
@@ -321,6 +316,7 @@
     cursor: pointer;
 
     > .xdsoft_scroller {
+        // stylelint-disable-next-line declaration-no-important
         background: #ccc !important;
         height: 20px;
         border-radius: 3px;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_dropdowns.scss

@@ -60,6 +60,7 @@
             &.icon {
                 padding-right: 5em;
 
+                // stylelint-disable-next-line max-nesting-depth
                 &:before,
                 &:after {
                     right: 1em;
@@ -238,7 +239,7 @@
     display: inline-block;
     vertical-align: middle;
     line-height: 1;
-    margin-top: -.25rem;
+    margin-top: -0.25rem;
 }
 
 .c-dropdown__button {
@@ -254,30 +255,29 @@
     cursor: pointer;
     -webkit-font-smoothing: subpixel-antialiased;
     user-select: none;
-    -webkit-user-select: none;
 }
 
 .c-dropdown__toggle {
     display: inline-block;
 }
 
 .c-dropdown__menu.c-dropdown__menu {
-    margin-top: .75rem;
-    padding: .75rem 1rem;
+    margin-top: 0.75rem;
+    padding: 0.75rem 1rem;
     min-width: 8rem;
     text-transform: none;
     position: absolute;
     z-index: 1;
-    animation: dropdownIn .1s ease-out backwards;
+    animation: dropdownIn 0.1s ease-out backwards;
     list-style: none;
 }
 
 .c-dropdown__item {
-    margin-bottom: .375rem;
+    margin-bottom: 0.375rem;
 
     &:hover {
         .c-dropdown__indicator {
-            opacity: .6;
+            opacity: 0.6;
         }
     }
 }
@@ -300,7 +300,7 @@
 // =============================================================================
 .u-arrow:before {
     content: '';
-    border: solid .35rem transparent;
+    border: solid 0.35rem transparent;
     display: block;
     position: absolute;
 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_formatters.scss

@@ -216,8 +216,6 @@ a.tag:hover {
             margin: -15px 0 0 -15px;
             font-family: wagtail;
             animation: spin 0.5s infinite linear;
-            -webkit-animation: spin 0.5s infinite linear;
-            -moz-animation: spin 0.5s infinite linear;
             content: '1';
             z-index: 2;
             color: $color-teal;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss

@@ -62,6 +62,7 @@ select,
     border: 1px solid $color-input-border;
     padding: 0.9em 1.2em;
     background-color: $color-fieldset-hover;
+    // stylelint-disable-next-line property-no-vendor-prefix
     -webkit-appearance: none;
     color: $color-text-input;
     font-size: 1.2em;
@@ -136,6 +137,7 @@ input[type=checkbox] {
 }
 
 input[type=radio] {
+    // stylelint-disable-next-line property-no-vendor-prefix
     -webkit-appearance: radio;
     width: auto;
     position: relative;
@@ -168,6 +170,7 @@ input[type=radio]:checked:before {
 }
 
 input[type=checkbox] {
+    // stylelint-disable-next-line property-no-vendor-prefix
     -webkit-appearance: checkbox;
     width: auto;
     position: relative;
@@ -222,6 +225,7 @@ input[type=checkbox]:checked:before {
     outline: none;
     box-sizing: border-box;
     -webkit-font-smoothing: auto;
+    // stylelint-disable-next-line property-no-vendor-prefix
     -moz-appearance: none;
 
     &:hover {
@@ -362,6 +366,7 @@ input[type=checkbox]:checked:before {
         outline: none;
         box-sizing: border-box;
         -webkit-font-smoothing: auto;
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-appearance: none;
     }
 
@@ -452,6 +457,7 @@ input[type=checkbox]:checked:before {
                 height: 1.8rem;
                 width: 1.8rem;
 
+                // stylelint-disable-next-line max-nesting-depth
                 &:before {
                     line-height: 1.7em;
                 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_indicator.scss

@@ -6,15 +6,15 @@
 // =============================================================================
 // Indicator light
 // =============================================================================
-$c-indicator-size: .625em;
-$c-indicator-margin: .25rem;
+$c-indicator-size: 0.625em;
+$c-indicator-margin: 0.25rem;
 
 .c-indicator {
     display: inline-block;
     border-radius: 50rem;
     width: $c-indicator-size;
     height: $c-indicator-size;
-    margin-top: -.125rem;
+    margin-top: -0.125rem;
     margin-right: $c-indicator-margin;
     font-size: 1rem;
     vertical-align: middle;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss

@@ -194,6 +194,7 @@ ul.listing {
                 color: inherit;
                 text-decoration: none;
 
+                // stylelint-disable max-nesting-depth
                 &:hover {
                     color: $color-link;
                 }