postcss-class-prefix

A PostCSS plugin to prefix/namespace classes.

Avoid collisions with other libraries/stylesheets by prefixing your components with a namespace.

Example input

.Component { /* ... */ }
.Component--modifier { /* ... */ }
.Component-descendent { /* ... */ }

Example output classPrefix('pfx-')

.pfx-Component { /* ... */ }
.pfx-Component--modifier { /* ... */ }
.pfx-Component-descendent { /* ... */ }

Installation

npm install postcss-class-prefix

Usage

var fs        = require('fs');
var postcss   = require('postcss');
var classPrfx = require('postcss-class-prefix');
 
var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
          .use(classPrfx('my-prefix-'))
          .process(css);

Using the ignore option

var fs        = require('fs');
var postcss   = require('postcss');
var classPrfx = require('postcss-class-prefix');
 
var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
          .use(classPrfx('my-prefix-', { ignore: [/ng-/, 'some-class-to-ignore']}))
          .process(css);

License

MIT

Acknowledgements

• Based on rework-class-prefix (originally)