https://github.com/thompsongl/postcss-class-prefix

No Longer Maintained - A class prefixer/namespacer for postcss
https://github.com/thompsongl/postcss-class-prefix

Last synced: 9 days ago
JSON representation

No Longer Maintained - A class prefixer/namespacer for postcss

• Host: GitHub
• URL: https://github.com/thompsongl/postcss-class-prefix
• Owner: thompsongl
• License: mit
• Created: 2015-03-17T17:14:07.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-01-04T16:33:57.000Z (over 6 years ago)
• Last Synced: 2024-02-11T05:20:41.161Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 84
• Watchers: 3
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-github-star - postcss-class-prefix - A class prefixer/namespacer for postcss | thompsongl | 84 | (JavaScript)

README

        
# postcss-class-prefix [![Build Status](https://secure.travis-ci.org/thompsongl/postcss-class-prefix.png?branch=master)](http://travis-ci.org/thompsongl/postcss-class-prefix)

___

## ⚠️ Repo no longer actively maintained

Please look to [postcss-prefixer](https://github.com/marceloucker/postcss-prefixer) or [postcss-slds-prefix](https://github.com/salesforce-ux/postcss-slds-prefix) for similar functionallity in active repos.

___

A [PostCSS](https://github.com/postcss/postcss) plugin to prefix/namespace classes.

Avoid collisions with other libraries/stylesheets by prefixing your components with a namespace.

__Example input__

```css

.Component { /* ... */ }

.Component--modifier { /* ... */ }

.Component-descendent { /* ... */ }

```

__Example output__

`classPrefix('pfx-')`

```css

.pfx-Component { /* ... */ }

.pfx-Component--modifier { /* ... */ }

.pfx-Component-descendent { /* ... */ }

```

## Installation

```

npm install postcss-class-prefix

```

## Usage

```javascript

var fs        = require('fs');

var postcss   = require('postcss');

var classPrfx = require('postcss-class-prefix');

var css = fs.readFileSync('css/my-file.css', 'utf8').toString();

var out = postcss()

          .use(classPrfx('my-prefix-'))

          .process(css);

```

### Using the `ignore` option

```javascript

var fs        = require('fs');

var postcss   = require('postcss');

var classPrfx = require('postcss-class-prefix');

var css = fs.readFileSync('css/my-file.css', 'utf8').toString();

var out = postcss()

          .use(classPrfx('my-prefix-', { ignore: [/ng-/, 'some-class-to-ignore']}))

          .process(css);

```

## License

MIT

## Acknowledgements

* Based on [rework-class-prefix](https://github.com/jnv/rework-class-prefix) ([originally](https://github.com/johnotander/rework-class-prefix))