Switch to stylelint. (#23572)

53 files changed, 710 insertions, 608 deletions

diff --git a/.gitignore b/.gitignore
index 02b12a78fb..2ea8867b2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,9 +38,6 @@ Thumbs.db
 .komodotools
 *.komodoproject
 
-# SCSS-Lint
-scss-lint-report.xml
-
 # Jekyll metadata and extra config file for `github` script
 docs/.jekyll-metadata
 twbsconfig.yml
diff --git a/.hound.yml b/.hound.yml
index 7449ea3f95..39dfd0815c 100644
--- a/.hound.yml
+++ b/.hound.yml
@@ -1,7 +1,7 @@
 fail_on_violations: true
 
-scss:
-  config_file: .scss-lint.yml
+stylelint:
+  config_file: build/.stylelintrc
 
 jshint:
   enabled: false
diff --git a/.scss-lint.yml b/.scss-lint.yml
deleted file mode 100644
index 552168dda7..0000000000
--- a/.scss-lint.yml
+++ /dev/null
@@ -1,540 +0,0 @@
-# Default application configuration that all configurations inherit from.
-scss_files:
-  - "scss/**/*.scss"
-  - "docs/assets/scss/**/*.scss"
-
-exclude:
-  - "scss/_root.scss"
-
-plugin_directories: ['.scss-linters']
-
-# List of gem names to load custom linters from (make sure they are already
-# installed)
-plugin_gems: []
-
-# Default severity of all linters.
-severity: warning
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BemDepth:
-    enabled: false
-    max_elements: 1
-
-  BorderZero:
-    enabled: true
-    convention: zero # or `none`
-
-  ChainedClasses:
-    enabled: false
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-    exclude:
-      - scss/bootstrap.scss
-    style: silent
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: false
-
-  DisableLinterReason:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-
-  ElsePlacement:
-    enabled: true
-    style: same_line # or 'new_line'
-
-  EmptyLineBetweenBlocks:
-    enabled: false
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  ExtendDirective:
-    enabled: false
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short # or 'long'
-
-  HexNotation:
-    enabled: true
-    style: lowercase # or 'uppercase'
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: true
-
-  ImportantRule:
-    enabled: false
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    allow_non_nested_indentation: false
-    character: space # or 'tab'
-    width: 2
-
-  LeadingZero:
-    enabled: true
-    style: exclude_zero # or 'include_zero'
-
-  MergeableSelector:
-    enabled: false
-    force_nesting: true
-
-  NameFormat:
-    enabled: true
-    allow_leading_underscore: true
-    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
-
-  NestingDepth:
-    enabled: true
-    max_depth: 5
-    ignore_parent_selectors: false
-
-  PlaceholderInExtend:
-    enabled: false
-
-  PropertyCount:
-    enabled: false
-    include_nested: false
-    max_properties: 10
-
-  PropertySortOrder:
-    enabled: true
-    ignore_unspecified: false
-    min_properties: 2
-    separate_groups: false
-    order:
-      - position
-      - top
-      - right
-      - bottom
-      - left
-      - z-index
-      - -webkit-box-sizing
-      - -moz-box-sizing
-      - box-sizing
-      - display
-      - flex
-      - flex-align
-      - flex-basis
-      - flex-direction
-      - flex-wrap
-      - flex-flow
-      - flex-grow
-      - flex-order
-      - flex-pack
-      - align-items
-      - align-self
-      - justify-content
-      - order
-      - float
-      - width
-      - min-width
-      - max-width
-      - height
-      - min-height
-      - max-height
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
-      - overflow
-      - overflow-x
-      - overflow-y
-      - -webkit-overflow-scrolling
-      - -ms-overflow-x
-      - -ms-overflow-y
-      - -ms-overflow-style
-      - clip
-      - clear
-      - font
-      - font-family
-      - font-size
-      - font-style
-      - font-weight
-      - font-variant
-      - font-size-adjust
-      - font-stretch
-      - font-effect
-      - font-emphasize
-      - font-emphasize-position
-      - font-emphasize-style
-      - font-smooth
-      - -webkit-hyphens
-      - -moz-hyphens
-      - hyphens
-      - line-height
-      - color
-      - text-align
-      - -webkit-text-align-last
-      - -moz-text-align-last
-      - -ms-text-align-last
-      - text-align-last
-      - text-emphasis
-      - text-emphasis-color
-      - text-emphasis-style
-      - text-emphasis-position
-      - text-decoration
-      - text-indent
-      - text-justify
-      - text-outline
-      - -ms-text-overflow
-      - text-overflow
-      - text-overflow-ellipsis
-      - text-overflow-mode
-      - text-shadow
-      - text-transform
-      - text-wrap
-      - -webkit-text-size-adjust
-      - -ms-text-size-adjust
-      - letter-spacing
-      - -ms-word-break
-      - word-break
-      - word-spacing
-      - -ms-word-wrap
-      - word-wrap
-      - overflow-wrap
-      - -moz-tab-size
-      - -o-tab-size
-      - tab-size
-      - white-space
-      - vertical-align
-      - list-style
-      - list-style-position
-      - list-style-type
-      - list-style-image
-      - pointer-events
-      - -ms-touch-action
-      - touch-action
-      - cursor
-      - visibility
-      - zoom
-      - table-layout
-      - empty-cells
-      - caption-side
-      - border-spacing
-      - border-collapse
-      - content
-      - quotes
-      - counter-reset
-      - counter-increment
-      - resize
-      - -webkit-user-select
-      - -moz-user-select
-      - -ms-user-select
-      - -o-user-select
-      - user-select
-      - nav-index
-      - nav-up
-      - nav-right
-      - nav-down
-      - nav-left
-      - background
-      - background-color
-      - background-image
-      - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient
-      - filter:progid:DXImageTransform.Microsoft.gradient
-      - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
-      - filter
-      - background-repeat
-      - background-attachment
-      - background-position
-      - background-position-x
-      - background-position-y
-      - -webkit-background-clip
-      - -moz-background-clip
-      - background-clip
-      - background-origin
-      - -webkit-background-size
-      - -moz-background-size
-      - -o-background-size
-      - background-size
-      - border
-      - border-color
-      - border-style
-      - border-width
-      - border-top
-      - border-top-color
-      - border-top-style
-      - border-top-width
-      - border-right
-      - border-right-color
-      - border-right-style
-      - border-right-width
-      - border-bottom
-      - border-bottom-color
-      - border-bottom-style
-      - border-bottom-width
-      - border-left
-      - border-left-color
-      - border-left-style
-      - border-left-width
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-right-radius
-      - border-bottom-left-radius
-      - -webkit-border-image
-      - -moz-border-image
-      - -o-border-image
-      - border-image
-      - -webkit-border-image-source
-      - -moz-border-image-source
-      - -o-border-image-source
-      - border-image-source
-      - -webkit-border-image-slice
-      - -moz-border-image-slice
-      - -o-border-image-slice
-      - border-image-slice
-      - -webkit-border-image-width
-      - -moz-border-image-width
-      - -o-border-image-width
-      - border-image-width
-      - -webkit-border-image-outset
-      - -moz-border-image-outset
-      - -o-border-image-outset
-      - border-image-outset
-      - -webkit-border-image-repeat
-      - -moz-border-image-repeat
-      - -o-border-image-repeat
-      - border-image-repeat
-      - outline
-      - outline-width
-      - outline-style
-      - outline-color
-      - outline-offset
-      - -webkit-box-shadow
-      - -moz-box-shadow
-      - box-shadow
-      - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity
-      - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha
-      - opacity
-      - -ms-interpolation-mode
-      - -webkit-transition
-      - -moz-transition
-      - -ms-transition
-      - -o-transition
-      - transition
-      - -webkit-transition-delay
-      - -moz-transition-delay
-      - -ms-transition-delay
-      - -o-transition-delay
-      - transition-delay
-      - -webkit-transition-timing-function
-      - -moz-transition-timing-function
-      - -ms-transition-timing-function
-      - -o-transition-timing-function
-      - transition-timing-function
-      - -webkit-transition-duration
-      - -moz-transition-duration
-      - -ms-transition-duration
-      - -o-transition-duration
-      - transition-duration
-      - -webkit-transition-property
-      - -moz-transition-property
-      - -ms-transition-property
-      - -o-transition-property
-      - transition-property
-      - -webkit-transform
-      - -moz-transform
-      - -ms-transform
-      - -o-transform
-      - transform
-      - -webkit-transform-origin
-      - -moz-transform-origin
-      - -ms-transform-origin
-      - -o-transform-origin
-      - transform-origin
-      - -webkit-animation
-      - -moz-animation
-      - -ms-animation
-      - -o-animation
-      - animation
-      - -webkit-animation-name
-      - -moz-animation-name
-      - -ms-animation-name
-      - -o-animation-name
-      - animation-name
-      - -webkit-animation-duration
-      - -moz-animation-duration
-      - -ms-animation-duration
-      - -o-animation-duration
-      - animation-duration
-      - -webkit-animation-play-state
-      - -moz-animation-play-state
-      - -ms-animation-play-state
-      - -o-animation-play-state
-      - animation-play-state
-      - -webkit-animation-timing-function
-      - -moz-animation-timing-function
-      - -ms-animation-timing-function
-      - -o-animation-timing-function
-      - animation-timing-function
-      - -webkit-animation-delay
-      - -moz-animation-delay
-      - -ms-animation-delay
-      - -o-animation-delay
-      - animation-delay
-      - -webkit-animation-iteration-count
-      - -moz-animation-iteration-count
-      - -ms-animation-iteration-count
-      - -o-animation-iteration-count
-      - animation-iteration-count
-      - -webkit-animation-direction
-      - -moz-animation-direction
-      - -ms-animation-direction
-      - -o-animation-direction
-
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: []
-    disabled_properties: []
-
-  PropertyUnits:
-    enabled: true
-    global: [
-      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
-      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
-      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
-      'deg', 'grad', 'rad', 'turn',            # Angle
-      'ms', 's',                               # Duration
-      'Hz', 'kHz',                             # Frequency
-      'dpi', 'dpcm', 'dppx',                   # Resolution
-      '%']                                     # Other
-    properties: {}
-
-  PseudoElement:
-    enabled: true
-
-  QualifyingElement:
-    enabled: true
-    allow_element_with_attribute: false
-    allow_element_with_class: false
-    allow_element_with_id: false
-
-  SelectorDepth:
-    enabled: true
-    max_depth: 4
-
-  SelectorFormat:
-    enabled: false
-    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
-
-  Shorthand:
-    enabled: true
-    allowed_shorthands: [1, 2, 3, 4]
-
-  SingleLinePerProperty:
-    enabled: false
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: false
-
-  SpaceAfterComma:
-    enabled: false
-    style: one_space # or 'no_space', or 'at_least_one_space'
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceAfterVariableName:
-    enabled: true
-
-  SpaceAroundOperator:
-    enabled: true
-    style: one_space # or 'at_least_one_space', or 'no_space'
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space # or 'new_line'
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes # or double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingWhitespace:
-    enabled: true
-
-  TrailingZero:
-    enabled: false
-
-  TransitionAll:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VariableForProperty:
-    enabled: false
-    properties: []
-
-  VendorPrefix:
-    enabled: true
-    identifier_list: base
-    additional_identifiers: []
-    excluded_identifiers: []
-
-  ZeroUnit:
-    enabled: true
-
-  Compass::*:
-    enabled: false
diff --git a/Gemfile b/Gemfile
index 8e8bb42a2e..2c0ac91d55 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,5 +5,4 @@ group :development, :test do
   gem 'jekyll-redirect-from', '~> 0.12.1'
   gem 'jekyll-sitemap', '~> 1.1.1'
   gem 'jekyll-toc', '~> 0.3.0'
-  gem 'scss_lint', '~> 0.54.0'
 end
diff --git a/Gemfile.lock b/Gemfile.lock
index 8cf4591625..99c54cc877 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -42,16 +42,16 @@ GEM
     pathutil (0.14.0)
       forwardable-extended (~> 2.6)
     public_suffix (3.0.0)
-    rake (12.1.0)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rouge (2.2.1)
     safe_yaml (1.0.4)
-    sass (3.4.25)
-    scss_lint (0.54.0)
-      rake (>= 0.9, < 13)
-      sass (~> 3.4.20)
+    sass (3.5.1)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
 
 PLATFORMS
   ruby
@@ -62,7 +62,6 @@ DEPENDENCIES
   jekyll-redirect-from (~> 0.12.1)
   jekyll-sitemap (~> 1.1.1)
   jekyll-toc (~> 0.3.0)
-  scss_lint (~> 0.54.0)
 
 BUNDLED WITH
    1.15.4
diff --git a/assets/scss/_ads.scss b/assets/scss/_ads.scss
index 11fdc6959e..af86479723 100644
--- a/assets/scss/_ads.scss
+++ b/assets/scss/_ads.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule, IdSelector
+// stylelint-disable declaration-no-important, selector-max-id
 
 //
 // Carbon ads
diff --git a/assets/scss/_algolia.scss b/assets/scss/_algolia.scss
index 1e51a5275a..4c6f6abf5a 100644
--- a/assets/scss/_algolia.scss
+++ b/assets/scss/_algolia.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Docsearch overrides
 //
 // `!important` indicates overridden properties.
@@ -25,7 +27,7 @@
       display: none !important;
     }
 
-    [class^=ds-dataset-] {
+    [class^="ds-dataset-"] {
       padding: 0 !important;
       overflow: visible !important;
       background-color: transparent !important;
@@ -101,7 +103,7 @@
     padding: 0 1rem .5rem !important;
     margin-top: -.25rem;
     font-size: .875rem !important;
-    font-weight: normal;
+    font-weight: 400;
     line-height: 1.25 !important;
   }
 
diff --git a/assets/scss/_anchor.scss b/assets/scss/_anchor.scss
index d0a9043e95..2e02390ed3 100644
--- a/assets/scss/_anchor.scss
+++ b/assets/scss/_anchor.scss
@@ -1,7 +1,5 @@
-// scss-lint:disable ImportantRule
-
 .anchorjs-link {
-  font-weight: normal;
+  font-weight: 400;
   color: rgba($link-color, .5);
   transition: color .16s linear;
 
diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 5779825cf0..2a2c740b35 100644
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Grid examples
@@ -288,7 +288,8 @@
 .modal {
   z-index: 1072;
 
-  .tooltip, .popover {
+  .tooltip,
+  .popover {
     z-index: 1073;
   }
 }
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index b485fca4c6..b8311495cf 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable IdSelector, NestingDepth, SelectorDepth, QualifyingElement
+// stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
 
 //
 // Automatically style Markdown-based tables like a Bootstrap `.table`.
diff --git a/assets/scss/_masthead.scss b/assets/scss/_masthead.scss
index f891d4e91d..614e6566e3 100644
--- a/assets/scss/_masthead.scss
+++ b/assets/scss/_masthead.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// stylelint-disable declaration-no-important
 
 .bd-masthead {
   position: relative;
diff --git a/assets/scss/_page-header.scss b/assets/scss/_page-header.scss
index 457d3fbef8..7050af10c7 100644
--- a/assets/scss/_page-header.scss
+++ b/assets/scss/_page-header.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// stylelint-disable declaration-no-important
 
 .bd-pageheader {
   padding: 2rem ($grid-gutter-width / 2);
@@ -13,7 +13,7 @@
 
   h1 {
     font-size: 3rem;
-    font-weight: normal;
+    font-weight: 400;
     color: #fff;
   }
 
diff --git a/assets/scss/_responsive-tests.scss b/assets/scss/_responsive-tests.scss
index 9656a2bc3e..be5e5320af 100644
--- a/assets/scss/_responsive-tests.scss
+++ b/assets/scss/_responsive-tests.scss
@@ -1,5 +1,3 @@
-// scss-lint:disable ImportantRule
-
 //
 // Responsive tests
 //
@@ -12,6 +10,6 @@
 // Utility classes table
 .bd-table th small {
   display: block;
-  font-weight: normal;
+  font-weight: 400;
   color: #999;
 }
diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss
index beadf9de56..fdf3ef242c 100644
--- a/assets/scss/_sidebar.scss
+++ b/assets/scss/_sidebar.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable VendorPrefix
+// stylelint-disable declaration-no-important
 
 //
 // Right side table of contents
diff --git a/assets/scss/_skiplink.scss b/assets/scss/_skiplink.scss
index 6eb60ffa64..7ca3074a8c 100644
--- a/assets/scss/_skiplink.scss
+++ b/assets/scss/_skiplink.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable IdSelector
+// stylelint-disable selector-max-id
 
 #skippy {
   display: block;
diff --git a/assets/scss/_syntax.scss b/assets/scss/_syntax.scss
index ca19dde819..e66c5da220 100644
--- a/assets/scss/_syntax.scss
+++ b/assets/scss/_syntax.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-block-single-line-max-declarations
+
 .hll { background-color: #ffc; }
 .c { color: #999; }
 .k { color: #069; }
diff --git a/build/.stylelintrc b/build/.stylelintrc
new file mode 100644
index 0000000000..8fa3104909
--- /dev/null
+++ b/build/.stylelintrc
@@ -0,0 +1,248 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": [null,
+      "except": ["first-nested"]
+    ],
+    "at-rule-name-space-after": "always",
+    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": null,
+    "block-closing-brace-newline-after": null,
+    "block-opening-brace-space-before": null,
+    "color-named": "never",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-empty-line-before": null,
+    "declaration-no-important": true,
+    "font-family-name-quotes": "always-where-required",
+    "font-weight-notation": "numeric",
+    "function-comma-space-after": null,
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "length-zero-no-unit": true,
+    "max-empty-lines": 2,
+    "max-line-length": null,
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "never",
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "number-leading-zero": "never",
+    "order/properties-order": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "box-sizing",
+      "display",
+      "flex",
+      "flex-align",
+      "flex-basis",
+      "flex-direction",
+      "flex-wrap",
+      "flex-flow",
+      "flex-grow",
+      "flex-order",
+      "flex-pack",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "order",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-x",
+      "-ms-overflow-y",
+      "-ms-overflow-style",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "-ms-text-overflow",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "-ms-word-break",
+      "word-break",
+      "word-spacing",
+      "-ms-word-wrap",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "-ms-touch-action",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "background-clip",
+      "background-origin",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "border-image",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "box-shadow",
+      "opacity",
+      "-ms-interpolation-mode",
+      "transition",
+      "transition-delay",
+      "transition-timing-function",
+      "transition-duration",
+      "transition-property",
+      "transform",
+      "transform-origin",
+      "animation",
+      "animation-name",
+      "animation-duration",
+      "animation-play-state",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction"
+    ],
+    "property-no-vendor-prefix": true,
+    "rule-empty-line-before": null,
+    "selector-attribute-quotes": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-after": "always-single-line",
+    "selector-list-comma-space-before": "never-single-line",
+    "selector-max-attribute": 2,
+    "selector-max-class": 4,
+    "selector-max-combinators": 4,
+    "selector-max-compound-selectors": 4,
+    "selector-max-empty-lines": 1,
+    "selector-max-id": 0,
+    "selector-max-specificity": null,
+    "selector-max-type": 2,
+    "selector-max-universal": 1,
+    "selector-no-qualifying-type": true,
+    "selector-no-vendor-prefix": true,
+    "string-quotes": "double",
+    "value-keyword-case": "lower",
+    "value-list-comma-newline-after": "never-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-no-vendor-prefix": true
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d600450942..7bcfbf507b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1505,6 +1505,16 @@
         }
       }
     },
+    "clone-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-1.0.0.tgz",
+      "integrity": "sha1-6uCiQT9VwJQvgYwin+/OhF1/Oxw=",
+      "dev": true,
+      "requires": {
+        "is-regexp": "1.0.0",
+        "is-supported-regexp-flag": "1.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -2165,6 +2175,15 @@
         "strip-eof": "1.0.0"
       }
     },
+    "execall": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/execall/-/execall-1.0.0.tgz",
+      "integrity": "sha1-c9CQTjlbPKsGWLCNCewlMH8pu3M=",
+      "dev": true,
+      "requires": {
+        "clone-regexp": "1.0.0"
+      }
+    },
     "exists-stat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/exists-stat/-/exists-stat-1.0.0.tgz",
@@ -2389,6 +2408,12 @@
         "write": "0.2.1"
       }
     },
+    "flatten": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
+      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
+      "dev": true
+    },
     "follow-redirects": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.4.tgz",
@@ -2718,6 +2743,12 @@
         "pinkie-promise": "2.0.1"
       }
     },
+    "globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
+      "dev": true
+    },
     "globule": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
@@ -2864,6 +2895,12 @@
       "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==",
       "dev": true
     },
+    "html-tags": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
+      "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
+      "dev": true
+    },
     "htmllint": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/htmllint/-/htmllint-0.6.0.tgz",
@@ -2999,6 +3036,12 @@
         "repeating": "2.0.1"
       }
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -3288,6 +3331,12 @@
         "has": "1.0.1"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
+    },
     "is-relative": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
@@ -3318,6 +3367,12 @@
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-supported-regexp-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-supported-regexp-flag/-/is-supported-regexp-flag-1.0.0.tgz",
+      "integrity": "sha1-i1IMhfrnolM4LUsCZS4EVXbhO7g=",
+      "dev": true
+    },
     "is-symbol": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
@@ -3533,6 +3588,12 @@
         "graceful-fs": "4.1.11"
       }
     },
+    "known-css-properties": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.3.0.tgz",
+      "integrity": "sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==",
+      "dev": true
+    },
     "latest-version": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
@@ -3895,6 +3956,12 @@
         "minimatch": "3.0.4"
       }
     },
+    "mathml-tag-names": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.0.1.tgz",
+      "integrity": "sha1-jUEmgWi/htEQK5gQnijlMeejRXg=",
+      "dev": true
+    },
     "mem": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
@@ -4227,6 +4294,12 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize-selector": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-selector/-/normalize-selector-0.2.0.tgz",
+      "integrity": "sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=",
+      "dev": true
+    },
     "npm-run-all": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.1.tgz",
@@ -5073,6 +5146,80 @@
         }
       }
     },
+    "postcss-less": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-1.1.0.tgz",
+      "integrity": "sha1-vcx2vmTEMk2HP7xc2foueZ5DBfo=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.17"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.17",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
+          "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "js-base64": "2.3.2",
+            "source-map": "0.5.7",
+            "supports-color": "3.2.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
     "postcss-load-config": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
@@ -5105,6 +5252,12 @@
         "object-assign": "4.1.1"
       }
     },
+    "postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
+      "dev": true
+    },
     "postcss-reporter": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-5.0.0.tgz",
@@ -5128,6 +5281,42 @@
         }
       }
     },
+    "postcss-resolve-nested-selector": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+      "integrity": "sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=",
+      "dev": true
+    },
+    "postcss-scss": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-1.0.2.tgz",
+      "integrity": "sha1-/0XPM1S4ee6JpOtoaA9GrJuxT5Q=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.12"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=",
+      "dev": true,
+      "requires": {
+        "flatten": "1.0.2",
+        "indexes-of": "1.0.1",
+        "uniq": "1.0.1"
+      }
+    },
+    "postcss-sorting": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-3.0.2.tgz",
+      "integrity": "sha1-c+aRO3FUJiAdIuihdpsFAio3qvw=",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.4",
+        "postcss": "6.0.12"
+      }
+    },
     "postcss-value-parser": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
@@ -6082,6 +6271,12 @@
       "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=",
       "dev": true
     },
+    "specificity": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.3.2.tgz",
+      "integrity": "sha512-Nc/QN/A425Qog7j9aHmwOrlwX2e7pNI47ciwxwy4jOlvbbMHkNNJchit+FX+UjF3IAdiaaV5BKeWuDUnws6G1A==",
+      "dev": true
+    },
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
@@ -6214,6 +6409,163 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "style-search": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+      "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
+      "dev": true
+    },
+    "stylelint": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-8.1.1.tgz",
+      "integrity": "sha512-RtjUtqG2h3dP4CuMU1M++GRJGvKXWozmv5yhLoOLy7NWP2jJZOwLZSVwtcjXQsBJBfGuC33mooBOwNaCIhi2tQ==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "7.1.4",
+        "balanced-match": "1.0.0",
+        "chalk": "2.1.0",
+        "cosmiconfig": "2.2.2",
+        "debug": "3.1.0",
+        "execall": "1.0.0",
+        "file-entry-cache": "2.0.0",
+        "get-stdin": "5.0.1",
+        "globby": "6.1.0",
+        "globjoin": "0.1.4",
+        "html-tags": "2.0.0",
+        "ignore": "3.3.5",
+        "imurmurhash": "0.1.4",
+        "known-css-properties": "0.3.0",
+        "lodash": "4.17.4",
+        "log-symbols": "2.1.0",
+        "mathml-tag-names": "2.0.1",
+        "meow": "3.7.0",
+        "micromatch": "2.3.11",
+        "normalize-selector": "0.2.0",
+        "pify": "3.0.0",
+        "postcss": "6.0.12",
+        "postcss-less": "1.1.0",
+        "postcss-media-query-parser": "0.2.3",
+        "postcss-reporter": "5.0.0",
+        "postcss-resolve-nested-selector": "0.1.1",
+        "postcss-scss": "1.0.2",
+        "postcss-selector-parser": "2.2.3",
+        "postcss-value-parser": "3.3.0",
+        "resolve-from": "3.0.0",
+        "specificity": "0.3.2",
+        "string-width": "2.1.1",
+        "style-search": "0.1.0",
+        "sugarss": "1.0.0",
+        "svg-tags": "1.0.0",
+        "table": "4.0.2"
+      },
+      "dependencies": {
+        "get-stdin": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
+          "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=",
+          "dev": true
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "dev": true,
+          "requires": {
+            "array-union": "1.0.2",
+            "glob": "7.1.2",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+              "dev": true
+            }
+          }
+        },
+        "log-symbols": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.1.0.tgz",
+          "integrity": "sha512-zLeLrzMA1A2vRF1e/0Mo+LNINzi6jzBylHj5WqvQ/WK/5WCZt8si9SyN4p9llr/HRYvVR1AoXHRHl4WTHyQAzQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.1.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        }
+      }
+    },
+    "stylelint-config-recommended": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-1.0.0.tgz",
+      "integrity": "sha512-wp50rY5A6MWndIIkKNNzJv/S58lTvqQEriS7CXTBN1SwtoY/YjHhCLIOkjundLnUWMvJJska6GnciLbs76UQrA==",
+      "dev": true
+    },
+    "stylelint-config-recommended-scss": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-2.0.0.tgz",
+      "integrity": "sha512-DUIW3daRl5EAyU4ZR6xfPa+bqV5wDccS7X1je6Enes9edpbmWUBR/5XLfDPnjMJgqOe2QwqwaE/qnG4lXID9rg==",
+      "dev": true,
+      "requires": {
+        "stylelint-config-recommended": "1.0.0"
+      }
+    },
+    "stylelint-config-standard": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-17.0.0.tgz",
+      "integrity": "sha512-G8jMZ0KsaVH7leur9XLZVhwOBHZ2vdbuJV8Bgy0ta7/PpBhEHo6fjVDaNchyCGXB5sRcWVq6O9rEU/MvY9cQDQ==",
+      "dev": true,
+      "requires": {
+        "stylelint-config-recommended": "1.0.0"
+      }
+    },
+    "stylelint-order": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-0.7.0.tgz",
+      "integrity": "sha1-zqtcviSqM/pjWQAkmVOV9u38mrc=",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.4",
+        "postcss": "6.0.12",
+        "postcss-sorting": "3.0.2"
+      }
+    },
+    "stylelint-scss": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-2.1.0.tgz",
+      "integrity": "sha512-xlaN1tdMj3mlNtw1pAjbIQqThghU3e+XGyHwhyr/obtB0R+Vt9VF3F3oYaVawx1JAzW78CuDku/CkPlnrgmHZA==",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.4",
+        "postcss-media-query-parser": "0.2.3",
+        "postcss-resolve-nested-selector": "0.1.1",
+        "postcss-selector-parser": "2.2.3",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "sugarss": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-1.0.0.tgz",
+      "integrity": "sha1-ZeUbOVhDL7cNVFGmi7M+MtDPHvc=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.12"
+      }
+    },
     "supports-color": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz",
@@ -6223,6 +6575,12 @@
         "has-flag": "2.0.0"
       }
     },
+    "svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
+      "dev": true
+    },
     "table": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
@@ -6424,6 +6782,12 @@
       "integrity": "sha512-TdDmDOTxEf2ad1g3ZBpM6cqKIb2nJpVlz1Q++casDryKz18tpeMBhSng9hjC1CTQCkOV9Rw2knlSB6iRo7ad1w==",
       "dev": true
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
     "unique-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
diff --git a/package.json b/package.json
index 48bbb76684..3a123a78e4 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,10 @@
     "css": "npm-run-all --parallel css-lint* css-compile* --sequential css-prefix* css-minify*",
     "css-main": "npm-run-all --parallel css-lint css-compile --sequential css-prefix css-minify",
     "css-docs": "npm-run-all --parallel css-lint-docs css-compile-docs --sequential css-prefix-docs css-minify-docs",
-    "css-lint": "bundle exec scss-lint --config .scss-lint.yml scss/*.scss",
-    "css-lint-docs": "bundle exec scss-lint --config .scss-lint.yml --exclude assets/scss/docs.scss assets/scss/*.scss",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css",
     "css-compile-docs": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 assets/scss/docs.scss assets/css/docs.min.css",
+    "css-lint": "stylelint --config build/.stylelintrc --syntax scss scss/**/*.scss",
+    "css-lint-docs": "stylelint --config build/.stylelintrc --syntax scss assets/scss/*.scss",
     "css-prefix": "postcss --config build/postcss.config.js --replace dist/css/*.css",
     "css-prefix-docs": "postcss --config build/postcss.config.js --no-map --replace assets/css/docs.min.css",
     "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
@@ -105,6 +105,11 @@
     "rollup-plugin-node-resolve": "^3.0.0",
     "shelljs": "^0.7.8",
     "shx": "^0.2.2",
+    "stylelint": "^8.1.1",
+    "stylelint-config-recommended-scss": "^2.0.0",
+    "stylelint-config-standard": "^17.0.0",
+    "stylelint-order": "^0.7.0",
+    "stylelint-scss": "^2.1.0",
     "uglify-js": "^3.0.24",
     "workbox-build": "^2.0.1"
   },
@@ -119,9 +124,7 @@
     "build",
     "js/.eslintrc.json",
     "js/**/*.js",
-    ".scss-lint.yml",
-    "scss/**/*.scss",
-    "LICENSE"
+    "scss/**/*.scss"
   ],
   "browserslist": [
     "Chrome >= 45",
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 5d77eeab60..25b9d85a12 100644
--- a/scss/_breadcrumb.scss
+++ b/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;
   }
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 189036bd30..1a373f3232 100644
--- a/scss/_button-group.scss
+++ b/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;
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 1a6d59ec19..d69c159983 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Base styles
diff --git a/scss/_close.scss b/scss/_close.scss
index f181490514..897d486844 100644
--- a/scss/_close.scss
+++ b/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
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index f9912606d7..f471be6227 100644
--- a/scss/_custom-forms.scss
+++ b/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
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 69429fdef8..1c661917bc 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement, VendorPrefix
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Textual form controls
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 8f88b73ec3..91180f1700 100644
--- a/scss/_input-group.scss
+++ b/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
 }
 
 
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 15e3754b7b..e655850e38 100644
--- a/scss/_modal.scss
+++ b/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;
   }
 }
 
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index a9b6b7b8a6..1398400c03 100644
--- a/scss/_navbar.scss
+++ b/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;
diff --git a/scss/_print.scss b/scss/_print.scss
index 7f8d9900a3..6505d3e947 100644
--- a/scss/_print.scss
+++ b/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;
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 2bb4904ac1..29008b921d 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
+// stylelint-disable
 
 // Reboot
 //
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 86c04a5f8b..df5744b25f 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-no-qualifying-type
+
 .fade {
   opacity: 0;
   @include transition($transition-fade);
diff --git a/scss/_type.scss b/scss/_type.scss
index 8928341da8..b1b8f61cf5 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+
 //
 // Headings
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 35c38cb835..437434ce2f 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 4b2bddd5d3..022ab91d8a 100644
--- a/scss/bootstrap-grid.scss
+++ b/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 {
diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index 54a734dcc8..5860d7384c 100644
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Contextual backgrounds
 
 @mixin bg-variant($parent, $color) {
diff --git a/scss/mixins/_float.scss b/scss/mixins/_float.scss
index b43116fa6c..48fa8b6d59 100644
--- a/scss/mixins/_float.scss
+++ b/scss/mixins/_float.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 @mixin float-left {
   float: left !important;
 }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 808b2cc425..b5612e922e 100644
--- a/scss/mixins/_grid.scss
+++ b/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;
 }
 
 
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
index 72d1804f3b..fd2f1e2cda 100644
--- a/scss/mixins/_hover.scss
+++ b/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
 //  }
 }
 
diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss
index fb7d95b54e..0544f0d2a3 100644
--- a/scss/mixins/_image.scss
+++ b/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;
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index ba27b5041d..278787bbed 100644
--- a/scss/mixins/_list-group.scss
+++ b/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
 }
diff --git a/scss/mixins/_navbar-align.scss b/scss/mixins/_navbar-align.scss
index c454a4ffe9..b351660335 100644
--- a/scss/mixins/_navbar-align.scss
+++ b/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);
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index 4cf9e79c74..71edb0061a 100644
--- a/scss/mixins/_reset-text.scss
+++ b/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;
diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss
index 9cd4b6a4f0..58db3e0fc7 100644
--- a/scss/mixins/_text-emphasis.scss
+++ b/scss/mixins/_text-emphasis.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Typography
 
 @mixin text-emphasis-variant($parent, $color) {
diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss
index f67fc1c529..fe523d0ee3 100644
--- a/scss/mixins/_visibility.scss
+++ b/scss/mixins/_visibility.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Visibility
 
 @mixin invisible($visibility) {
diff --git a/scss/utilities/_align.scss b/scss/utilities/_align.scss
index 4dbbbc2dbc..8b7df9f76c 100644
--- a/scss/utilities/_align.scss
+++ b/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; }
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index e382d4f90d..3d2e07d699 100644
--- a/scss/utilities/_background.scss
+++ b/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 {
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index 3ff603c32a..ba02f04563 100644
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Border
 //
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index 07f3da0b19..893b6387c1 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Utilities for common `display` values
 //
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index b28c0b97de..8e47038436 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Flex variation
 //
 // Custom styles for additional flex alignment options.
diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss
index bddae2151c..ef962eddbd 100644
--- a/scss/utilities/_position.scss
+++ b/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.
diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss
index a7dc3e49b8..e95a4db36a 100644
--- a/scss/utilities/_sizing.scss
+++ b/scss/utilities/_sizing.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Width and height
 
 @each $prop, $abbrev in (width: w, height: h) {
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index 150d316312..b2e2354b12 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 7573f2987e..f4b6e65e55 100644
--- a/scss/utilities/_text.scss
+++ b/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; }