alexander-svendsen/postcss-custom-scoper

PostCSS plugin that adds custom scopes to selector [WIP]

PostCSS Custom Scoper [WIP]

PostCSS plugin that adds custom scopes to selectors.

Installation

Before using the plugin, make sure to have installed the PostCSS before:

npm install postcss

After installing postcss you can install the plugin:

npm install postcss-custom-scoper

Usage

var postcss = require('postcss'),
    scoper = require('postcss-custom-scoper');

var cssFile = fs.readFileSync('path/to/file.css',  'utf-8').toString();

var output1 = postcss().use(
    scoper({
        {
            //multiple matches
            selectors: {
              'something-to-match' : 'what-to-add',
              '*' : 'matches-all'
            }
            ignore: [ /regex-to-match/, '.class-to-ignore', '#id-to-ignore' ]
        }
    })
).process(cssFile);

// or

var output2 = postcss().use(
    scoper({
        {
            //first match used
            selectors: [
              {'something-to-match' : 'what-to-add'},
              {'*' : 'matches-all'}
            ],
            ignore: [ /regex-to-match/, '.class-to-ignore', '#id-to-ignore' ]
        }
    })
).process(cssFile);

See PostCSS docs for examples for your environment.

Example

/* Before */
.foo {
}

/* After */
.foo {
}

Credits

Plugin inspired by:

• postcss-selector-namespace create by topaxi
• postcss-prefixer created by marceloucker