Extract Stylelint configuration for publish to NPM

.stylelintrc.json

@@ -1,22 +1,3 @@
 {
-  "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}$"
-  }
+  "extends": "@18f/identity-stylelint-config"
 }

app/assets/stylesheets/components/_btn.scss

@@ -4,14 +4,14 @@
   border: 0;
   color: $blue;
   display: inline-block;
-  font-size: .8125rem;
+  font-size: 0.8125rem;
   font-weight: normal;
   line-height: 1.375rem;
   margin-bottom: -3px;
   margin-top: -3px;
-  padding: .5rem;
-  padding-bottom: .125rem;
-  padding-top: .125rem;
+  padding: 0.5rem;
+  padding-bottom: 0.125rem;
+  padding-top: 0.125rem;
   text-decoration: none;
   vertical-align: middle;
   white-space: normal;

app/assets/stylesheets/components/_container.scss

@@ -1,7 +1,15 @@
-.cntnr-skinny { max-width: $container-skinny-width; }
-.cntnr-xskinny { max-width: $container-xskinny-width; }
-.cntnr-xxskinny { max-width: $container-xxskinny-width; }
+.cntnr-skinny {
+  max-width: $container-skinny-width;
+}
+.cntnr-xskinny {
+  max-width: $container-xskinny-width;
+}
+.cntnr-xxskinny {
+  max-width: $container-xxskinny-width;
+}
 
 @media #{$breakpoint-sm} {
-  .cntnr-xxskinny { max-width: $container-xskinny-width; }
+  .cntnr-xxskinny {
+    max-width: $container-xskinny-width;
+  }
 }

app/assets/stylesheets/components/_external-link.scss

@@ -11,7 +11,7 @@
 
   &::after,
   &.usa-link--alt::after {
-    margin-left: units(.5);
+    margin-left: units(0.5);
     margin-right: units(2px);
   }
 }

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

@@ -15,7 +15,7 @@
 .usa-file-input:not(.usa-file-input--has-value) {
   .usa-file-input__target {
     border-color: color('primary');
-    border-radius: .375rem;
+    border-radius: 0.375rem;
 
     &:hover {
       border-color: color('primary-dark');
@@ -45,7 +45,7 @@
   color: color('primary');
   display: block;
   font-size: 1.625rem;
-  letter-spacing: .4px;
+  letter-spacing: 0.4px;
   line-height: 1.5;
   // For content to appear as vertically centered, offset the larger line-height of the banner to
   // match the space below the drag text.

app/assets/stylesheets/components/_form.scss

@@ -26,14 +26,14 @@ textarea {
   color: $gray;
   font-weight: $bold-font-weight;
 
-  &[type="number"],
+  &[type='number'],
   &.phone {
     font-family: $monospace-font-family;
   }
 
   &:focus {
     border-color: $field-focus-color;
-    box-shadow: 0 0 0 2px rgba($field-focus-color, .5);
+    box-shadow: 0 0 0 2px rgba($field-focus-color, 0.5);
     outline: none;
   }
 
@@ -53,15 +53,15 @@ input::-webkit-inner-spin-button {
 .display-if-invalid {
   display: none;
 
-  [aria-invalid="true"] ~ & {
+  [aria-invalid='true'] ~ & {
     display: block;
   }
 
-  [aria-invalid="value-missing"] ~ &.display-if-invalid--value-missing {
+  [aria-invalid='value-missing'] ~ &.display-if-invalid--value-missing {
     display: block;
   }
 
-  [aria-invalid="pattern-mismatch"] ~ &.display-if-invalid--pattern-mismatch {
+  [aria-invalid='pattern-mismatch'] ~ &.display-if-invalid--pattern-mismatch {
     display: block;
   }
 }
@@ -97,8 +97,8 @@ input::-webkit-inner-spin-button {
 // Upstream: https://github.com/18F/identity-style-guide/pull/265
 .usa-error-message,
 .usa-success-message {
-  @include u-padding-y(.5);
-  background-position: 0 .5em;
+  @include u-padding-y(0.5);
+  background-position: 0 0.5em;
   background-repeat: no-repeat;
   background-size: units($icon-size);
   font-weight: font-weight('bold');

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

@@ -12,7 +12,7 @@
 }
 
 .full-screen-close-button {
-  background-color: rgba(color('base-darkest'), .7);
+  background-color: rgba(color('base-darkest'), 0.7);
   border-radius: 0;
   position: absolute;
   right: 0;
@@ -47,7 +47,7 @@
 
 .full-screen-close-icon-fallback {
   height: 1rem;
-  margin: .5rem;
+  margin: 0.5rem;
   width: 1rem;
 }
 

app/assets/stylesheets/components/_icon.scss

@@ -5,7 +5,7 @@
     content: '';
     display: inline-block;
     height: 1rem;
-    margin: -.125rem .5rem -.125rem 0;
+    margin: -0.125rem 0.5rem -0.125rem 0;
     width: 1rem;
   }
 

app/assets/stylesheets/components/_list.scss

@@ -11,7 +11,7 @@
       content: '•';
       font-size: 2rem;
       line-height: 1.5rem;
-      padding-right: .5rem;
+      padding-right: 0.5rem;
       vertical-align: -3px;
     }
   }
@@ -37,7 +37,7 @@
       display: inline-block;
       float: left;
       height: 1rem;
-      margin-top: .33rem;
+      margin-top: 0.33rem;
       padding-right: 1.5rem;
       vertical-align: middle;
       width: 1rem;

app/assets/stylesheets/components/_modal.scss

@@ -1,5 +1,5 @@
 .modal-backdrop {
-  background-color: rgba(91, 97, 106, .95);
+  background-color: rgba(91, 97, 106, 0.95);
   display: table;
   height: 100%;
   left: 0;

app/assets/stylesheets/components/_nav.scss

@@ -1,13 +1,17 @@
 .nav-branded {
   height: 56px;
 
-  a { line-height: 14px; }
+  a {
+    line-height: 14px;
+  }
 }
 
 .nav-nonbranded {
   height: 38px;
 
-  a { line-height: 14px; }
+  a {
+    line-height: 14px;
+  }
 }
 
 @media #{$breakpoint-sm} {
@@ -17,8 +21,12 @@
   }
 
   .nav-nonbranded {
-    a { line-height: 17px; }
-    img { height: 17px; }
+    a {
+      line-height: 17px;
+    }
+    img {
+      height: 17px;
+    }
   }
 }
 

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 {
+h1[tabindex='-1'].page-heading:focus {
   outline: none;
 
   &:focus-visible {

app/assets/stylesheets/components/_password.scss

@@ -16,17 +16,25 @@ $great: #00b200;
 }
 
 .pw-weak {
-  .pw-bar:nth-child(-n+1) { background-color: $weak; }
+  .pw-bar:nth-child(-n + 1) {
+    background-color: $weak;
+  }
 }
 
 .pw-so-so {
-  .pw-bar:nth-child(-n+2) { background-color: $so-so; }
+  .pw-bar:nth-child(-n + 2) {
+    background-color: $so-so;
+  }
 }
 
 .pw-good {
-  .pw-bar:nth-child(-n+3) { background-color: $good; }
+  .pw-bar:nth-child(-n + 3) {
+    background-color: $good;
+  }
 }
 
 .pw-great {
-  .pw-bar { background-color: $great; }
+  .pw-bar {
+    background-color: $great;
+  }
 }

app/assets/stylesheets/components/_personal-key.scss

@@ -18,7 +18,7 @@
     &::after {
       color: $silver;
       content: '-';
-      padding: 0 .25rem;
+      padding: 0 0.25rem;
     }
 
     &:last-child::after {
@@ -37,7 +37,7 @@
   .separator-text > div {
     &::after {
       color: #000;
-      padding: 0 .5rem;
+      padding: 0 0.5rem;
     }
   }
 }

app/assets/stylesheets/components/_spinner-button.scss

@@ -1,21 +1,43 @@
 @keyframes spinner-button-dot-one {
-  0% { transform: scale(0); }
-  25% { transform: scale(1); }
-  50% { transform: scale(0); }
+  0% {
+    transform: scale(0);
+  }
+  25% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0);
+  }
 }
 
 @keyframes spinner-button-dot-two {
-  0% { transform: scale(0); }
-  20% { transform: scale(0); }
-  45% { transform: scale(1); }
-  70% { transform: scale(0); }
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    transform: scale(0);
+  }
+  45% {
+    transform: scale(1);
+  }
+  70% {
+    transform: scale(0);
+  }
 }
 
 @keyframes spinner-button-dot-three {
-  0% { transform: scale(0); }
-  40% { transform: scale(0); }
-  65% { transform: scale(1); }
-  90% { transform: scale(0); }
+  0% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(0);
+  }
+  65% {
+    transform: scale(1);
+  }
+  90% {
+    transform: scale(0);
+  }
 }
 
 .spinner-button {
@@ -30,8 +52,8 @@
 
     a,
     button:not([type]),
-    [type="submit"],
-    [type="button"] {
+    [type='submit'],
+    [type='button'] {
       background-color: color('primary-darker');
       color: transparent;
       opacity: 1;

app/assets/stylesheets/components/_step-indicator.scss

@@ -4,7 +4,7 @@ $step-indicator-pending-color: #a8b6c6;
 
 .step-indicator {
   border-bottom: 1px solid color('primary-light');
-  box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
   margin-bottom: units(4);
   position: relative;
 
@@ -78,8 +78,8 @@ $step-indicator-pending-color: #a8b6c6;
 
 .step-indicator__step {
   flex: 0 0 33.33%;
-  font-size: .875rem;
-  padding: 1.5rem .25rem 0;
+  font-size: 0.875rem;
+  padding: 1.5rem 0.25rem 0;
   position: relative;
   text-align: center;
 
@@ -94,7 +94,7 @@ $step-indicator-pending-color: #a8b6c6;
   content: '';
   height: 1rem;
   left: 50%;
-  margin-left: -.5rem;
+  margin-left: -0.5rem;
   position: absolute;
   top: 0;
   width: 1rem;
@@ -118,10 +118,10 @@ $step-indicator-pending-color: #a8b6c6;
   background-color: color('base-lighter');
   content: '';
   height: $step-indicator-line-height;
-  left: calc(50% + .5rem + #{$step-indicator-line-height});
+  left: calc(50% + 0.5rem + #{$step-indicator-line-height});
   margin-top: -$step-indicator-line-height / 2;
   position: absolute;
-  top: .5rem;
+  top: 0.5rem;
   width: calc(100% - 1rem - #{$step-indicator-line-height * 2});
 }