Now with Partition Management
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    rework-namespace-csspublic

    Rework Namespace CSS

    A simple namespacing plugin for Rework.

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

    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)

    class: all classes will have this string prepended to them

    root: what selector to use as the root of the namespace. Defaults to html.

    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

    ignoreUnderscored: whether selectors that begin with an underscore should have the underscore removed and not be namespaced. Defaults to true. Useful for selectors that need to break out of namespacing. Eg. ._reset {} won't get transformed into .namespace ._reset {}, but as .reset {} instead

    Example

    Note: grunt-rework is fairly old now so the following may no longer work. Have only tested with 0.0.6, such as from https://github.com/geordiemhall/grunt-rework

    Grunt snippet (untested, may not actually work these days):

    var reworkNamespace = require('rework-namespace-css')
    grunt.initConfig({
        rework: {
            options: {
                use: [
                    reworkNamespace({
                        selector: '.gmh'
                    })
                ]
            },
            index: {
                'dist/styles/core.css': 'dist/styles/core-namespaced.css'
            }
        }
    })

    Gulp snippet (untested, may not actually work these days):

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

    Will take the following CSS:

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

    And turn it into:

    .html.gmh {
        background: red;
    }    
     
    .gmh .body {
        color: blue;
    }
     
    .gmh .gmh-button {
        border: 1px solid black;
    }
     
    .gmh a.gmh-button {
        border-color: red;
    }
     
    .ignore-this {
        box-sizing: border-box;
    }
     

    install

    npm i rework-namespace-css

    Downloadsweekly downloads

    17

    version

    0.1.5

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar