Posthtml-pseudo NPM

posthtml-pseudo

super awesome

A PostHTML plugin to add pseudo classes to elements within <body>, eg :first-child/:last-child.

Before:

<html>
    <body>
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </body>
</html>

After:

<html>
    <body>
        <div class=":first-child">one</div>
        <div>two</div>
        <div class=":last-child">three</div>
    </body>
</html>

:point_right: Check out postcss-pseudo-classes for the other side of the equation.

:pencil: Note on supported classes: Pseudo classes dependent on input values (:valid, :invalid, ...), browser history (:visted, :link, ...), interaction (:hover, :focus:), parameters (:nth-child(), :lang(), ...), page url (:target) or require JS (:indeterminate), have been excluded. See support list.

Options

Options config has two properties — include and exclude — to define which psuedo class names to add, and which tags to add them to. Both include.classNames and exclude.classNames can be:

a string of a class name group
a string of a class name (/^:\S+/, from those in the all group)
an array of class name groups and/or class names

Example Options Config

This config adds all supported pseudo class names to all appropriate elements using their default class names.

let config = {
    include : {
        classNames : "all" // all group
    }
};

Here's something more complex, adding only two class names but only to elements that aren't div, table or form.

let config = {
    include : {
        classNames : [ ":first-child", ":last-child" ]
    },
    exclude : {
        tags : [
            "div", "table", "form"
        ]
    }
};

And here's an unrealistic and irresponsible config showing more options.

let config = {
    include : {
        classNames : [
            "all", // include the "all" group using default class names
            { ":first-child" : "fc" }, // custom class name
            { "form" : (className) => className.replace(":", "") } // remove ":" from default classname
        ],
        tags : [
            "div",
            "p",
            "span"
        ]
    },
    exclude : {
        classNames : [
            "onlyChild",
            ":root",
            ":read-only"
        ],
        tags : [
            "div"
        ]
    }
}

Class Name Groups

{
    all : [
        ":default",
        ":disabled",
        ":empty",
        ":enabled",
        ":first-child"
        ":first-of-type",
        ":last-child",
        ":last-of-type",
        ":only-of-type",
        ":only-child",
        ":optional",
        ":read-only",
        ":read-write",
        ":required",
        ":root"
    ],
    firstLast : [
        ":first-child",
        ":first-child-of-type",
        ":last-child",
        ":last-child-of-type"
    ],
    firstLastOnly : [
        ":first-child",
        ":last-child"
    ],
    form : [
        ":default",
        ":disabled",
        ":enabled",
        ":optional",
        ":required",
        ":read-only",
        ":read-write"
    ],
    onlyChild : [
        ":only-child",
        ":only-child-of-type"
    ],
    readWrite : [
        ":read-only",
        ":read-write"
    ]
}