PostCSS plugin that prefix a namespace to a selector
JavaScript CSS
Clone or download
Latest commit 52ea07d Jul 8, 2016
Permalink
Failed to load latest commit information.
examples Fix node.nodes Jun 21, 2016
src Bugfix & v1.1.1 Jul 8, 2016
test Add bem function Jun 26, 2016
.babelrc Rewrite with es2015 Jun 21, 2016
.gitignore Rewrite with es2015 Jun 21, 2016
.npmignore Update readme Jun 21, 2016
.travis.yml Remove some files Jun 21, 2016
LICENSE First commit Nov 2, 2015
README.md Add bem function Jun 26, 2016
gulpfile.babel.js Rewrite with es2015 Jun 21, 2016
index.js Add bem function Jun 26, 2016
package.json Bugfix & v1.1.1 Jul 8, 2016

README.md

postcss-namespace

npm version Build Status XO code style

PostCSS plugin that prefix a namespace to a selector


Install

npm i postcss-namespace

Usage

Write @prefix atrule to your css file. (e.g. input.css)

.outside {}

@prefix block not(.not-target, /ignore/);

.box {}

.inner .target {}
.inner .not-target {}
.inner .ignore-1 {}
.inner .ignore-2,
.inner .target {}

@prefix ;

.box {}

@prefix block2;

.box {}
&:hover {}
[href^="https"][target="_blank"] {}

@media screen and (min-width: 768px) {
  #media {}
  #media #inner,
  .media .inner.box {}
}

Use this plugin in PostCSS (e.g.)

const fs = require('fs');
const postcss = require('postcss');
const namespace = require('postcss-namespace');

const css = fs.readFileSync('./sample.css', 'utf-8');

// or postcss([namespace.bem])
postcss([namespace({token: '__'})])
  .process(css)
  .then(result => console.log(result.css));

Will get output like following CSS

.outside {}

.block__box {}

.block__inner .block__target {}
.block__inner .not-target {}
.block__inner .ignore-1 {}
.block__inner .ignore-2,
.block__inner .block__target {}

.box {}

.block2__box {}
&:hover {}
[href^="https"][target="_blank"] {}

@media screen and (min-width: 768px) {
  #block2__media {}
  #block2__media #block2__inner,
  .block2__media .block2__inner.block2__box {}
}

AtRule Function

  • not (string|regexp)...
    Specify selector or pattern which Don't want a prefix

Plugin Function

  • namespace.bem
    Same as namespace({token: '__'})

Options

  • token
    Token for consolidate(e.g.) namespace({token: '__'})
    - by default

Run to example

1 Close this

git clone git@github.com:totora0155/postcss-namespace.git

2 Change directory

cd postcss-namespace

3 Install modules

npm install

4 Run to script

cd examples && node postcss.js

Change log

version log
1.1.0 Add bem function. (Alias {token: '__'})
1.0.1 Fix node.nodes
1.0.0 Rewrite with es2015 & Add not func in AtRule
0.2.5 Bug fix for :nth* selector & Revert v0.2.2
0.2.4 Bug fix for pseudo selector
0.2.3 Bug fix (Tag not output after atrule)
0.2.2 Fix, occured error to postcss-selector-not syntax
0.2.0 Change at-rule keyword to @prefix from @namespace #1