/postcss-add-namespace

Namespace plugin for PostCSS

Primary LanguageJavaScriptApache License 2.0Apache-2.0

PostCSS Add Namespace

Build Status Code Climate Test Coverage Issue Count Dependency Status Inline docs npm version

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()});