PostCSS Class Prefixer

Opinionated PostCSS plugin to prefix all off the classes and root tags with a class name of your choosing except for IDs and children of @keyframes.

Examples

The html root tag gets affixed like so:

html.foo {
  baz: 3px;
}

/* Input */
.bar-a {
  baz: 3px;
}
.bar-b,
div {
  baz: 3px;
}
.bar-c,
#bar,
.bar-d {
  baz: 3px;
}

/* Output */
.foo .bar-a {
  baz: 3px;
}
.foo .bar-b,
.foo div {
  baz: 3px;
}
.foo .bar-c,
#bar,
.foo .bar-d {
  baz: 3px;
}

Usage

Step 1: Install plugin (and postcss if you haven't got it in your project):

npm install --save-dev postcss-class-prefixer

Step 2: Check you project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

Example:

const plugin = require('postcss-class-prefixer');

postcss([
  plugin({ prefixSelector: '.my-selector', shouldPrefixId: true }),
]).process(input);

Where opts is and object with the prefix key containing your class for prefixing { prefixSelector: '.my-custom-prefix' } and the shouldPrefixId that is a boolean.

input is a string of your css '.foo { bar: baz; }'

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-class-prefixer'),
    require('autoprefixer')
  ]
}

Inspiration

I had a use case for a plugin that prefixes tags, classes, and affixes the html tag and skips IDs. I also wanted to experiment with TypeScript, Semantic Release and Travis CI.

So in this project I've done all.

I'd like to say thanks to nutboltu and dbtedman for their work that I have based this piece on.