Necessary Pigeonholing Mechanism
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    rework-class-prefixpublic

    rework-class-prefix Build Status

    Add a class prefix to further sandbox CSS styling for third-party imports.

    This comes in handy when you want to import two different CSS modules that might have conflictings styles. For example, if module A and module B both have a .media class selector that have different use cases, you can run them through rework-class-prefix and result in something like .a-media and .b-media.

    Example input

    .grid { /* ... */ }
    .grid-row { /* ... */ }
    .grid-row-col { /* ... */ }

    Example output classPrefix('flx-')

    .flx-grid { /* ... */ }
    .flx-grid-row { /* ... */ }
    .flx-grid-row-col { /* ... */ }

    Installation

    npm install --save rework-class-prefix
    

    Usage

    var fs        = require('fs'),
        rework    = require('rework'),
        classPrfx = require('rework-class-prefix');
     
    var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
    var out = rework(css).use(classPrfx('my-prefix-')).toString();

    In a gulpfile

    var gulp        = require('gulp'),
        name        = require('gulp-rename'),
        rework      = require('gulp-rework'),
        reworkNPM   = require('rework-npm'),
        classPrefix = require('rework-class-prefix');
     
    gulp.task('css', function() {
      return gulp.src('index.css')
        .pipe(rework(reworkNPM(), classPrefix('prfx-')))
        .pipe(name('index-prefixed.css'))
        .pipe(gulp.dest('css'));
    });

    Using the ignored option

    var fs        = require('fs'),
    rework    = require('rework'),
    classPrfx = require('rework-class-prefix');
     
    var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
    var out = rework(css).use(
                classPrfx('my-prefix-', { ignored: [/\.ng-/, 'some-class-to-ignore'] })
              ).toString();

    License

    MIT

    Acknowledgements

    Contributing

    1. Fork it
    2. Create your feature branch (git checkout -b my-new-feature)
    3. Commit your changes (git commit -am 'Add some feature')
    4. Push to the branch (git push origin my-new-feature)
    5. Create new Pull Request

    Crafted with <3 by John Otander (@4lpine).

    install

    npm i rework-class-prefix

    Downloadsweekly downloads

    293

    version

    1.0.1

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar