Skip to content

Commit 94e38cb

Browse files
aduthaduth
authored
Replace stylelint-config-recommended-scss with stylelint-config-standard (#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
1 parent a349b66 commit 94e38cb

19 files changed

+72
-45
lines changed

‎.stylelintrc.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
22
"extends": "@18f/identity-stylelint-config",
3-
"ignoreFiles": "**/fixtures/**/*",
4-
"reportNeedlessDisables": true
3+
"ignoreFiles": "**/fixtures/**/*"
54
}

‎app/assets/stylesheets/components/_alert-icon.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
.alert-icon--centered-top {
88
position: absolute;
99
left: 50%;
10-
top: 0px;
10+
top: 0;
1111
transform: translate(-50%, -50%);
1212
}

‎app/assets/stylesheets/components/_block-link.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,10 @@
2424
&::before {
2525
@include u-border('1px', 'primary');
2626
border-radius: 6px;
27-
bottom: 0;
27+
inset: 0 units(-1) 0 units(-1);
2828
content: '';
29-
left: units(-1);
3029
pointer-events: none;
3130
position: absolute;
32-
right: units(-1);
33-
top: 0;
3431
}
3532
}
3633
}

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,8 @@
55
}
66

77
.full-screen {
8-
bottom: 0;
9-
left: 0;
8+
inset: 0;
109
position: fixed;
11-
right: 0;
12-
top: 0;
1310
z-index: 1000;
1411
}
1512

‎app/assets/stylesheets/components/_spinner-dots.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
animation-iteration-count: infinite;
6666
animation-timing-function: linear;
6767
animation-delay: 0.01s; // See: https://stackoverflow.com/a/40028240
68-
background-color: currentColor;
68+
background-color: currentcolor;
6969
border-radius: 50%;
7070
content: '';
7171
display: block;

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $step-indicator-line-height: 4px;
66
lg-step-indicator {
77
display: block;
88
border-bottom: 1px solid color('primary-light');
9-
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
9+
box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
1010
margin-bottom: units(4);
1111
position: relative;
1212

@@ -29,9 +29,9 @@ lg-step-indicator {
2929
&::before {
3030
background: linear-gradient(
3131
to right,
32-
rgba(255, 255, 255, 1),
33-
rgba(255, 255, 255, 1) 17%,
34-
rgba(255, 255, 255, 0)
32+
rgb(255 255 255 / 100%),
33+
rgb(255 255 255 / 100%) 17%,
34+
rgb(255 255 255 / 0%)
3535
);
3636
left: 0;
3737
z-index: 1;
@@ -40,9 +40,9 @@ lg-step-indicator {
4040
&::after {
4141
background: linear-gradient(
4242
to left,
43-
rgba(255, 255, 255, 1),
44-
rgba(255, 255, 255, 1) 17%,
45-
rgba(255, 255, 255, 0)
43+
rgb(255 255 255 / 100%),
44+
rgb(255 255 255 / 100%) 17%,
45+
rgb(255 255 255 / 0%)
4646
);
4747
right: 0;
4848
}

‎app/assets/stylesheets/design-system-waiting-room.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// To be removed once design system incorporates styles included below.
22

3-
//basscss-base-typography
4-
//------------------------------------------------
3+
// basscss-base-typography
4+
// ------------------------------------------------
55
h1,
66
h2,
77
h3,
@@ -18,7 +18,7 @@ ul {
1818
}
1919

2020
// basscss-utility-typography
21-
//------------------------------------------------
21+
// ------------------------------------------------
2222
.break-word {
2323
word-wrap: break-word;
2424
}

‎app/assets/stylesheets/tables-report.css.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
.usa-alert.usa-alert--info.usa-alert--email {
1212
.usa-alert__body {
13-
&:before {
13+
&::before {
1414
background-image: url('email/info.png');
1515
}
1616
}

‎app/assets/stylesheets/variables/_email.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ $success-color: #3adb76;
2121
$warning-color: #ffae00;
2222
$alert-color: #ec5840;
2323
$light-gray: #f3f3f3;
24-
$black: #111111;
25-
$white: #ffffff;
24+
$black: #111;
25+
$white: #fff;
2626
$gray: #5b616a;
2727
$medium-gray: #cacaca;
2828
$dark-gray: #212121;

‎app/components/icon_component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55

66
.icon {
77
mask-size: 100%;
8-
background-color: currentColor;
8+
background-color: currentcolor;
99
}

‎app/components/phone_input_component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ lg-phone-input {
1010
.iti__flag {
1111
background-image: url('/flags.png');
1212

13-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
13+
@media (resolution >= 2x) {
1414
background-image: url('/[email protected]');
1515
}
1616
}

‎app/components/security_key_image_component.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.security-key-image__key {
2-
animation: security-key-image__key__move 4s ease-in-out infinite;
2+
animation: security-key-image-key-move 4s ease-in-out infinite;
33

44
@media (prefers-reduced-motion) {
55
animation: none;
66
}
77
}
88

99
.security-key-image__arrow {
10-
animation: security-key-image__arrow__move 4s ease-in-out infinite;
10+
animation: security-key-image-arrow-move 4s ease-in-out infinite;
1111

1212
@media (prefers-reduced-motion) {
1313
animation: none;
@@ -16,15 +16,15 @@
1616

1717
.security-key--mobile {
1818
.security-key-image__key {
19-
animation-name: security-key-image__key__move__mobile;
19+
animation-name: security-key-image-key-move-mobile;
2020
}
2121

2222
.security-key-image__arrow {
23-
animation-name: security-key-image__arrow__move__mobile;
23+
animation-name: security-key-image-arrow-move-mobile;
2424
}
2525
}
2626

27-
@keyframes security-key-image__key__move {
27+
@keyframes security-key-image-key-move {
2828
25% {
2929
transform: translate(0, 0);
3030
}
@@ -39,7 +39,7 @@
3939
}
4040
}
4141

42-
@keyframes security-key-image__key__move__mobile {
42+
@keyframes security-key-image-key-move-mobile {
4343
25% {
4444
transform: translate(0, 0);
4545
}
@@ -54,7 +54,7 @@
5454
}
5555
}
5656

57-
@keyframes security-key-image__arrow__move {
57+
@keyframes security-key-image-arrow-move {
5858
7.5% {
5959
transform: translate(0, 0);
6060
}
@@ -75,7 +75,7 @@
7575
}
7676
}
7777

78-
@keyframes security-key-image__arrow__move__mobile {
78+
@keyframes security-key-image-arrow-move-mobile {
7979
7.5% {
8080
transform: translate(0, 0);
8181
}

‎app/components/webauthn_input_component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.webauthn-input--unsupported-passkey .usa-checkbox__label {
2-
background: rgba(255, 0, 0, 0.1);
2+
background: rgb(255 0 0 / 10%);
33
}

‎app/javascript/packages/document-capture/components/_file-input.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010
outline-offset: 2px;
1111
}
1212

13-
.usa-file-input:not(.usa-file-input--has-value):not(.usa-file-input--value-pending)
13+
.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending)
1414
.usa-file-input__target,
1515
.usa-form-group--error .usa-file-input .usa-file-input__target,
1616
.usa-form-group--success .usa-file-input .usa-file-input__target {
1717
border-width: 3px;
1818
}
1919

20-
.usa-file-input:not(.usa-file-input--has-value):not(.usa-file-input--value-pending) {
20+
.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) {
2121
.usa-file-input__target {
2222
border-color: color('primary');
2323
border-radius: 0.375rem;

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,13 @@
1616

1717
.usa-file-input__target {
1818
align-items: center;
19-
bottom: 0;
19+
inset: 0;
2020
display: flex;
2121
flex-direction: column;
2222
height: 100%;
2323
justify-content: center;
24-
left: 0;
2524
margin-top: 0;
2625
position: absolute;
27-
right: 0;
28-
top: 0;
2926
}
3027

3128
&::after {

‎app/javascript/packages/stylelint-config/CHANGELOG.md

+16
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
## 5.0.0-beta.1
2+
3+
### Breaking Changes
4+
5+
- 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.
6+
- 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.
7+
- Many of these rules can be fixed automatically using [Stylelint's `--fix` option](https://stylelint.io/user-guide/options/#fix).
8+
- Some rules have been disabled to permit more flexibility in code arrangement, particularly rules affecting blank line enforcement with comments and Sass `@`-rules:
9+
- [`at-rule-empty-line-before`](https://stylelint.io/user-guide/rules/at-rule-empty-line-before/)
10+
- [`declaration-empty-line-before`](https://stylelint.io/user-guide/rules/declaration-empty-line-before/)
11+
- [`rule-empty-line-before`](https://stylelint.io/user-guide/rules/rule-empty-line-before/)
12+
- [`scss/dollar-variable-empty-line-before`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-empty-line-before/README.md)
13+
- [`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)
14+
- [`color-function-notation`](https://stylelint.io/user-guide/rules/color-function-notation/) (due to [Sass incompatibilities](https://github.com/sass/sass/issues/2831))
15+
- The ruleset now configures [`"reportNeedlessDisables": true`](https://stylelint.io/user-guide/options/#reportneedlessdisables), which will report inline configuration that disables rules unnecessarily.
16+
117
## 4.1.0
218

319
### Improvements

‎app/javascript/packages/stylelint-config/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
module.exports = {
2-
extends: ['stylelint-config-recommended-scss', 'stylelint-prettier/recommended'],
2+
extends: ['stylelint-config-standard-scss', 'stylelint-prettier/recommended'],
33
rules: {
4+
'at-rule-empty-line-before': null,
5+
'color-function-notation': null,
6+
'declaration-empty-line-before': null,
47
'no-descending-specificity': null,
8+
'rule-empty-line-before': null,
59
'scss/comment-no-empty': null,
10+
'scss/dollar-variable-empty-line-before': null,
11+
'scss/double-slash-comment-empty-line-before': null,
612
'scss/no-global-function-names': null,
713
'scss/operator-no-newline-after': null,
814
'scss/operator-no-newline-before': null,

‎app/javascript/packages/stylelint-config/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@18f/identity-stylelint-config",
3-
"version": "4.1.0",
3+
"version": "5.0.0-beta.1",
44
"private": false,
55
"description": "Stylelint shareable configuration for Login.gov CSS/SASS standards",
66
"exports": {
@@ -20,7 +20,7 @@
2020
},
2121
"homepage": "https://github.com/18f/identity-idp",
2222
"dependencies": {
23-
"stylelint-config-recommended-scss": "^14.0.0",
23+
"stylelint-config-standard-scss": "^13.1.0",
2424
"stylelint-prettier": "^5.0.0"
2525
},
2626
"peerDependencies": {

‎yarn.lock

+15
Original file line numberDiff line numberDiff line change
@@ -6467,6 +6467,21 @@ stylelint-config-recommended@^14.0.0:
64676467
resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz#b395c7014838d2aaca1755eebd914d0bb5274994"
64686468
integrity sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==
64696469

6470+
stylelint-config-standard-scss@^13.1.0:
6471+
version "13.1.0"
6472+
resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz#2be36ca13087325a42c1f26df8267808667cc886"
6473+
integrity sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==
6474+
dependencies:
6475+
stylelint-config-recommended-scss "^14.0.0"
6476+
stylelint-config-standard "^36.0.0"
6477+
6478+
stylelint-config-standard@^36.0.0:
6479+
version "36.0.0"
6480+
resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz#6704c044d611edc12692d4a5e37b039a441604d4"
6481+
integrity sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==
6482+
dependencies:
6483+
stylelint-config-recommended "^14.0.0"
6484+
64706485
stylelint-prettier@^5.0.0:
64716486
version "5.0.0"
64726487
resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-5.0.0.tgz#515a87800228f6bea603966462f7119755ee9b82"

0 commit comments

Comments
 (0)