NAME

CSS::Coverage - Confirm that your CSS matches your DOM

VERSION

version 0.01

SYNOPSIS

    css-coverage style.css index.html second.html
        Unmatched selectors (3):
            div.form-actions button:first-child
            .expanded span.open
            ul.attn li form textarea


    my $coverage = CSS::Coverage->new(
        css       => $css_file,
        documents => \@html_files,
    );

    my $report = $coverage->check;

    print for $report->unmatched_selectors;

DESCRIPTION

It is very tedious to manually confirm whether a particular CSS selector matches any of your documents. There are browser-based tools, like one that ships in Chrome, that do this for you. However, they do not presently check multiple pages. Browser tools are also not great for running in a continuous integration environment.

This module provides a good first stab at paring down the list of rules to manually check.

If you know that a particular rule only matches in the presence of a dynamically-modified DOM, via JavaScript, you can add a comment like this either inside or before that CSS rule:

    /* coverage: dynamic */

This will cause CSS::Coverage to skip that rule.

ATTRIBUTES

css (Str|ScalarRef)

If given a string, css is treated as a filename. If given as a scalar reference, css is treated as CSS code.

documents (ArrayRef[Str|ScalarRef])

A list of HTML documents. For each document, strings are treated as filenames; scalar reference as raw HTML code.

METHODS

check

Runs a coverage check of the given CSS against the given documents. Returns a CSS::Coverage::Report object.