Replace scss_lint with stylelint

.stylelintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "scss/no-global-function-names": null,
+    "no-descending-specificity": null,
+    "scss/comment-no-empty": null,
+    "string-quotes": null,
+    "declaration-empty-line-before": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "selector-list-comma-newline-after": null,
+    "declaration-block-single-line-max-declarations": null,
+    "max-line-length": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "declaration-colon-newline-after": null,
+    "color-hex-length": null,
+    "function-url-quotes": null,
+    "alpha-value-notation": "number",
+    "number-leading-zero": "never",
+    "color-function-notation": "legacy",
+    "selector-class-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$"
+  }
+}

Gemfile

@@ -126,7 +126,6 @@ group :test do
   gem 'rack-test', '>= 1.1.0'
   gem 'rails-controller-testing', '>= 1.0.4'
   gem 'rspec-retry'
-  gem 'scss_lint', require: false
   gem 'shoulda-matchers', '~> 4.0', require: false
   gem 'webdrivers', '~> 4.0'
   gem 'webmock'

Gemfile.lock

@@ -557,11 +557,6 @@ GEM
       errbase (>= 0.1.1)
     safety_net_attestation (0.4.0)
       jwt (~> 2.0)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -575,8 +570,6 @@ GEM
       faraday (> 0.8, < 2.0)
     scrypt (3.0.7)
       ffi-compiler (>= 1.0, < 2.0)
-    scss_lint (0.59.0)
-      sass (~> 3.5, >= 3.5.5)
     secure_headers (6.3.3)
     securecompare (1.0.0)
     selenium-webdriver (3.142.7)
@@ -774,7 +767,6 @@ DEPENDENCIES
   saml_idp!
   sassc-rails (~> 2.1.2)
   scrypt
-  scss_lint
   secure_headers (~> 6.3)
   shoulda-matchers (~> 4.0)
   simple_form (>= 5.0.2)

Makefile

@@ -47,8 +47,8 @@ lint:
 	make lint_yaml
 	@echo "--- check assets are optimized ---"
 	make lint_optimized_assets
-	@echo "--- scss-lint ---"
-	bundle exec scss-lint
+	@echo "--- stylelint ---"
+	yarn run stylelint app/assets/stylesheets/**/*.scss app/javascript/**/*.scss
 
 lint_erb:
 	bundle exec erblint app/views app/components

app/assets/stylesheets/components/_file-input.scss

@@ -1,6 +1,6 @@
-//================================================
+// ===============================================
 // Pending upstream Login Design System revisions:
-//================================================
+// ===============================================
 
 .usa-file-input__input {
   outline-offset: 2px;

app/assets/stylesheets/components/_footer.scss

@@ -21,4 +21,3 @@ html {
 .site-wrap {
   flex: 1 0 auto; // 2
 }
-

app/assets/stylesheets/components/_form.scss

@@ -26,7 +26,7 @@ textarea {
   color: $gray;
   font-weight: $bold-font-weight;
 
-  &[type=number],
+  &[type="number"],
   &.phone {
     font-family: $monospace-font-family;
   }
@@ -45,6 +45,7 @@ textarea {
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: none;
   margin: 0;
 }
@@ -69,9 +70,9 @@ input::-webkit-inner-spin-button {
   font-style: italic;
 }
 
-//================================================
+// ===============================================
 // Pending upstream Login Design System revisions:
-//================================================
+// ===============================================
 
 .usa-form-group--error {
   border-left-style: none;

app/assets/stylesheets/components/_full-screen.scss

@@ -31,7 +31,7 @@
   width: 1rem;
 }
 
-//css for alternative fallback flow, that should hopefully be quickly retired
+// css for alternative fallback flow, that should hopefully be quickly retired
 .full-screen-fallback {
   background-color: #ffffff;
   height: 100%;

app/assets/stylesheets/components/_i18n-dropdown.scss

@@ -5,7 +5,7 @@
 
   &:hover {
     text-decoration: underline;
-  };
+  }
 }
 
 .i18n-mobile-toggle,

app/assets/stylesheets/components/_list.scss

@@ -46,11 +46,11 @@
 }
 
 .red-dots {
-  @include color-list($red)
+  @include color-list($red);
 }
 
 .teal-dots {
-  @include color-list($teal)
+  @include color-list($teal);
 }
 
 .yellow-dots {

app/assets/stylesheets/components/_modal.scss

@@ -77,9 +77,7 @@
     hr {
       width: 5rem;
     }
-
   }
-
 }
 
 @media #{$breakpoint-sm} {

app/assets/stylesheets/components/_page-heading.scss

@@ -9,7 +9,7 @@
 // 2. The focus styling is specific to non-interactive content not included in regular tab order,
 //    expected to be used only for programmatic fallback, and with exception to allow supported
 //    `:focus-visible` to restore identified indicator.
-h1[tabindex="-1"].page-heading:focus { // scss-lint:disable QualifyingElement
+h1[tabindex="-1"].page-heading:focus {
   outline: none;
 
   &:focus-visible {

app/assets/stylesheets/components/_phone-input.scss

@@ -24,6 +24,7 @@ lg-phone-input {
   right: auto;
 }
 
+/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   lg-phone-input .iti__flag {
     background-image: image-url('intl-tel-input/build/img/flags@2x.png');

app/assets/stylesheets/email.css.scss

@@ -1,6 +1,5 @@
 @import 'variables/colors';
 @import 'variables/email';
-
 @import 'foundation-emails';
 
 .gray {
@@ -108,10 +107,8 @@ h4 {
 }
 
 @media only screen and (max-width: #{$global-breakpoint}) {
-  // scss-lint:disable QualifyingElement
   table.body .columns,
   table.body .column {
-    // scss-lint:disable ImportantRule
     padding-left: $global-gutter-small !important;
     padding-right: $global-gutter-small !important;
   }

app/assets/stylesheets/utilities/_typography.scss

@@ -20,20 +20,18 @@ body { -webkit-font-smoothing: antialiased; }
 .line-height-4 { line-height: $line-height-4; }
 
 // given how similar & coupled these are, single line preferred
-// scss-lint:disable SingleLinePerSelector, SpaceBeforeBrace
 h1, .h1 { font-size: $h1; }
 h2, .h2 { font-size: $h2; }
-h3      { font-size: $h3; }
+h3 { font-size: $h3; }
 h4, .h4 { font-size: $h4; }
 h5, .h5 { font-size: $h5; }
 h6, .h6 { font-size: $h6; }
 
 @media #{$breakpoint-sm} {
   h1, .h1 { font-size: $sm-h1; }
   h2, .h2 { font-size: $sm-h2; }
-  h3      { font-size: $sm-h3; }
+  h3 { font-size: $sm-h3; }
   h4, .h4 { font-size: $sm-h4; }
   h5, .h5 { font-size: $sm-h5; }
   h6, .h6 { font-size: $sm-h6; }
 }
-// scss-lint:enable SingleLinePerSelector, SpaceBeforeBrace

app/assets/stylesheets/utilities/_util.scss

@@ -19,15 +19,13 @@
   margin: 0 auto;
 }
 
-// scss-lint:disable QualifyingElement
 html.no-js .js {
   display: none;
 }
 
 html.js .no-js {
   display: none;
 }
-// scss-lint:enable QualifyingElement
 
 .scale-down {
   // trigger anti-aliasing in chrome

app/assets/stylesheets/variables/_app.scss

@@ -1,6 +1,6 @@
 $serif-font-family: "Merriweather Web", "Georgia", "Cambria", "Times New Roman", "Times", serif !default;
 $sans-serif-font-family: "Source Sans Pro Web", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif !default;
-$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
+$monospace-font-family: 'Source Code Pro', 'Consolas', monospace !default;
 
 $base-font-size: 16px !default;
 $small-font-size: 14px !default;

app/assets/stylesheets/variables/_email.scss

@@ -12,7 +12,6 @@
 //   7. Menu
 //   8. Thumbnail
 
-
 // 1. Global
 // ---------
 
@@ -54,7 +53,7 @@ $block-grid-gutter: $global-gutter;
 // -------------
 
 $global-font-color: $gray;
-$body-font-family: Arial, Helvetica, sans-serif;
+$body-font-family: 'Arial', 'Helvetica', sans-serif;
 $global-font-weight: normal;
 $header-color: inherit;
 $global-line-height: 1.3;

app/javascript/packages/document-capture/components/acuant-capture.scss

@@ -11,8 +11,7 @@
     @include u-margin-top(1);
     position: relative;
 
-    // Note: Lint disable is no longer necessary after above ID specifier is removed.
-    .usa-file-input__target { // scss-lint:disable SelectorDepth
+    .usa-file-input__target {
       align-items: center;
       bottom: 0;
       display: flex;

app/javascript/packages/document-capture/components/selfie-capture.scss

@@ -52,7 +52,7 @@
 // non-interactive content not included in regular tab order, expected to be used only for
 // programmatic fallback, and with exception to allow supported `:focus-visible` to restore
 // identified indicator.
-div.selfie-capture__label[tabindex="-1"]:focus { // scss-lint:disable QualifyingElement
+div.selfie-capture__label[tabindex="-1"]:focus {
   outline: none;
 
   &:focus-visible {

docs/frontend.md

@@ -9,7 +9,7 @@
   - if the markup for something is defined multiple times across templates,
     it should be consolidated to a single place
 - leverages elements from the U.S. Web Design Standards (i.e., fonts, colors)
-- uses Sass as the CSS preprocessor and `scss-lint` to keep files tidy
+- uses Sass as the CSS preprocessor and `stylelint` to keep files tidy
 - uses well structured, accessible, semantic HTML
 
 ## JavaScript

package.json

@@ -62,6 +62,9 @@
     "sinon-chai": "^3.5.0",
     "svgo": "^1.3.2",
     "typescript": "^4.1.3",
+    "stylelint": "^14.1.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "postcss": "^8.3.3",
     "webpack": "^4.46.0",
     "webpack-dev-server": "^3.11.1"
   }