postcss-class-prefix

A class prefixer/namespacer for postcss

Usage no npm install needed!

<script type="module">
  import postcssClassPrefix from 'https://cdn.skypack.dev/postcss-class-prefix';
</script>

README

postcss-class-prefix Build Status

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