PostCSS plugin that prefix a namespace to a selector
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
test
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
gulpfile.babel.js
index.js
package.json

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