Skip to content

Commit 6323733

Browse files
benhalversonbenhalverson
authored
scss linting (nodejs#1716)
* feat: 🎸 add linting support for scss files
1 parent 1c8ef58 commit 6323733

File tree

39 files changed

+26004
-33486
lines changed

39 files changed

+26004
-33486
lines changed

‎.stylelintrc.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
{
3+
"extends": [
4+
"stylelint-config-recommended-scss"
5+
],
6+
"plugins": [
7+
"stylelint-order",
8+
"stylelint-selector-bem-pattern"
9+
],
10+
"rules": {
11+
"order/properties-alphabetical-order": true,
12+
"no-descending-specificity": null
13+
}
14+
}

‎package-lock.json‎

Lines changed: 25545 additions & 32917 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,10 @@
7070
"test": "jest",
7171
"test-watch": "jest --watch",
7272
"test-ci": "npm run test -- --coverage",
73-
"lint": "npm run type-check && npm run lint:js && npm run lint:md",
73+
"lint": "npm run type-check && npm run lint:js && npm run lint:md && npm run lint:scss",
7474
"lint:js": "eslint .",
7575
"lint:md": "remark -qf .",
76+
"lint:scss": "stylelint --config ./.stylelintrc.json ./src/**/*.{css,sass,scss}",
7677
"lint:fix": "npm run lint -- --fix",
7778
"serve": "npm run build && clear && gatsby serve",
7879
"storybook": "start-storybook -p 6006",
@@ -120,7 +121,12 @@
120121
"prettier": "^2.3.2",
121122
"remark-cli": "^10.0.0",
122123
"remark-frontmatter": "^4.0.0",
123-
"remark-preset-lint-node": "^3.0.0"
124+
"remark-preset-lint-node": "^3.0.0",
125+
"stylelint": "^13.13.1",
126+
"stylelint-config-prettier": "^8.0.2",
127+
"stylelint-config-recommended-scss": "^4.3.0",
128+
"stylelint-config-sass-guidelines": "^8.0.0",
129+
"stylelint-selector-bem-pattern": "^2.1.1"
124130
},
125131
"repository": {
126132
"type": "git",

‎src/components/AnimatedPlaceholder/AnimatedPlaceholder.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,20 @@
2525
}
2626

2727
&__image {
28+
@extend .animated-background;
2829
height: 60px;
29-
min-width: 60px;
3030
margin-right: 5px;
31-
@extend .animated-background;
31+
min-width: 60px;
3232
}
3333

3434
&__text {
3535
width: 100%;
3636
}
3737

3838
&__text-line {
39+
@extend .animated-background;
3940
height: 10px;
40-
width: 100%;
4141
margin: 4px 0;
42-
@extend .animated-background;
42+
width: 100%;
4343
}
4444
}

‎src/components/Author/Author.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
}
1111

1212
.img {
13+
border: 1px solid var(--brand-light);
14+
border-radius: 100%;
1315
height: 30px;
14-
width: 30px;
1516
margin-top: 5px;
16-
border-radius: 100%;
17-
border: 1px solid var(--brand-light);
1817
transition: all 0.2s ease-in-out;
18+
width: 30px;
1919
}

‎src/components/Banner/Banner.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
.banner {
2-
position: relative;
3-
font-weight: bold;
42
background-color: var(--color-fill-top-banner);
5-
font-size: var(--font-size-display2);
6-
color: var(--color-text-primary);
73
border-radius: 5px;
8-
text-align: center;
4+
color: var(--color-text-primary);
5+
font-size: var(--font-size-display2);
6+
font-weight: bold;
97
padding-top: 5px;
8+
position: relative;
9+
text-align: center;
1010
}
1111

1212
.bannerButton {
13-
position: relative;
14-
margin-right: var(--space-32);
15-
border-radius: 5.6rem;
1613
background: var(--purple5);
14+
border: 1px solid transparent;
15+
border-radius: 5.6rem;
1716
color: var(--color-fill-top-nav);
18-
line-height: var(--line-height-subheading);
19-
text-decoration: none;
2017
font-family: var(--sans);
2118
font-style: normal;
2219
font-weight: var(--font-weight-semibold);
23-
border: 1px solid transparent;
20+
line-height: var(--line-height-subheading);
21+
margin-right: var(--space-32);
22+
position: relative;
23+
text-decoration: none;
2424
}
2525

2626
p {
27-
padding-top: var(--space-08);
2827
padding-bottom: var(--space-08);
28+
padding-top: var(--space-08);
2929
}

‎src/components/BlogAuthorsList/BlogAuthorsList.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
font-size: 1em;
33
margin-bottom: 40px;
44
span {
5-
margin: 0;
65
display: inline-block;
6+
margin: 0;
77
margin-left: 3px;
88
a {
99
display: inline-block;

‎src/components/BlogCard/BlogCard.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
.blogCard {
22
padding: 40px;
33
a {
4-
text-decoration: none;
54
font-size: 2em;
65
margin-bottom: 0;
6+
text-decoration: none;
77

88
&:hover {
99
text-decoration: underline;
1010
}
1111
}
1212

1313
h4 {
14-
opacity: 0.7;
1514
margin: 0;
1615
margin-top: 7px;
16+
opacity: 0.7;
1717
}
1818

1919
p {
2020
margin: 7px 0;
2121
opacity: 0.8;
2222

2323
li {
24-
list-style: none;
2524
display: inline;
25+
list-style: none;
2626
margin: 0 3px;
2727
}
2828
}

‎src/components/Codebox/Codebox.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,24 @@
88

99
span,
1010
button {
11-
width: 86px;
12-
height: 23px;
13-
font-size: var(--font-size-code);
14-
display: inherit;
1511
align-items: center;
12+
display: inherit;
13+
font-size: var(--font-size-code);
14+
height: 23px;
1615
justify-content: center;
16+
width: 86px;
1717
}
1818

1919
span {
20-
color: var(--black9);
2120
background-color: var(--black3);
2221
border-radius: 0 0 0.3rem 0.3rem;
22+
color: var(--black9);
2323
}
2424

2525
button {
26-
border-width: 0;
27-
border-radius: 0 0.3rem 0.3rem 0.3rem;
2826
background-color: var(--brand2);
27+
border-radius: 0 0.3rem 0.3rem 0.3rem;
28+
border-width: 0;
2929
i {
3030
padding: 0;
3131
}

‎src/components/DownloadAdditional/DownloadAdditional.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
$downloadable-item-height: 40px;
22

33
.download-additional {
4+
font-weight: var(--font-weight-semibold);
45
margin-top: 133px;
56
width: 100%;
6-
font-weight: var(--font-weight-semibold);
77

88
&__header {
99
display: flex;
@@ -24,57 +24,57 @@ $downloadable-item-height: 40px;
2424
}
2525

2626
&__item {
27+
border: 1px solid #d7d8df;
2728
display: flex;
2829
flex-direction: column;
29-
border: 1px solid #d7d8df;
30-
outline: none;
30+
height: $downloadable-item-height;
3131
margin-top: -1px; // Cancels overlapping borders extra thickness
32+
outline: none;
3233
padding: 16px 0 0 16px;
33-
height: $downloadable-item-height;
3434
transition: height 30ms ease-in;
3535

3636
&__expanded {
3737
height: auto;
3838
}
3939

4040
&__header {
41+
cursor: pointer;
4142
display: flex;
4243
flex-direction: row;
43-
cursor: pointer;
4444
&__arrow {
45+
height: 0;
4546
margin-right: 16px;
4647
width: 0;
47-
height: 0;
4848
&__right {
49-
margin-top: 6px;
50-
border-top: 5px solid transparent;
51-
border-left: 6px solid #757575;
5249
border-bottom: 5px solid transparent;
50+
border-left: 6px solid #757575;
5351
border-radius: 3px;
52+
border-top: 5px solid transparent;
53+
margin-top: 6px;
5454
}
5555
&__down {
56-
margin-top: 8px;
5756
border-left: 5px solid transparent;
58-
border-top: 6px solid #757575;
59-
border-right: 5px solid transparent;
6057
border-radius: 3px;
58+
border-right: 5px solid transparent;
59+
border-top: 6px solid #757575;
60+
margin-top: 8px;
6161
}
6262
}
6363
}
6464
&__body {
6565
display: flex;
6666
flex-wrap: wrap;
6767
&__link {
68-
display: flex;
6968
align-items: center;
7069
background: var(--brand2);
70+
border-radius: 40px;
7171
color: var(--brand6);
72-
text-decoration: none;
72+
display: flex;
7373
font-size: 14px;
7474
line-height: 36px;
75-
border-radius: 40px;
7675
margin: 5px;
7776
padding: 0 15px 0 0;
77+
text-decoration: none;
7878
}
7979
}
8080
}

0 commit comments

Comments
 (0)