Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: use Stylelint for HTML files #16468

Merged
merged 3 commits into from Nov 2, 2022
Merged

docs: use Stylelint for HTML files #16468

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ada04bd
chore: use Stylelint for HTML files
nschonni Oct 29, 2022
4680758
chore: update HTML fomatter to match Stylelint
nschonni Oct 30, 2022
2acca68
Update lib/cli-engine/formatters/html.js
nschonni Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/.stylelintrc.json
View file
Open in desktop
Expand Up @@ -22,6 +22,14 @@
"selector-class-pattern": null,
"value-keyword-case": null
},
"overrides": [
{
"files": [
"**/*.html"
],
"extends": ["stylelint-config-html/html", "stylelint-config-standard"]
}
],
"ignoreFiles": [
"_site/**"
]
Expand Down
5 changes: 4 additions & 1 deletion docs/package.json
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@
"build:eleventy": "npx @11ty/eleventy",
"start": "npm-run-all build:sass --parallel watch:*",
"build": "npm-run-all build:sass build:eleventy images",
"lint:scss": "stylelint \"**/*.scss\"",
"lint:scss": "stylelint \"**/*.{scss,html}\"",
"lint:fix:scss": "npm run lint:scss -- --fix"
},
"devDependencies": {
Expand All @@ -41,9 +41,12 @@
"markdown-it-container": "^3.0.0",
"netlify-cli": "^10.3.1",
"npm-run-all": "^4.1.5",
"postcss-html": "^1.5.0",
"rimraf": "^3.0.2",
"sass": "^1.52.1",
"stylelint": "^14.13.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-standard": "^29.0.0",
"stylelint-config-standard-scss": "^5.0.0"
},
"engines": {
Expand Down
22 changes: 12 additions & 10 deletions docs/src/_includes/layouts/base.html
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@
<title>{{ page_title }}</title>
<meta name="description" content="{{ page_desc }}">
<link rel="canonical" href="{{ page_url }}">

<!-- https://github.com/eslint/eslint/issues/15844 -->
<base href="{{ relative_page_url }}">

Expand Down Expand Up @@ -76,7 +76,6 @@


<style>

/* Overrides for funky punctuators */
@font-face {
font-family: "Mono Punctuators";
Expand All @@ -85,22 +84,24 @@
unicode-range: U+40, U+7B, U+7D, U+28, U+29;
font-display: swap;
}

/* Space Grotesk for headings */
@font-face {
font-family: "Space Grotesk";
src: url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}") format("woff2"),
url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff' | url }}") format("woff");
src:
url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}") format("woff2"),
url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff' | url }}") format("woff");
font-weight: 500;
font-display: swap;
}

/* Inter for body text */

@font-face {
font-family: "Inter";
src: url("{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}") format("woff2"),
url("{{ '/assets/fonts/Inter-Regular-subset.zopfli.woff' | url }}") format("woff");
font-family: Inter;
src:
url("{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}") format("woff2"),
url("{{ '/assets/fonts/Inter-Regular-subset.zopfli.woff' | url }}") format("woff");
font-weight: 400;
font-display: swap;
}
Expand All @@ -109,8 +110,9 @@

@font-face {
font-family: "Space Mono";
src: url("{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}") format("woff2"),
url("{{ '/assets/fonts/SpaceMono-Regular-subset.zopfli.woff' | url }}") format("woff");
src:
url("{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}") format("woff2"),
url("{{ '/assets/fonts/SpaceMono-Regular-subset.zopfli.woff' | url }}") format("woff");
font-weight: 400;
font-display: swap;
}
Expand Down
143 changes: 84 additions & 59 deletions docs/src/user-guide/formatters/html-formatter-example.html
View file
Open in desktop
Expand Up @@ -7,85 +7,110 @@
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjk0LjgyNSAyNTguOTgyJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPg0KPHBhdGggZmlsbD0nIzgwODBGMicgZD0nTTk3LjAyMSw5OS4wMTZsNDguNDMyLTI3Ljk2MmMxLjIxMi0wLjcsMi43MDYtMC43LDMuOTE4LDBsNDguNDMzLDI3Ljk2MiBjMS4yMTEsMC43LDEuOTU5LDEuOTkzLDEuOTU5LDMuMzkzdjU1LjkyNGMwLDEuMzk5LTAuNzQ4LDIuNjkzLTEuOTU5LDMuMzk0bC00OC40MzMsMjcuOTYyYy0xLjIxMiwwLjctMi43MDYsMC43LTMuOTE4LDAgbC00OC40MzItMjcuOTYyYy0xLjIxMi0wLjctMS45NTktMS45OTQtMS45NTktMy4zOTR2LTU1LjkyNEM5NS4wNjMsMTAxLjAwOSw5NS44MSw5OS43MTYsOTcuMDIxLDk5LjAxNicvPg0KPHBhdGggZmlsbD0nIzRCMzJDMycgZD0nTTI3My4zMzYsMTI0LjQ4OEwyMTUuNDY5LDIzLjgxNmMtMi4xMDItMy42NC01Ljk4NS02LjMyNS0xMC4xODgtNi4zMjVIODkuNTQ1IGMtNC4yMDQsMC04LjA4OCwyLjY4NS0xMC4xOSw2LjMyNWwtNTcuODY3LDEwMC40NWMtMi4xMDIsMy42NDEtMi4xMDIsOC4yMzYsMCwxMS44NzdsNTcuODY3LDk5Ljg0NyBjMi4xMDIsMy42NCw1Ljk4Niw1LjUwMSwxMC4xOSw1LjUwMWgxMTUuNzM1YzQuMjAzLDAsOC4wODctMS44MDUsMTAuMTg4LTUuNDQ2bDU3Ljg2Ny0xMDAuMDEgQzI3NS40MzksMTMyLjM5NiwyNzUuNDM5LDEyOC4xMjgsMjczLjMzNiwxMjQuNDg4IE0yMjUuNDE5LDE3Mi44OThjMCwxLjQ4LTAuODkxLDIuODQ5LTIuMTc0LDMuNTlsLTczLjcxLDQyLjUyNyBjLTEuMjgyLDAuNzQtMi44ODgsMC43NC00LjE3LDBsLTczLjc2Ny00Mi41MjdjLTEuMjgyLTAuNzQxLTIuMTc5LTIuMTA5LTIuMTc5LTMuNTlWODcuODQzYzAtMS40ODEsMC44ODQtMi44NDksMi4xNjctMy41OSBsNzMuNzA3LTQyLjUyN2MxLjI4Mi0wLjc0MSwyLjg4Ni0wLjc0MSw0LjE2OCwwbDczLjc3Miw0Mi41MjdjMS4yODMsMC43NDEsMi4xODYsMi4xMDksMi4xODYsMy41OVYxNzIuODk4eicvPg0KPC9zdmc+">
<style>
body {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
margin:0;
padding:0;
color:#333
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 0;
color: #333;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is autogenerated, so it should be excluded from linting.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! I went back and updated the generator so it outputs the formatted code instead

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still think this file should be excluded. This file is not actually documentation, but the output of running eslint with -f html on the command line.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also feel we should ignore this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Linting the generated file does highlight "issues" (so far just formatting) that wouldn't be caught otherwise because it is a string embedded in an EJS file. The annoyance though, is there is now way to say "you really need to fix this other file"

}

#overview {
padding:20px 30px
padding: 20px 30px;
}
td, th {
padding:5px 10px

td,
th {
padding: 5px 10px;
}

h1 {
margin:0
margin: 0;
}

table {
margin:30px;
width:calc(100% - 60px);
max-width:1000px;
border-radius:5px;
border:1px solid #ddd;
border-spacing:0px;
margin: 30px;
width: calc(100% - 60px);
max-width: 1000px;
border-radius: 5px;
border: 1px solid #ddd;
border-spacing: 0;
}

th {
font-weight:400;
font-size:medium;
text-align:left;
cursor:pointer
font-weight: 400;
font-size: medium;
text-align: left;
cursor: pointer;
}
td.clr-1, td.clr-2, th span {
font-weight:700

td.clr-1,
td.clr-2,
th span {
font-weight: 700;
}

th span {
float:right;
margin-left:20px
float: right;
margin-left: 20px;
}
th span:after {
content:"";
clear:both;
display:block

th span::after {
content: "";
clear: both;
display: block;
}

tr:last-child td {
border-bottom:none
border-bottom: none;
}
tr td:first-child, tr td:last-child {
color:#9da0a4

tr td:first-child,
tr td:last-child {
color: #9da0a4;
}
#overview.bg-0, tr.bg-0 th {
color:#468847;
background:#dff0d8;
border-bottom:1px solid #d6e9c6

#overview.bg-0,
tr.bg-0 th {
color: #468847;
background: #dff0d8;
border-bottom: 1px solid #d6e9c6;
}
#overview.bg-1, tr.bg-1 th {
color:#f0ad4e;
background:#fcf8e3;
border-bottom:1px solid #fbeed5

#overview.bg-1,
tr.bg-1 th {
color: #f0ad4e;
background: #fcf8e3;
border-bottom: 1px solid #fbeed5;
}
#overview.bg-2, tr.bg-2 th {
color:#b94a48;
background:#f2dede;
border-bottom:1px solid #eed3d7

#overview.bg-2,
tr.bg-2 th {
color: #b94a48;
background: #f2dede;
border-bottom: 1px solid #eed3d7;
}

td {
border-bottom:1px solid #ddd
border-bottom: 1px solid #ddd;
}

td.clr-1 {
color:#f0ad4e
color: #f0ad4e;
}

td.clr-2 {
color:#b94a48
color: #b94a48;
}

td a {
color:#3a33d1;
text-decoration:none
color: #3a33d1;
text-decoration: none;
}

td a:hover {
color:#272296;
text-decoration:underline
color: #272296;
text-decoration: underline;
}
</style>
</head>
Expand All @@ -104,7 +129,7 @@ <h1>ESLint Report</h1>
<span>9 problems (5 errors, 4 warnings)</span>
</th>
</tr>
<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>1:10</td>
<td class="clr-2">Error</td>
<td>&#39;addOne&#39; is defined but never used.</td>
Expand All @@ -113,7 +138,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>2:9</td>
<td class="clr-2">Error</td>
<td>Use the isNaN function to compare with NaN.</td>
Expand All @@ -122,7 +147,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>3:16</td>
<td class="clr-2">Error</td>
<td>Unexpected space before unary operator &#39;++&#39;.</td>
Expand All @@ -131,7 +156,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>3:20</td>
<td class="clr-1">Warning</td>
<td>Missing semicolon.</td>
Expand All @@ -140,7 +165,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>4:12</td>
<td class="clr-1">Warning</td>
<td>Unnecessary &#39;else&#39; after &#39;return&#39;.</td>
Expand All @@ -149,7 +174,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>5:1</td>
<td class="clr-1">Warning</td>
<td>Expected indentation of 8 spaces but found 6.</td>
Expand All @@ -158,7 +183,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>5:7</td>
<td class="clr-2">Error</td>
<td>Function &#39;addOne&#39; expected a return value.</td>
Expand All @@ -167,7 +192,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>5:13</td>
<td class="clr-1">Warning</td>
<td>Missing semicolon.</td>
Expand All @@ -176,7 +201,7 @@ <h1>ESLint Report</h1>
</td>
</tr>

<tr style="display:none" class="f-0">
<tr style="display: none;" class="f-0">
<td>7:2</td>
<td class="clr-2">Error</td>
<td>Unnecessary semicolon.</td>
Expand Down