Postcss-scopify NPM

PostCSS Scopify

PostCSS plugin that adds a user input scope to each selector. for a command line interface, see scopify-cli.

Example input

.foo, .boo h1 {
    /* declarations */
}

& {
    /* declarations */
}

Example output scopify('#scope')

#scope .foo, #scope .boo h1 {
    /* declarations */
}

#scope {
    /* declarations */
}

Installation

npm install postcss-scopify

Usage

var fs        = require('fs');
var postcss   = require('postcss');
var scopify   = require('postcss-scopify');

var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
          .use(scopify('#scope'))
          .process(css)
          .css;

You can use PostCSS with your build tool. Note there are plugins for Grunt, Gulp, webpack, Broccoli, Brunch and ENB. See PostCSS docs for examples for your environment.