https://github.com/garthdb/postcss-add-namespace
Namespace plugin for PostCSS
https://github.com/garthdb/postcss-add-namespace
Last synced: 3 months ago
JSON representation
Namespace plugin for PostCSS
- Host: GitHub
- URL: https://github.com/garthdb/postcss-add-namespace
- Owner: GarthDB
- License: apache-2.0
- Created: 2016-08-17T23:00:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-02-29T20:32:10.000Z (over 1 year ago)
- Last Synced: 2025-04-04T00:46:32.395Z (3 months ago)
- Language: JavaScript
- Size: 34.2 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELONG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Add Namespace
[](https://travis-ci.org/GarthDB/postcss-add-namespace) [](https://codeclimate.com/github/GarthDB/postcss-add-namespace) [](https://codeclimate.com/github/GarthDB/postcss-add-namespace/coverage) [](https://codeclimate.com/github/GarthDB/postcss-add-namespace/issues) [](https://david-dm.org/GarthDB/postcss-add-namespace) [](http://inch-ci.org/github/GarthDB/postcss-add-namespace) [](https://badge.fury.io/js/postcss-add-namespace)
---
Namespace plugin for PostCSS - based on [Kristofer Joseph's](http://twitter.com/dam) [rework-namespace](https://github.com/kristoferjoseph/rework-namespace) plugin.
## Usage
Pass the namespace as the first argument:
```js
var namespace = require('postcss-add-namespace');var css = postcss([namespace('ns')])
.process('.button { color: black; }')
.then(results => {results.toString()});
```Results:
```css
.ns-button { color: black; }
```### Options
Pass an options object as the second argument.
#### options.not
Don't prefix specific classes or classes that match a regex.
```js
var css = postcss([namespace('ns', { not: [ /\.icon/, '.button-bar' ] })])
.process(inputCSS)
.then(results => {results.toString()});
```#### options.only
Only prefix specific classes or classes that match a regex.
```js
var css = postcss([namespace('ns', { only: [ /\.icon/, '.icon-group' ] })])
.process(inputCSS)
.then(results => {results.toString()});
```### Examples
#### Prefix every class
```js
var css = postcss([namespace('ns')])
.process(inputCSS)
.then(results => {results.toString()});
```#### Prefix every class except icon classes
```js
var css = postcss([namespace('ns', { not: /\.icon-/ })])
.process(inputCSS)
.then(results => {results.toString()});
```#### Prefix all classes with "button" in them except .button itself
```js
var css = postcss([namespace('ns', {
only: /button/,
not: '.button'
})])
.process(inputCSS)
.then(results => {results.toString()});
```