Skip to content

Commit 94dc4f1

Browse files
nschonniharish-sethuraman
nschonni
and
harish-sethuraman
authored
docs: use Stylelint for HTML files (#16468)
* chore: use Stylelint for HTML files * chore: update HTML fomatter to match Stylelint * Update lib/cli-engine/formatters/html.js Co-authored-by: Strek <[email protected]> Co-authored-by: Strek <[email protected]>
1 parent cc6128d commit 94dc4f1

5 files changed

Lines changed: 184 additions & 121 deletions

File tree

‎docs/.stylelintrc.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@
2424
"selector-class-pattern": null,
2525
"value-keyword-case": null
2626
},
27+
"overrides": [
28+
{
29+
"files": [
30+
"**/*.html"
31+
],
32+
"extends": ["stylelint-config-html/html", "stylelint-config-standard"]
33+
}
34+
],
2735
"ignoreFiles": [
2836
"_site/**"
2937
]

‎docs/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"build:eleventy": "npx @11ty/eleventy",
1717
"start": "npm-run-all build:sass --parallel watch:*",
1818
"build": "npm-run-all build:sass build:eleventy images",
19-
"lint:scss": "stylelint \"**/*.scss\"",
19+
"lint:scss": "stylelint \"**/*.{scss,html}\"",
2020
"lint:fix:scss": "npm run lint:scss -- --fix"
2121
},
2222
"devDependencies": {
@@ -41,9 +41,12 @@
4141
"markdown-it-container": "^3.0.0",
4242
"netlify-cli": "^10.3.1",
4343
"npm-run-all": "^4.1.5",
44+
"postcss-html": "^1.5.0",
4445
"rimraf": "^3.0.2",
4546
"sass": "^1.52.1",
4647
"stylelint": "^14.13.0",
48+
"stylelint-config-html": "^1.1.0",
49+
"stylelint-config-standard": "^29.0.0",
4750
"stylelint-config-standard-scss": "^5.0.0"
4851
},
4952
"engines": {

‎docs/src/_includes/layouts/base.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<title>{{ page_title }}</title>
2525
<meta name="description" content="{{ page_desc }}">
2626
<link rel="canonical" href="{{ page_url }}">
27-
27+
2828
<!-- https://github.com/eslint/eslint/issues/15844 -->
2929
<base href="{{ relative_page_url }}">
3030

@@ -76,7 +76,6 @@
7676

7777

7878
<style>
79-
8079
/* Overrides for funky punctuators */
8180
@font-face {
8281
font-family: "Mono Punctuators";
@@ -85,22 +84,24 @@
8584
unicode-range: U+40, U+7B, U+7D, U+28, U+29;
8685
font-display: swap;
8786
}
88-
87+
8988
/* Space Grotesk for headings */
9089
@font-face {
9190
font-family: "Space Grotesk";
92-
src: url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}") format("woff2"),
93-
url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff' | url }}") format("woff");
91+
src:
92+
url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}") format("woff2"),
93+
url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff' | url }}") format("woff");
9494
font-weight: 500;
9595
font-display: swap;
9696
}
9797

9898
/* Inter for body text */
9999

100100
@font-face {
101-
font-family: "Inter";
102-
src: url("{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}") format("woff2"),
103-
url("{{ '/assets/fonts/Inter-Regular-subset.zopfli.woff' | url }}") format("woff");
101+
font-family: Inter;
102+
src:
103+
url("{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}") format("woff2"),
104+
url("{{ '/assets/fonts/Inter-Regular-subset.zopfli.woff' | url }}") format("woff");
104105
font-weight: 400;
105106
font-display: swap;
106107
}
@@ -109,8 +110,9 @@
109110

110111
@font-face {
111112
font-family: "Space Mono";
112-
src: url("{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}") format("woff2"),
113-
url("{{ '/assets/fonts/SpaceMono-Regular-subset.zopfli.woff' | url }}") format("woff");
113+
src:
114+
url("{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}") format("woff2"),
115+
url("{{ '/assets/fonts/SpaceMono-Regular-subset.zopfli.woff' | url }}") format("woff");
114116
font-weight: 400;
115117
font-display: swap;
116118
}

‎docs/src/user-guide/formatters/html-formatter-example.html‎

Lines changed: 84 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,85 +7,110 @@
77
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjk0LjgyNSAyNTguOTgyJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPg0KPHBhdGggZmlsbD0nIzgwODBGMicgZD0nTTk3LjAyMSw5OS4wMTZsNDguNDMyLTI3Ljk2MmMxLjIxMi0wLjcsMi43MDYtMC43LDMuOTE4LDBsNDguNDMzLDI3Ljk2MiBjMS4yMTEsMC43LDEuOTU5LDEuOTkzLDEuOTU5LDMuMzkzdjU1LjkyNGMwLDEuMzk5LTAuNzQ4LDIuNjkzLTEuOTU5LDMuMzk0bC00OC40MzMsMjcuOTYyYy0xLjIxMiwwLjctMi43MDYsMC43LTMuOTE4LDAgbC00OC40MzItMjcuOTYyYy0xLjIxMi0wLjctMS45NTktMS45OTQtMS45NTktMy4zOTR2LTU1LjkyNEM5NS4wNjMsMTAxLjAwOSw5NS44MSw5OS43MTYsOTcuMDIxLDk5LjAxNicvPg0KPHBhdGggZmlsbD0nIzRCMzJDMycgZD0nTTI3My4zMzYsMTI0LjQ4OEwyMTUuNDY5LDIzLjgxNmMtMi4xMDItMy42NC01Ljk4NS02LjMyNS0xMC4xODgtNi4zMjVIODkuNTQ1IGMtNC4yMDQsMC04LjA4OCwyLjY4NS0xMC4xOSw2LjMyNWwtNTcuODY3LDEwMC40NWMtMi4xMDIsMy42NDEtMi4xMDIsOC4yMzYsMCwxMS44NzdsNTcuODY3LDk5Ljg0NyBjMi4xMDIsMy42NCw1Ljk4Niw1LjUwMSwxMC4xOSw1LjUwMWgxMTUuNzM1YzQuMjAzLDAsOC4wODctMS44MDUsMTAuMTg4LTUuNDQ2bDU3Ljg2Ny0xMDAuMDEgQzI3NS40MzksMTMyLjM5NiwyNzUuNDM5LDEyOC4xMjgsMjczLjMzNiwxMjQuNDg4IE0yMjUuNDE5LDE3Mi44OThjMCwxLjQ4LTAuODkxLDIuODQ5LTIuMTc0LDMuNTlsLTczLjcxLDQyLjUyNyBjLTEuMjgyLDAuNzQtMi44ODgsMC43NC00LjE3LDBsLTczLjc2Ny00Mi41MjdjLTEuMjgyLTAuNzQxLTIuMTc5LTIuMTA5LTIuMTc5LTMuNTlWODcuODQzYzAtMS40ODEsMC44ODQtMi44NDksMi4xNjctMy41OSBsNzMuNzA3LTQyLjUyN2MxLjI4Mi0wLjc0MSwyLjg4Ni0wLjc0MSw0LjE2OCwwbDczLjc3Miw0Mi41MjdjMS4yODMsMC43NDEsMi4xODYsMi4xMDksMi4xODYsMy41OVYxNzIuODk4eicvPg0KPC9zdmc+">
88
<style>
99
body {
10-
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
11-
font-size:16px;
12-
font-weight:normal;
13-
margin:0;
14-
padding:0;
15-
color:#333
10+
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
11+
font-size: 16px;
12+
font-weight: normal;
13+
margin: 0;
14+
padding: 0;
15+
color: #333;
1616
}
17+
1718
#overview {
18-
padding:20px 30px
19+
padding: 20px 30px;
1920
}
20-
td, th {
21-
padding:5px 10px
21+
22+
td,
23+
th {
24+
padding: 5px 10px;
2225
}
26+
2327
h1 {
24-
margin:0
28+
margin: 0;
2529
}
30+
2631
table {
27-
margin:30px;
28-
width:calc(100% - 60px);
29-
max-width:1000px;
30-
border-radius:5px;
31-
border:1px solid #ddd;
32-
border-spacing:0px;
32+
margin: 30px;
33+
width: calc(100% - 60px);
34+
max-width: 1000px;
35+
border-radius: 5px;
36+
border: 1px solid #ddd;
37+
border-spacing: 0;
3338
}
39+
3440
th {
35-
font-weight:400;
36-
font-size:medium;
37-
text-align:left;
38-
cursor:pointer
41+
font-weight: 400;
42+
font-size: medium;
43+
text-align: left;
44+
cursor: pointer;
3945
}
40-
td.clr-1, td.clr-2, th span {
41-
font-weight:700
46+
47+
td.clr-1,
48+
td.clr-2,
49+
th span {
50+
font-weight: 700;
4251
}
52+
4353
th span {
44-
float:right;
45-
margin-left:20px
54+
float: right;
55+
margin-left: 20px;
4656
}
47-
th span:after {
48-
content:"";
49-
clear:both;
50-
display:block
57+
58+
th span::after {
59+
content: "";
60+
clear: both;
61+
display: block;
5162
}
63+
5264
tr:last-child td {
53-
border-bottom:none
65+
border-bottom: none;
5466
}
55-
tr td:first-child, tr td:last-child {
56-
color:#9da0a4
67+
68+
tr td:first-child,
69+
tr td:last-child {
70+
color: #9da0a4;
5771
}
58-
#overview.bg-0, tr.bg-0 th {
59-
color:#468847;
60-
background:#dff0d8;
61-
border-bottom:1px solid #d6e9c6
72+
73+
#overview.bg-0,
74+
tr.bg-0 th {
75+
color: #468847;
76+
background: #dff0d8;
77+
border-bottom: 1px solid #d6e9c6;
6278
}
63-
#overview.bg-1, tr.bg-1 th {
64-
color:#f0ad4e;
65-
background:#fcf8e3;
66-
border-bottom:1px solid #fbeed5
79+
80+
#overview.bg-1,
81+
tr.bg-1 th {
82+
color: #f0ad4e;
83+
background: #fcf8e3;
84+
border-bottom: 1px solid #fbeed5;
6785
}
68-
#overview.bg-2, tr.bg-2 th {
69-
color:#b94a48;
70-
background:#f2dede;
71-
border-bottom:1px solid #eed3d7
86+
87+
#overview.bg-2,
88+
tr.bg-2 th {
89+
color: #b94a48;
90+
background: #f2dede;
91+
border-bottom: 1px solid #eed3d7;
7292
}
93+
7394
td {
74-
border-bottom:1px solid #ddd
95+
border-bottom: 1px solid #ddd;
7596
}
97+
7698
td.clr-1 {
77-
color:#f0ad4e
99+
color: #f0ad4e;
78100
}
101+
79102
td.clr-2 {
80-
color:#b94a48
103+
color: #b94a48;
81104
}
105+
82106
td a {
83-
color:#3a33d1;
84-
text-decoration:none
107+
color: #3a33d1;
108+
text-decoration: none;
85109
}
110+
86111
td a:hover {
87-
color:#272296;
88-
text-decoration:underline
112+
color: #272296;
113+
text-decoration: underline;
89114
}
90115
</style>
91116
</head>
@@ -104,7 +129,7 @@ <h1>ESLint Report</h1>
104129
<span>9 problems (5 errors, 4 warnings)</span>
105130
</th>
106131
</tr>
107-
<tr style="display:none" class="f-0">
132+
<tr style="display: none;" class="f-0">
108133
<td>1:10</td>
109134
<td class="clr-2">Error</td>
110135
<td>&#39;addOne&#39; is defined but never used.</td>
@@ -113,7 +138,7 @@ <h1>ESLint Report</h1>
113138
</td>
114139
</tr>
115140

116-
<tr style="display:none" class="f-0">
141+
<tr style="display: none;" class="f-0">
117142
<td>2:9</td>
118143
<td class="clr-2">Error</td>
119144
<td>Use the isNaN function to compare with NaN.</td>
@@ -122,7 +147,7 @@ <h1>ESLint Report</h1>
122147
</td>
123148
</tr>
124149

125-
<tr style="display:none" class="f-0">
150+
<tr style="display: none;" class="f-0">
126151
<td>3:16</td>
127152
<td class="clr-2">Error</td>
128153
<td>Unexpected space before unary operator &#39;++&#39;.</td>
@@ -131,7 +156,7 @@ <h1>ESLint Report</h1>
131156
</td>
132157
</tr>
133158

134-
<tr style="display:none" class="f-0">
159+
<tr style="display: none;" class="f-0">
135160
<td>3:20</td>
136161
<td class="clr-1">Warning</td>
137162
<td>Missing semicolon.</td>
@@ -140,7 +165,7 @@ <h1>ESLint Report</h1>
140165
</td>
141166
</tr>
142167

143-
<tr style="display:none" class="f-0">
168+
<tr style="display: none;" class="f-0">
144169
<td>4:12</td>
145170
<td class="clr-1">Warning</td>
146171
<td>Unnecessary &#39;else&#39; after &#39;return&#39;.</td>
@@ -149,7 +174,7 @@ <h1>ESLint Report</h1>
149174
</td>
150175
</tr>
151176

152-
<tr style="display:none" class="f-0">
177+
<tr style="display: none;" class="f-0">
153178
<td>5:1</td>
154179
<td class="clr-1">Warning</td>
155180
<td>Expected indentation of 8 spaces but found 6.</td>
@@ -158,7 +183,7 @@ <h1>ESLint Report</h1>
158183
</td>
159184
</tr>
160185

161-
<tr style="display:none" class="f-0">
186+
<tr style="display: none;" class="f-0">
162187
<td>5:7</td>
163188
<td class="clr-2">Error</td>
164189
<td>Function &#39;addOne&#39; expected a return value.</td>
@@ -167,7 +192,7 @@ <h1>ESLint Report</h1>
167192
</td>
168193
</tr>
169194

170-
<tr style="display:none" class="f-0">
195+
<tr style="display: none;" class="f-0">
171196
<td>5:13</td>
172197
<td class="clr-1">Warning</td>
173198
<td>Missing semicolon.</td>
@@ -176,7 +201,7 @@ <h1>ESLint Report</h1>
176201
</td>
177202
</tr>
178203

179-
<tr style="display:none" class="f-0">
204+
<tr style="display: none;" class="f-0">
180205
<td>7:2</td>
181206
<td class="clr-2">Error</td>
182207
<td>Unnecessary semicolon.</td>

0 commit comments

Comments
 (0)