Replace stylelint-config-recommended-scss with stylelint-config-stand…

…ard (#10564) * Replace stylelint-config-recommended-scss with stylelint-config-standard-scss changelog: Internal, Build Tools, Replace stylelint-config-recommended-scss with stylelint-config-standard-scss * Disable color-function-notation Due to Sass incompatibilities See: sass/sass#2831 * Fix lint errors * Bump version to 5.0.0-beta.1 * Move reportNeedlessDisables into shared configuration
18F · May 7, 2024 · 94e38cb · 94e38cb
1 parent a349b66
commit 94e38cb
Show file tree

Hide file tree

Showing 19 changed files with 72 additions and 45 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,4 @@
 {
   "extends": "@18f/identity-stylelint-config",
-  "ignoreFiles": "**/fixtures/**/*",
-  "reportNeedlessDisables": true
+  "ignoreFiles": "**/fixtures/**/*"
 }
diff --git a/app/assets/stylesheets/components/_alert-icon.scss b/app/assets/stylesheets/components/_alert-icon.scss
@@ -7,6 +7,6 @@
 .alert-icon--centered-top {
   position: absolute;
   left: 50%;
-  top: 0px;
+  top: 0;
   transform: translate(-50%, -50%);
 }
diff --git a/app/assets/stylesheets/components/_block-link.scss b/app/assets/stylesheets/components/_block-link.scss
@@ -24,13 +24,10 @@
     &::before {
       @include u-border('1px', 'primary');
       border-radius: 6px;
-      bottom: 0;
+      inset: 0 units(-1) 0 units(-1);
       content: '';
-      left: units(-1);
       pointer-events: none;
       position: absolute;
-      right: units(-1);
-      top: 0;
     }
   }
 }

diff --git a/app/assets/stylesheets/components/_full-screen.scss b/app/assets/stylesheets/components/_full-screen.scss
@@ -5,11 +5,8 @@
 }
 
 .full-screen {
-  bottom: 0;
-  left: 0;
+  inset: 0;
   position: fixed;
-  right: 0;
-  top: 0;
   z-index: 1000;
 }
 

diff --git a/app/assets/stylesheets/components/_spinner-dots.scss b/app/assets/stylesheets/components/_spinner-dots.scss
@@ -65,7 +65,7 @@
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     animation-delay: 0.01s; // See: https://stackoverflow.com/a/40028240
-    background-color: currentColor;
+    background-color: currentcolor;
     border-radius: 50%;
     content: '';
     display: block;

diff --git a/app/assets/stylesheets/components/_step-indicator.scss b/app/assets/stylesheets/components/_step-indicator.scss
@@ -6,7 +6,7 @@ $step-indicator-line-height: 4px;
 lg-step-indicator {
   display: block;
   border-bottom: 1px solid color('primary-light');
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
   margin-bottom: units(4);
   position: relative;
 
@@ -29,9 +29,9 @@ lg-step-indicator {
     &::before {
       background: linear-gradient(
         to right,
-        rgba(255, 255, 255, 1),
-        rgba(255, 255, 255, 1) 17%,
-        rgba(255, 255, 255, 0)
+        rgb(255 255 255 / 100%),
+        rgb(255 255 255 / 100%) 17%,
+        rgb(255 255 255 / 0%)
       );
       left: 0;
       z-index: 1;
@@ -40,9 +40,9 @@ lg-step-indicator {
     &::after {
       background: linear-gradient(
         to left,
-        rgba(255, 255, 255, 1),
-        rgba(255, 255, 255, 1) 17%,
-        rgba(255, 255, 255, 0)
+        rgb(255 255 255 / 100%),
+        rgb(255 255 255 / 100%) 17%,
+        rgb(255 255 255 / 0%)
       );
       right: 0;
     }

diff --git a/app/assets/stylesheets/design-system-waiting-room.scss b/app/assets/stylesheets/design-system-waiting-room.scss
@@ -1,7 +1,7 @@
 // To be removed once design system incorporates styles included below.
 
-//basscss-base-typography
-//------------------------------------------------
+// basscss-base-typography
+// ------------------------------------------------
 h1,
 h2,
 h3,
@@ -18,7 +18,7 @@ ul {
 }
 
 // basscss-utility-typography
-//------------------------------------------------
+// ------------------------------------------------
 .break-word {
   word-wrap: break-word;
 }

diff --git a/app/assets/stylesheets/tables-report.css.scss b/app/assets/stylesheets/tables-report.css.scss
@@ -10,7 +10,7 @@
 
 .usa-alert.usa-alert--info.usa-alert--email {
   .usa-alert__body {
-    &:before {
+    &::before {
       background-image: url('email/info.png');
     }
   }

diff --git a/app/assets/stylesheets/variables/_email.scss b/app/assets/stylesheets/variables/_email.scss
@@ -21,8 +21,8 @@ $success-color: #3adb76;
 $warning-color: #ffae00;
 $alert-color: #ec5840;
 $light-gray: #f3f3f3;
-$black: #111111;
-$white: #ffffff;
+$black: #111;
+$white: #fff;
 $gray: #5b616a;
 $medium-gray: #cacaca;
 $dark-gray: #212121;

diff --git a/app/components/icon_component.scss b/app/components/icon_component.scss
@@ -5,5 +5,5 @@
 
 .icon {
   mask-size: 100%;
-  background-color: currentColor;
+  background-color: currentcolor;
 }
diff --git a/app/components/phone_input_component.scss b/app/components/phone_input_component.scss
@@ -10,7 +10,7 @@ lg-phone-input {
   .iti__flag {
     background-image: url('/flags.png');
 
-    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @media (resolution >= 2x) {
       background-image: url('/[email protected]');
     }
   }

diff --git a/app/components/security_key_image_component.scss b/app/components/security_key_image_component.scss
@@ -1,13 +1,13 @@
 .security-key-image__key {
-  animation: security-key-image__key__move 4s ease-in-out infinite;
+  animation: security-key-image-key-move 4s ease-in-out infinite;
 
   @media (prefers-reduced-motion) {
     animation: none;
   }
 }
 
 .security-key-image__arrow {
-  animation: security-key-image__arrow__move 4s ease-in-out infinite;
+  animation: security-key-image-arrow-move 4s ease-in-out infinite;
 
   @media (prefers-reduced-motion) {
     animation: none;
@@ -16,15 +16,15 @@
 
 .security-key--mobile {
   .security-key-image__key {
-    animation-name: security-key-image__key__move__mobile;
+    animation-name: security-key-image-key-move-mobile;
   }
 
   .security-key-image__arrow {
-    animation-name: security-key-image__arrow__move__mobile;
+    animation-name: security-key-image-arrow-move-mobile;
   }
 }
 
-@keyframes security-key-image__key__move {
+@keyframes security-key-image-key-move {
   25% {
     transform: translate(0, 0);
   }
@@ -39,7 +39,7 @@
   }
 }
 
-@keyframes security-key-image__key__move__mobile {
+@keyframes security-key-image-key-move-mobile {
   25% {
     transform: translate(0, 0);
   }
@@ -54,7 +54,7 @@
   }
 }
 
-@keyframes security-key-image__arrow__move {
+@keyframes security-key-image-arrow-move {
   7.5% {
     transform: translate(0, 0);
   }
@@ -75,7 +75,7 @@
   }
 }
 
-@keyframes security-key-image__arrow__move__mobile {
+@keyframes security-key-image-arrow-move-mobile {
   7.5% {
     transform: translate(0, 0);
   }

diff --git a/app/components/webauthn_input_component.scss b/app/components/webauthn_input_component.scss
@@ -1,3 +1,3 @@
 .webauthn-input--unsupported-passkey .usa-checkbox__label {
-  background: rgba(255, 0, 0, 0.1);
+  background: rgb(255 0 0 / 10%);
 }
diff --git a/app/javascript/packages/document-capture/components/_file-input.scss b/app/javascript/packages/document-capture/components/_file-input.scss
@@ -10,14 +10,14 @@
   outline-offset: 2px;
 }
 
-.usa-file-input:not(.usa-file-input--has-value):not(.usa-file-input--value-pending)
+.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending)
   .usa-file-input__target,
 .usa-form-group--error .usa-file-input .usa-file-input__target,
 .usa-form-group--success .usa-file-input .usa-file-input__target {
   border-width: 3px;
 }
 
-.usa-file-input:not(.usa-file-input--has-value):not(.usa-file-input--value-pending) {
+.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) {
   .usa-file-input__target {
     border-color: color('primary');
     border-radius: 0.375rem;

diff --git a/app/javascript/packages/document-capture/components/acuant-capture.scss b/app/javascript/packages/document-capture/components/acuant-capture.scss
@@ -16,16 +16,13 @@
 
     .usa-file-input__target {
       align-items: center;
-      bottom: 0;
+      inset: 0;
       display: flex;
       flex-direction: column;
       height: 100%;
       justify-content: center;
-      left: 0;
       margin-top: 0;
       position: absolute;
-      right: 0;
-      top: 0;
     }
 
     &::after {

diff --git a/app/javascript/packages/stylelint-config/CHANGELOG.md b/app/javascript/packages/stylelint-config/CHANGELOG.md
@@ -1,3 +1,19 @@
+## 5.0.0-beta.1
+
+### Breaking Changes
+
+- The ruleset now extends [`stylelint-config-standard-scss`](https://github.com/stylelint-scss/stylelint-config-standard-scss) instead of [`stylelint-config-recommended-scss`](https://github.com/stylelint-scss/stylelint-config-recommended-scss). This configures a number of additional rules which may identify existing issues in your code.
+  - This is intended to bring the ruleset into closer alignment with the [TTS Engineering CSS Coding Standards](https://guides.18f.gov/engineering/languages-runtimes/css/), which recommends the "standard" Stylelint rules.
+  - Many of these rules can be fixed automatically using [Stylelint's `--fix` option](https://stylelint.io/user-guide/options/#fix).
+  - Some rules have been disabled to permit more flexibility in code arrangement, particularly rules affecting blank line enforcement with comments and Sass `@`-rules:
+    - [`at-rule-empty-line-before`](https://stylelint.io/user-guide/rules/at-rule-empty-line-before/)
+    - [`declaration-empty-line-before`](https://stylelint.io/user-guide/rules/declaration-empty-line-before/)
+    - [`rule-empty-line-before`](https://stylelint.io/user-guide/rules/rule-empty-line-before/)
+    - [`scss/dollar-variable-empty-line-before`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-empty-line-before/README.md)
+    - [`scss/double-slash-comment-empty-line-before`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/double-slash-comment-empty-line-before/README.md)
+    - [`color-function-notation`](https://stylelint.io/user-guide/rules/color-function-notation/) (due to [Sass incompatibilities](https://github.com/sass/sass/issues/2831))
+- The ruleset now configures [`"reportNeedlessDisables": true`](https://stylelint.io/user-guide/options/#reportneedlessdisables), which will report inline configuration that disables rules unnecessarily.
+
 ## 4.1.0
 
 ### Improvements

diff --git a/app/javascript/packages/stylelint-config/index.js b/app/javascript/packages/stylelint-config/index.js
@@ -1,8 +1,14 @@
 module.exports = {
-  extends: ['stylelint-config-recommended-scss', 'stylelint-prettier/recommended'],
+  extends: ['stylelint-config-standard-scss', 'stylelint-prettier/recommended'],
   rules: {
+    'at-rule-empty-line-before': null,
+    'color-function-notation': null,
+    'declaration-empty-line-before': null,
     'no-descending-specificity': null,
+    'rule-empty-line-before': null,
     'scss/comment-no-empty': null,
+    'scss/dollar-variable-empty-line-before': null,
+    'scss/double-slash-comment-empty-line-before': null,
     'scss/no-global-function-names': null,
     'scss/operator-no-newline-after': null,
     'scss/operator-no-newline-before': null,

diff --git a/app/javascript/packages/stylelint-config/package.json b/app/javascript/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@18f/identity-stylelint-config",
-  "version": "4.1.0",
+  "version": "5.0.0-beta.1",
   "private": false,
   "description": "Stylelint shareable configuration for Login.gov CSS/SASS standards",
   "exports": {
@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/18f/identity-idp",
   "dependencies": {
-    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0"
   },
   "peerDependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -6467,6 +6467,21 @@ stylelint-config-recommended@^14.0.0:
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz#b395c7014838d2aaca1755eebd914d0bb5274994"
   integrity sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==
 
+stylelint-config-standard-scss@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz#2be36ca13087325a42c1f26df8267808667cc886"
+  integrity sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==
+  dependencies:
+    stylelint-config-recommended-scss "^14.0.0"
+    stylelint-config-standard "^36.0.0"
+
+stylelint-config-standard@^36.0.0:
+  version "36.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz#6704c044d611edc12692d4a5e37b039a441604d4"
+  integrity sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==
+  dependencies:
+    stylelint-config-recommended "^14.0.0"
+
 stylelint-prettier@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-5.0.0.tgz#515a87800228f6bea603966462f7119755ee9b82"