postcss-parent-scope

A PostCSS plugin to scope CSS with a parent class.

wrap Example input

.Component { /* ... */ }
.Component--modifier { /* ... */ }
.Component-descendent { /* ... */ }
.Component1, .Component2 { /* ... */ }

Example output parentScope('parent-wrapper')

.parent-wrapper .Component { /* ... */ }
.parent-wrapper .Component--modifier { /* ... */ }
.parent-wrapper .Component-descendent { /* ... */ }
.parent-wrapper .Component1, .parent-wrapper .Component2 { /* ... */ }

Installation

npm install postcss-parent-scope

Usage

var fs        = require('fs');
var postcss   = require('postcss');
var parentScope = require('postcss-parent-scope');

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

Using the ignore option

var fs        = require('fs');
var postcss   = require('postcss');
var parentScope = require('postcss-parent-scope');

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

License

MIT

• Based on postcss-class-prefix