PostCSS Container

PostCSS plugin that adds a user input scope to each selector. for a command line interface.

Example input

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

Example output scopify('#scope')

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

Installation

npm install postcss-cotaniner

Usage

var fs                 = require('fs');
var postcss            = require('postcss');
var postcssContainer   = require('postcss-container');
 
var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
          .use(postcssContainer('#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.