fix: improve HTML report formatting (#1621)

coliff · web-flow · commit 043375533a3b · 2025-06-03T15:35:09.000+09:00
* fix: improve HTML report formatting

automatic dark-mode support.

* Delete current.html

* Update html.js
diff --git a/dist/cli/formatters/html.js b/dist/cli/formatters/html.js
diff --git a/src/cli/formatters/html.ts b/src/cli/formatters/html.ts
@@ -10,11 +10,17 @@ const htmlFormatter: FormatterCallback = function (formatter) {
       '\n<meta name="viewport" content="width=device-width, initial-scale=1">'
     fileContent += '\n<title>HTML Hint Violation Report</title>'
     fileContent += '\n<meta name="generator" content="HTMLHint">'
+    fileContent +=
+      '\n<style>body{font-family:Arial,helvetica,sans-serif;} footer{margin-top:20px;text-align:center;opacity:0.5;}</style>'
+    fileContent +=
+      '\n<style>table{border-collapse:collapse;width:100%;} th,td{border:1px solid rgb(128,128,128,0.4);padding:8px;text-align:left;} th{background-color:rgb(128,128,128,0.2);}</style>'
+    fileContent +=
+      '\n<style>@media (prefers-color-scheme: dark) {body {background-color:#333;color:#fff;}}</style>'
     fileContent += '\n</head>'
-    fileContent += '\n<body style="font-family: Arial, helvetica, sans-serif;">'
+    fileContent += '\n<body>'
     fileContent += '\n<h1>Violation Report</h1>'
     fileContent += '\n<main>'
-    fileContent += '\n<table style="border:1px solid #ccc;margin-bottom:20px;">'
+    fileContent += '\n<table>'
     fileContent +=
       '\n<tr><th>Number#</th><th>File Name</th><th>Line Number</th><th>Message</th></tr>'
 
@@ -31,7 +37,7 @@ const htmlFormatter: FormatterCallback = function (formatter) {
 
     fileContent += '</table>'
     fileContent +=
-      '\n<footer><small style="opacity:0.5">Generated by <a href="https://htmlhint.com" target="_blank" rel="noopener">HTMLHint</a></small></footer>'
+      '\n<footer><small>Generated by <a href="https://htmlhint.com" target="_blank" rel="noopener">HTMLHint</a></small></footer>'
     fileContent += '\n</main>'
     fileContent += '\n</body>'
     fileContent += '</html>'
diff --git a/test/cli/formatters/html.html b/test/cli/formatters/html.html
@@ -4,11 +4,14 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>HTML Hint Violation Report</title>
 <meta name="generator" content="HTMLHint">
+<style>body{font-family:Arial,helvetica,sans-serif;} footer{margin-top:20px;text-align:center;opacity:0.5;}</style>
+<style>table{border-collapse:collapse;width:100%;} th,td{border:1px solid rgb(128,128,128,0.4);padding:8px;text-align:left;} th{background-color:rgb(128,128,128,0.2);}</style>
+<style>@media (prefers-color-scheme: dark) {body {background-color:#333;color:#fff;}}</style>
 </head>
-<body style="font-family: Arial, helvetica, sans-serif;">
+<body>
 <h1>Violation Report</h1>
 <main>
-<table style="border:1px solid #ccc;margin-bottom:20px;">
+<table>
 <tr><th>Number#</th><th>File Name</th><th>Line Number</th><th>Message</th></tr>
 <tr><td>1</td><td>{{path}}</td><td>8</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr>
 <tr><td>2</td><td>{{path}}</td><td>8</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr>
@@ -30,6 +33,6 @@ <h1>Violation Report</h1>
 <tr><td>18</td><td>{{path}}</td><td>25</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr>
 <tr><td>19</td><td>{{path}}</td><td>26</td><td>Tag must be paired, no start tag: [ </bad> ]</td></tr>
 <tr><td>20</td><td>{{path}}</td><td>27</td><td>Tag must be paired, no start tag: [ </bad> ]</td></tr></table>
-<footer><small style="opacity:0.5">Generated by <a href="https://htmlhint.com" target="_blank" rel="noopener">HTMLHint</a></small></footer>
+<footer><small>Generated by <a href="https://htmlhint.com" target="_blank" rel="noopener">HTMLHint</a></small></footer>
 </main>
 </body></html>
diff --git a/test/cli/formatters/html.spec.js b/test/cli/formatters/html.spec.js
@@ -4,12 +4,25 @@ const path = require('path')
 
 describe('CLI', () => {
   describe('Formatter: html', () => {
+    // Increase timeout to 60 seconds to avoid timeout errors
+    jest.setTimeout(60000)
+
     it('should have stdout output with formatter html', (done) => {
       const expected = fs
         .readFileSync(path.resolve(__dirname, 'html.html'), 'utf8')
         .replace(/\{\{path\}\}/g, path.resolve(__dirname, 'example.html'))
 
-      const expectedParts = expected.split('\n')
+      const expectedParts = expected
+        .replace(/\r\n|\r|\n/g, '\n')
+        .split('\n')
+        .map((line) => {
+          // Normalize CSS in style tags to match the minified version in the formatter
+          return line.replace(
+            /<style>(.*?)<\/style>/g,
+            (match, p1) => `<style>${p1.replace(/\s+/g, '')}</style>`
+          )
+        })
+        .filter((line) => line.trim() !== '')
 
       ChildProcess.exec(
         [
@@ -25,7 +38,17 @@ describe('CLI', () => {
 
           expect(stdout).not.toBe('')
 
-          const stdoutParts = stdout.split('\n')
+          const stdoutParts = stdout
+            .replace(/\r\n|\r|\n/g, '\n')
+            .split('\n')
+            .map((line) => {
+              // Normalize CSS in style tags to match the expected output
+              return line.replace(
+                /<style>(.*?)<\/style>/g,
+                (match, p1) => `<style>${p1.replace(/\s+/g, '')}</style>`
+              )
+            })
+            .filter((line) => line.trim() !== '')
 
           expect(stdoutParts.length).toBe(expectedParts.length)
 
