posthtml-pseudo

    0.6.12 • Public • Published

    posthtml-pseudo

    Build Coverage Greenkeeper badge 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>

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

    📝 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"
        ]
    }

    Pseudo Class Names

    List of supported and unsupported pseudo class names. Checkboxes track implementation status.

    • :active
    • :any
    • :checked
    • [X] :default
    • :dir() *
    • [X] :disabled
    • [X] :empty
    • [X] :enabled
    • [X] :first
    • [X] :first-child
    • [X] :first-of-type
    • :fullscreen
    • :focus
    • :hover
    • :indeterminate
    • :in-range
    • :invalid
    • :lang() *
    • [X] :last-child
    • [X] :last-of-type
    • :left
    • :link
    • :not() *
    • :nth-child() *
    • :nth-last-child() *
    • :nth-last-of-type() *
    • :nth-of-type() *
    • [X] :only-child
    • [X] :only-of-type
    • [X] :optional
    • :out-of-range
    • [X] :read-only
    • [X] :read-write
    • [X] :required
    • :right
    • [X] :root
    • :scope
    • :target
    • :valid
    • :visited

    * Hope to add these, but require some thinking due to input parameters.

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i posthtml-pseudo

      DownloadsWeekly Downloads

      5

      Version

      0.6.12

      License

      MIT

      Unpacked Size

      25.9 kB

      Total Files

      31

      Last publish

      Collaborators

      • kevinkace