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 <ssharishkumar@gmail.com> Co-authored-by: Strek <ssharishkumar@gmail.com>
eslint · Nov 2, 2022 · 94dc4f1 · 94dc4f1
1 parent cc6128d
commit 94dc4f1
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 121 deletions.
diff --git a/docs/.stylelintrc.json b/docs/.stylelintrc.json
@@ -24,6 +24,14 @@
         "selector-class-pattern": null,
         "value-keyword-case": null
     },
+    "overrides": [
+        {
+            "files": [
+                "**/*.html"
+            ],
+            "extends": ["stylelint-config-html/html", "stylelint-config-standard"]
+        }
+    ],
     "ignoreFiles": [
         "_site/**"
     ]

diff --git a/docs/package.json b/docs/package.json
@@ -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": {
@@ -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": {

diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
@@ -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 }}">
 
@@ -76,7 +76,6 @@
 
 
     <style>
-
         /* Overrides for funky punctuators */
         @font-face {
             font-family: "Mono Punctuators";
@@ -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;
         }
@@ -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;
         }

diff --git a/docs/src/user-guide/formatters/html-formatter-example.html b/docs/src/user-guide/formatters/html-formatter-example.html
@@ -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;
             }
+
             #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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>