From e82257eaa1911cee7b32b0783ad99a0ef0a3b201 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 7 May 2024 10:13:37 -0400 Subject: [PATCH 1/5] Replace stylelint-config-recommended-scss with stylelint-config-standard-scss changelog: Internal, Build Tools, Replace stylelint-config-recommended-scss with stylelint-config-standard-scss --- .../packages/stylelint-config/CHANGELOG.md | 14 ++++++++++++++ app/javascript/packages/stylelint-config/index.js | 7 ++++++- .../packages/stylelint-config/package.json | 2 +- yarn.lock | 15 +++++++++++++++ 4 files changed, 36 insertions(+), 2 deletions(-) diff --git a/app/javascript/packages/stylelint-config/CHANGELOG.md b/app/javascript/packages/stylelint-config/CHANGELOG.md index 2a5a39a2ff2..bbf4c3f0cc9 100644 --- a/app/javascript/packages/stylelint-config/CHANGELOG.md +++ b/app/javascript/packages/stylelint-config/CHANGELOG.md @@ -1,3 +1,17 @@ +## 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) + ## 4.1.0 ### Improvements diff --git a/app/javascript/packages/stylelint-config/index.js b/app/javascript/packages/stylelint-config/index.js index ab619801401..023b81cc916 100644 --- a/app/javascript/packages/stylelint-config/index.js +++ b/app/javascript/packages/stylelint-config/index.js @@ -1,8 +1,13 @@ 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, + '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 index 982834f05e1..4f3e7eb1474 100644 --- a/app/javascript/packages/stylelint-config/package.json +++ b/app/javascript/packages/stylelint-config/package.json @@ -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 index a0aabdb5885..7b9c82256b5 100644 --- 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" From a5e14181e4a6d73cebc3794e3dcad77c6eeaaec2 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 7 May 2024 10:23:35 -0400 Subject: [PATCH 2/5] Disable color-function-notation Due to Sass incompatibilities See: https://github.com/sass/sass/issues/2831 --- app/javascript/packages/stylelint-config/CHANGELOG.md | 1 + app/javascript/packages/stylelint-config/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/app/javascript/packages/stylelint-config/CHANGELOG.md b/app/javascript/packages/stylelint-config/CHANGELOG.md index bbf4c3f0cc9..3f1e47d46f3 100644 --- a/app/javascript/packages/stylelint-config/CHANGELOG.md +++ b/app/javascript/packages/stylelint-config/CHANGELOG.md @@ -11,6 +11,7 @@ - [`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)) ## 4.1.0 diff --git a/app/javascript/packages/stylelint-config/index.js b/app/javascript/packages/stylelint-config/index.js index 023b81cc916..16f79869db9 100644 --- a/app/javascript/packages/stylelint-config/index.js +++ b/app/javascript/packages/stylelint-config/index.js @@ -2,6 +2,7 @@ module.exports = { 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, From b0d271715685cbe672dc262bf2389bff492b3d3b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 7 May 2024 10:27:20 -0400 Subject: [PATCH 3/5] Fix lint errors --- .../stylesheets/components/_alert-icon.scss | 2 +- .../stylesheets/components/_block-link.scss | 5 +---- .../stylesheets/components/_full-screen.scss | 5 +---- .../stylesheets/components/_spinner-dots.scss | 2 +- .../stylesheets/components/_step-indicator.scss | 14 +++++++------- .../stylesheets/design-system-waiting-room.scss | 6 +++--- app/assets/stylesheets/tables-report.css.scss | 2 +- app/assets/stylesheets/variables/_email.scss | 4 ++-- app/components/icon_component.scss | 2 +- app/components/phone_input_component.scss | 2 +- app/components/security_key_image_component.scss | 16 ++++++++-------- app/components/webauthn_input_component.scss | 2 +- .../document-capture/components/_file-input.scss | 4 ++-- .../components/acuant-capture.scss | 5 +---- 14 files changed, 31 insertions(+), 40 deletions(-) diff --git a/app/assets/stylesheets/components/_alert-icon.scss b/app/assets/stylesheets/components/_alert-icon.scss index cf540a4686c..7ba7706c059 100644 --- 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 index 52fd59731a9..8cdffde641e 100644 --- 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 index 17f229fcc5b..637444a8110 100644 --- 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 index 9978f3f7d9d..bfe47990fef 100644 --- 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 index 3dbb4bac676..c9a4384a917 100644 --- 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 index 2c2ebb18ae7..69baa9cde87 100644 --- 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 index 75147b324d8..baf6228af1f 100644 --- 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 index aca2ac2c8f6..3ceaa4bde7f 100644 --- 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 index 49b41ae68f8..3184eec06eb 100644 --- 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 index b01bf036565..330bf4378da 100644 --- 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('/flags@2x.png'); } } diff --git a/app/components/security_key_image_component.scss b/app/components/security_key_image_component.scss index 654f2a41d8a..8046a088261 100644 --- a/app/components/security_key_image_component.scss +++ b/app/components/security_key_image_component.scss @@ -1,5 +1,5 @@ .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; @@ -7,7 +7,7 @@ } .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 index 46ab1ce833d..b6392df9874 100644 --- 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 index 8967e4e1f9a..1b40bc4e61e 100644 --- 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 index 2ed7922a445..c8e3335590a 100644 --- 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 { From cb5fa3fa18cb87148cba1ecc8bef6a8e8c3d74ed Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 7 May 2024 10:35:19 -0400 Subject: [PATCH 4/5] Bump version to 5.0.0-beta.1 --- app/javascript/packages/stylelint-config/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/packages/stylelint-config/package.json b/app/javascript/packages/stylelint-config/package.json index 4f3e7eb1474..48aad324190 100644 --- 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": { From c5b09bcfeae7dbfb4759dae2910ad34159ba5700 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 7 May 2024 10:37:02 -0400 Subject: [PATCH 5/5] Move reportNeedlessDisables into shared configuration --- .stylelintrc.json | 3 +-- app/javascript/packages/stylelint-config/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index e216e395d45..d975da860ba 100644 --- 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/javascript/packages/stylelint-config/CHANGELOG.md b/app/javascript/packages/stylelint-config/CHANGELOG.md index 3f1e47d46f3..93fb812367e 100644 --- a/app/javascript/packages/stylelint-config/CHANGELOG.md +++ b/app/javascript/packages/stylelint-config/CHANGELOG.md @@ -12,6 +12,7 @@ - [`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