Rework Namespace CSS

Namespacing plugin for Rework.

Allows for CSS to be namespaced by selector, and with class prefixes.

Install

npm i rework-namespace-css-multiple

Options

Pass in an options object to configure the plugin. Possible options:

selector: all selectors will have this string prepended to them (with a space afterwards, unless it's the root); It can be an array like ['.selector_one', '.selector_two'];

class: all classes will have this string prepended to them

root: what selector to use as the root of the namespace. Defaults to html. It also can be an array like ['.root_one', '.root_two']

namespaceHtml: whether html should be converted to .html. Useful if complete namespacing is required. Defaults to true.

namespaceBody: whether body should be converted to .body. Useful if complete namespacing is required. Defaults to true.

ignore: a list of selectors to ignore. Examle: ['body', 'html']. Default: null.

Example

The following gulp snippet

    var rework = require('rework')
    rework.namespace = require('rework-namespace-css')
    
    ...
    
    return gulp.src('src/styles/index.css')
        .pipe(rework(rework.namespace({ 
          selector: ['.gmh', '.fancybox'], 
          class: 'gmh-' 
        })))
        .pipe(gulp.dest('dist/styles'))

Will turn

    html {
        background: red;
    }    
    
    body {
        color: blue;
    }
    
    .button {
        border: 1px solid black;
    }
    
    a.button {
        border-color: red;
    }

Into

    .html.gmh,
    .html.fancybox {
        background: red;
    }    

    .gmh .body, 
    .fancybox .body {
        color: blue;
    }

    .gmh .gmh-button,
    .fancybox .gmh-button {
        border: 1px solid black;
    }

    .gmh a.gmh-button,
    .fancybox a.gmh-button {
        border-color: red;
    }