Awesome

PostCSS Add Namespace

<a href="http://postcss.org/"><img align="right" width="95" height="95" title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo.svg"></a>

Namespace plugin for PostCSS - based on Kristofer Joseph's rework-namespace plugin.

Usage

Pass the namespace as the first argument:

var namespace = require('postcss-add-namespace');

var css = postcss([namespace('ns')])
  .process('.button { color: black; }')
  .then(results => {results.toString()});

Results:

.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.

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.

var css = postcss([namespace('ns', { only: [ /\.icon/, '.icon-group' ] })])
  .process(inputCSS)
  .then(results => {results.toString()});

Examples

Prefix every class

var css = postcss([namespace('ns')])
  .process(inputCSS)
  .then(results => {results.toString()});

Prefix every class except icon classes

var css = postcss([namespace('ns', { not: /\.icon-/ })])
  .process(inputCSS)
  .then(results => {results.toString()});

Prefix all classes with "button" in them except .button itself

var css = postcss([namespace('ns', {
    only: /button/,
    not: '.button'
  })])
  .process(inputCSS)
  .then(results => {results.toString()});