Add format for --report to generate HTML report#4
Conversation
Ls colors
|
@laras126 FYI, I've cherry-picked a few commits from this branch into |
25bb5c7 to
fc0fed9
Compare
Updated! |
--report to generate HTML report
| audit: 'colors', | ||
| data: [ |
There was a problem hiding this comment.
This change is breaking the default CLI result:
yarn css-audit ../css/style.css --colors
undefined:
undefined
I know the grouping is needed for the HTML sections, but it could be done with a group ID in each result object? Then the HTML formatter can group them by that key. Like…
// in audits/colors.js
{
id: 'top-10-colors',
audit: 'colors',
label: 'Top 10 most-used colors',
value: colorsByCount.slice( 0, 10 ),
},
// in formats/report.js
const colorReports = reports.filter( ( { audit } ) => 'colors' === audit );There was a problem hiding this comment.
Ah whoops 🤦🏻♀️ - yes, this can work! Thanks.
There was a problem hiding this comment.
@ryelle I updated the PR to use this structure, and the CLI is working. We can send each audit separately to the templates to support different partials that can have varied markup, and there is a default.twig partial that can be used as a catch all where needed.
| data: [ | ||
| { | ||
| label: 'Number of unique colors', | ||
| value: uniqColors.length, |
There was a problem hiding this comment.
These are missing the ID values, looks like they got lost in the merge
|
Re: |
ryelle
left a comment
There was a problem hiding this comment.
🎉 Working great in testing, with all report formats.
Add a format and templating system to generate an HTML report that can be published on Github pages, for example: https://laras126.github.io/css-audit/public/wp-admin.html
Fixes #5.