Skip to content
PostCSS plugin to match class patterns (prefix, suffix, contains) in a SAFE way.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json
test.js

README.md

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.

You can’t perform that action at this time.