Change Sass linting configuration to take advantage of stylelint capabilities

.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,7 +255,6 @@
     cursor: pointer;
     -webkit-font-smoothing: subpixel-antialiased;
     user-select: none;
-    -webkit-user-select: none;
 }
 
 .c-dropdown__toggle {
@@ -262,22 +262,22 @@
 }
 
 .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;
                 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss

@@ -2,6 +2,26 @@
 @import 'wagtailadmin/scss/mixins';
 @import 'wagtailadmin/scss/grid';
 
+@keyframes nod {
+    from {
+        transform: rotate(2deg);
+    }
+
+    to {
+        transform: rotate(8deg);
+    }
+}
+
+@keyframes tail-wag {
+    from {
+        transform: rotate(-3deg);
+    }
+
+    to {
+        transform: rotate(7deg);
+    }
+}
+
 .logo {
     display: block;
     text-align: left;
@@ -50,10 +70,12 @@
         transition: inherit;
 
         &.wagtail-logo__eye--open {
+            // stylelint-disable-next-line declaration-no-important
             display: inline !important; // doesn't work without `!important`, likely a specificity issue
         }
 
         &.wagtail-logo__eye--closed {
+            // stylelint-disable-next-line declaration-no-important
             display: none !important;
         }
     }
@@ -68,39 +90,22 @@
     // Wagtail 'playful' animation (tail-wag, triggered by JS in base.html):
     &.logo-playful {
         &:hover {
-            @keyframes nod {
-                from {
-                    transform: rotate(2deg);
-                }
-
-                to {
-                    transform: rotate(8deg);
-                }
-            }
-
-            @keyframes tail-wag {
-                from {
-                    transform: rotate(-3deg);
-                }
-
-                to {
-                    transform: rotate(7deg);
-                }
-            }
-
             animation: nod 1.2s forwards;
 
             .wagtail-logo {
+                // stylelint-disable max-nesting-depth
                 &.wagtail-logo__tail {
                     animation: tail-wag 0.09s alternate;
                     animation-iteration-count: infinite;
                 }
 
                 &.wagtail-logo__eye--open {
+                    // stylelint-disable-next-line declaration-no-important
                     display: none !important;
                 }
 
                 &.wagtail-logo__eye--closed {
+                    // stylelint-disable-next-line declaration-no-important
                     display: inline !important;
                 }
             }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -436,6 +436,8 @@ body.explorer-open {
     }
 }
 
+// stylelint-disable scss/media-feature-value-dollar-variable
+
 // Media query hacks to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
 @media all and (-ms-high-contrast: none),
     all and (-ms-high-contrast: active) {

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss

@@ -1,7 +1,7 @@
 $zindex-modal-background: 500;
 
 .fade {
-    @include transition(opacity .15s linear);
+    @include transition(opacity 0.15s linear);
     opacity: 0;
 
     &.in {
@@ -14,7 +14,6 @@ $zindex-modal-background: 500;
     overflow: hidden;
 
     .content-wrapper {
-        -webkit-transform: none;
         transform: none;
     }
 }
@@ -104,6 +103,7 @@ $zindex-modal-background: 500;
     }
 
     .header-title {
+        // stylelint-disable-next-line declaration-no-important
         padding-left: 0 !important;
         margin-left: -36px;
     }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss

@@ -44,7 +44,7 @@ body {
     &:after {
         content: '';
         position: fixed;
-        transition: visibility 0s linear 0s, opacity .2s ease-out;
+        transition: visibility 0s linear 0s, opacity 0.2s ease-out;
         background: rgba(255, 255, 255, 0.5);
         width: 100%;
         height: 100%;
@@ -174,8 +174,10 @@ footer {
         }
     }
 
-    @media screen and (min-width: 90em) {
-        width: 90em;
+    $width-1440px: 90em;
+
+    @media screen and (min-width: $width-1440px) {
+        width: $width-1440px;
     }
 }
 
@@ -234,6 +236,7 @@ footer {
 
         &.home {
             a {
+                // stylelint-disable max-nesting-depth
                 padding-right: 0;
                 text-align: center;
                 width: 3em;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -284,6 +284,7 @@
                 font-size: 0; // helps fake the effect of t.ext-replace class, which can't be used here.
                 width: 2em;
 
+                // stylelint-disable max-nesting-depth
                 &:before {
                     position: relative;
                     padding: 0;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss

@@ -9,7 +9,7 @@
 
 $size-home-button: 3.5em;
 $position: 2em;
-$width-arrow: .6em;
+$width-arrow: 0.6em;
 $box-shadow-props: 0 0 1px 0 rgba(107, 214, 230, 1);
 $max-items: 12;
 $userbar-radius: 6px;
@@ -88,6 +88,7 @@ $positions: (
 .#{$namespace}-userbar {
     position: fixed;
     z-index: 9999;
+    // stylelint-disable-next-line declaration-no-important
     font-size: initial !important;
     line-height: initial;
     margin: 0;
@@ -105,7 +106,7 @@ $positions: (
     }
 }
 
-
+// stylelint-disable declaration-no-important
 .#{$namespace}-userbar-trigger {
     display: flex;
     align-items: center;
@@ -119,7 +120,7 @@ $positions: (
     color: $color-black;
     padding: 0 !important;
     cursor: pointer;
-    box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, .7);
+    box-shadow: $box-shadow-props, 0 1px 10px 0 rgba(107, 214, 230, 0.7);
     transition: all 0.2s ease-in-out;
     font-size: 16px;
     text-decoration: none !important;
@@ -127,7 +128,7 @@ $positions: (
 
     .#{$namespace}-userbar.touch.is-active &,
     .#{$namespace}-userbar.no-touch &:hover {
-        box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, .95);
+        box-shadow: $box-shadow-props, 0 3px 15px 0 rgba(107, 214, 230, 0.95);
     }
 
     .#{$namespace}-userbar-help-text {
@@ -137,7 +138,7 @@ $positions: (
     }
 
     &.#{$namespace}-icon:before {
-        transition: color .2s ease;
+        transition: color 0.2s ease;
         font-size: 32px;
         width: auto;
         margin: 0;
@@ -170,13 +171,13 @@ $positions: (
     height: 0;
     opacity: 0;
     border: solid $width-arrow transparent;
-    transition-duration: .15s;
-    transition-timing-function: cubic-bezier(.55, 0, .1, 1);
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
 
     .#{$namespace}-userbar.is-active & {
         opacity: 1;
         transform: translateY(0);
-        transition-delay: .3s;
+        transition-delay: 0.3s;
     }
 }
 
@@ -200,8 +201,8 @@ $positions: (
     background-color: $color-grey-1;
     opacity: 0;
     overflow: hidden;
-    transition-duration: .125s;
-    transition-timing-function: cubic-bezier(.55, 0, .1, 1);
+    transition-duration: 0.125s;
+    transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
     font-family: 'Open Sans', sans-serif;
     font-size: 16px !important;
     text-decoration: none !important;
@@ -319,7 +320,7 @@ $positions: (
                 }
 
                 &:#{unquote($prop)}(#{$i}) {
-                    transition-delay: .05s * $i;
+                    transition-delay: 0.05s * $i;
                 }
             }
         }

wagtail/wagtailusers/static_src/wagtailusers/scss/groups_edit.scss

@@ -11,6 +11,7 @@
     }
 
     select + span:after {
+        // stylelint-disable-next-line declaration-no-important
         font-size: 2.5em !important;
     }
 }