https://github.com/johno/rework-class-prefix

Add a class prefix to an import in order to sandbox CSS styling.
https://github.com/johno/rework-class-prefix

Last synced: 2 months ago
JSON representation

Add a class prefix to an import in order to sandbox CSS styling.

• Host: GitHub
• URL: https://github.com/johno/rework-class-prefix
• Owner: johno
• License: mit
• Created: 2014-10-28T18:17:36.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-09-28T16:08:32.000Z (over 7 years ago)
• Last Synced: 2024-10-19T17:31:25.594Z (4 months ago)
• Language: JavaScript
• Size: 210 KB
• Stars: 1
• Watchers: 3
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rework-class-prefix [![Build Status](https://travis-ci.org/johnotander/rework-class-prefix.svg?branch=master)](https://travis-ci.org/johnotander/rework-class-prefix)

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__

```css

.grid { /* ... */ }

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

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

```

__Example output__

`classPrefix('flx-')`

```css

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

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

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

```

## Installation

```

npm install --save rework-class-prefix

```

## Usage

```javascript

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

```js

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

```javascript

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

* Leverages .

* Built on top of .

## 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](http://johnotander.com) ([@4lpine](https://twitter.com/4lpine)).