HTML Validator Plugin for Webpack

validate-html.js

/**
 * HTML Validator Plugin for Webpack
 *
 * @docs https://html-validate.org
 */
const path = require( 'path' );
const columnify = require( 'columnify' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const HtmlValidate = require( 'html-validate' ).HtmlValidate;

const pluginName = 'Validate HTML';

const getRuleInfo = ( rule ) => {

    if ( !rule ) return '';

    let id = rule.toLowerCase();

    let base = 'https://html-validate.org/rules/';
    const isWCAG = /wcag/.test( id );

    if ( isWCAG ) {

        id = id.split( '/' )[ 1 ];
        base = `${ base }wcag/`;

    }

    return `[${ rule.toLowerCase() }] ${ base }${ id }.html`;

};

class HTMLValidator {

    apply( compiler ) {

        const config = require( path.join( compiler.context, '.htmlvalidate.json' ) );
        const validator = new HtmlValidate( config );

        const isProd = compiler.options.mode === 'production';

        compiler.hooks.compilation.tap( pluginName, ( compilation ) => {

            HtmlWebpackPlugin.getHooks( compilation ).beforeEmit.tapAsync( pluginName, ( data, cb ) => {

                const {
                    html,
                    outputName
                } = data;

                const {
                    valid,
                    results
                } = validator.validateSource( html );

                if ( !valid ) {

                    const msgs = [];
                    const error = [
                        `${ outputName }:`
                    ];

                    results.forEach( ( result ) => {

                        result.messages.forEach( ( msg ) => {

                            const {
                                line,
                                column,
                                ruleId,
                                message
                            } = msg;

                            const ruleInfo = getRuleInfo( ruleId );

                            msgs.push( {
                                line: ` ${ line }:${ column }`,
                                error: `"${ message }" ${ ruleInfo }`
                            } );

                        } );

                    } );

                    error.push( columnify( msgs, {
                        showHeaders: false,
                        columnSplitter: '   '
                    } ) );

                    const issues = new Error( error.join( '\n' ) );

                    // if ( isProd ) compilation.errors.push( issues );
                    // else compilation.warnings.push( issues );

                    if ( !isProd ) compilation.errors.push( issues );

                }

                // Tell webpack to move on
                cb( null, data );

            } );

        } );

    }

}

module.exports = HTMLValidator;