Switch to stylelint. (#23572)

scss/_breadcrumb.scss

@@ -27,6 +27,7 @@
   + .breadcrumb-item:hover::before {
     text-decoration: underline;
   }
+  // stylelint-disable-next-line no-duplicate-selectors
   + .breadcrumb-item:hover::before {
     text-decoration: none;
   }

scss/_button-group.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 // Make the div behave like a button
 .btn-group,
@@ -47,7 +47,8 @@
   border-radius: 0;
 }
 
-// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+// Set corners individual because sometimes a single button can be in a .btn-group
+// and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
 
@@ -55,13 +56,15 @@
     @include border-right-radius(0);
   }
 }
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
+// immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   @include border-left-radius(0);
 }
 
-// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+// Custom edits for including btn-groups within btn-groups (useful for including
+// dropdown buttons within a btn-group)
 .btn-group > .btn-group {
   float: left;
 }

scss/_buttons.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Base styles

scss/_close.scss

@@ -19,11 +19,11 @@
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-// scss-lint:disable QualifyingElement
+// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
 button.close {
   padding: 0;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
 }
-// scss-lint:enable QualifyingElement
+// stylelint-enable

scss/_custom-forms.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable PropertyCount, VendorPrefix
-
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open

scss/_forms.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement, VendorPrefix
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Textual form controls

scss/_input-group.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-no-qualifying-type
+
 //
 // Base styles
 //
@@ -88,13 +90,11 @@
     @include border-radius($input-border-radius-lg);
   }
 
-  // scss-lint:disable QualifyingElement
   // Nuke default margins from checkboxes and radios to vertically center within.
   input[type="radio"],
   input[type="checkbox"] {
     margin-top: 0;
   }
-  // scss-lint:enable QualifyingElement
 }
 
 

scss/_modal.scss

@@ -90,7 +90,8 @@
 
   .close {
     padding: $modal-header-padding;
-    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; // auto on the left force icon to the right even when there is no .modal-title
+    // auto on the left force icon to the right even when there is no .modal-title
+    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
   }
 }
 

scss/_navbar.scss

@@ -174,14 +174,12 @@
           flex-wrap: nowrap;
         }
 
-        // scss-lint:disable ImportantRule
         .navbar-collapse {
-          display: flex !important;
+          display: flex !important;  // stylelint-disable-line declaration-no-important
 
           // Changes flex-bases to auto because of an IE10 bug
           flex-basis: auto;
         }
-        // scss-lint:enable ImportantRule
 
         .navbar-toggler {
           display: none;

scss/_print.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable declaration-no-important, selector-no-qualifying-type
 
 // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 
@@ -14,8 +14,7 @@
     *::before,
     *::after {
       // Bootstrap specific; comment out `color` and `background`
-      //color: #000 !important; // Black prints faster:
-                                //   http://www.sanbeiji.com/archives/953
+      //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
       text-shadow: none !important;
       //background: transparent !important;
       box-shadow: none !important;

scss/_reboot.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
+// stylelint-disable
 
 // Reboot
 //

scss/_transitions.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-no-qualifying-type
+
 .fade {
   opacity: 0;
   @include transition($transition-fade);

scss/_type.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+
 //
 // Headings
 //

scss/_variables.scss

@@ -8,6 +8,7 @@
 // Color system
 //
 
+// stylelint-disable
 $white:  #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
@@ -72,6 +73,7 @@ $theme-colors: map-merge((
   "light": $gray-100,
   "dark": $gray-800
 ), $theme-colors);
+// stylelint-enable
 
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
@@ -201,9 +203,11 @@ $transition-collapse:    height .35s ease !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
+// stylelint-disable value-keyword-case
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $font-family-monospace:  "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
 
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:   1.25rem !default;

scss/bootstrap-grid.scss

@@ -8,7 +8,7 @@
 //
 
 @at-root {
-  @-ms-viewport { width: device-width; }
+  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
 }
 
 html {

scss/mixins/_background-variant.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Contextual backgrounds
 
 @mixin bg-variant($parent, $color) {

scss/mixins/_float.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 @mixin float-left {
   float: left !important;
 }

scss/mixins/_grid.scss

@@ -4,10 +4,10 @@
 
 @mixin make-container() {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
   padding-right: ($grid-gutter-width / 2);
   padding-left: ($grid-gutter-width / 2);
+  margin-right: auto;
+  margin-left: auto;
 }
 
 

scss/mixins/_hover.scss

@@ -1,3 +1,4 @@
+// stylelint-disable indentation
 @mixin hover {
   // TODO: re-enable along with mq4-hover-shim
 //  @if $enable-hover-media-query {
@@ -8,9 +9,7 @@
 //    }
 //  }
 //  @else {
-// scss-lint:disable Indentation
     &:hover { @content; }
-// scss-lint:enable Indentation
 //  }
 }
 

scss/mixins/_image.scss

@@ -20,6 +20,7 @@
 //
 // Short retina mixin for setting background-image and -size.
 
+// stylelint-disable indentation, media-query-list-comma-newline-after
 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
   background-image: url($file-1x);
 
@@ -27,8 +28,7 @@
   // but doesn't convert dppx=>dpi.
   // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
   // Compatibility info: https://caniuse.com/#feat=css-media-resolution
-  @media
-  only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+  @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
   only screen and (min-resolution: 2dppx) { // Standardized
     background-image: url($file-2x);
     background-size: $width-1x $height-1x;

scss/mixins/_list-group.scss

@@ -6,7 +6,6 @@
     background-color: $background;
   }
 
-  //scss-lint:disable QualifyingElement
   a.list-group-item-#{$state},
   button.list-group-item-#{$state} {
     color: $color;
@@ -22,5 +21,4 @@
       border-color: $color;
     }
   }
-  // scss-lint:enable QualifyingElement
 }

scss/mixins/_navbar-align.scss

@@ -1,7 +1,8 @@
 // Navbar vertical align
 //
 // Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
+// to calculate the appropriate top margin.
 
 // @mixin navbar-vertical-align($element-height) {
 //   margin-top: (($navbar-height - $element-height) / 2);

scss/mixins/_reset-text.scss

@@ -1,4 +1,3 @@
-// scss-lint:disable DuplicateProperty
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
@@ -6,7 +5,7 @@
   font-weight: $font-weight-normal;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
-  text-align: start;
+  text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
   text-decoration: none;
   text-shadow: none;
   text-transform: none;

scss/mixins/_text-emphasis.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Typography
 
 @mixin text-emphasis-variant($parent, $color) {

scss/mixins/_visibility.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Visibility
 
 @mixin invisible($visibility) {

scss/utilities/_align.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 .align-baseline    { vertical-align: baseline !important; } // Browser default
 .align-top         { vertical-align: top !important; }
 .align-middle      { vertical-align: middle !important; }

scss/utilities/_background.scss

@@ -1,5 +1,7 @@
+// stylelint-disable declaration-no-important
+
 @each $color, $value in $theme-colors {
-  @include bg-variant('.bg-#{$color}', $value);
+  @include bg-variant(".bg-#{$color}", $value);
 }
 
 .bg-white {

scss/utilities/_borders.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Border
 //

scss/utilities/_display.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Utilities for common `display` values
 //

scss/utilities/_flex.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Flex variation
 //
 // Custom styles for additional flex alignment options.

scss/utilities/_position.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Common values
 
 // Sass list not in variables since it's not intended for customization.

scss/utilities/_sizing.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Width and height
 
 @each $prop, $abbrev in (width: w, height: h) {

scss/utilities/_spacing.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {

scss/utilities/_text.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Text
 //
@@ -38,7 +40,7 @@
 .text-white { color: #fff !important; }
 
 @each $color, $value in $theme-colors {
-  @include text-emphasis-variant('.text-#{$color}', $value);
+  @include text-emphasis-variant(".text-#{$color}", $value);
 }
 
 .text-muted { color: $text-muted !important; }