postcss-class-patterns

    2.0.1 • Public • Published

    PostCSS Class Patterns Build Status

    PostCSS plugin to match class patterns (prefix, suffix, contains) in a SAFE way. This is achieved by combining different attribute selectors with all possible class delimiters (spaces, tabs, line feed, form feed, carriage return). This plugin is inspired by this post and follows the HTML5 Spec

    Supports the pseudo-classes :class-starts-with(), :class-ends-with() and :class-contains().

    /* input */
    :class-starts-with(button-{
     
    }
    /* output */
    [class^="button-"],
    [class*=" button-"],
    [class*="\abutton-"],
    [class*="\cbutton-"],
    [class*="\dbutton-"],
    [class*="\9button-"] {
        color:blue;
    }',

    which matches

    <div class="button-blue">matched</div>
    <div class="some other classes button-blue">matched</div>
    <div class="some-button-blue">not matched</div>
    /* input */
    a:class-ends-with(-active{
        color: red;
    }
    /* output */
    a[class$="-active"],
    a[class*="-active "],
    a[class*="-active\a"],
    a[class*="-active\c"],
    a[class*="-active\d"],
    a[class*="-active\9"] {
        color:red;
    }',
    /* input */
    a:class-contains(abc{
        color: green;
    }
    /* output */
    a[class*="abc"] {
        color: green;
    }

    Usage

    postcss([ require('postcss-class-patterns') ])

    See PostCSS docs for examples for your environment.

    Install

    npm i postcss-class-patterns

    DownloadsWeekly Downloads

    0

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • mattdimu