PostCSS plugin that prefix a namespace to a selector
npm install postcss-namespace


PostCSS plugin that prefix a namespace to a selector
---
```
npm i postcss-namespace
Write @prefix atrule to your css file.`
(e.g. input.css)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.)
`javascript
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
`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 {}
}
`
- not (string|regexp)...
Specify selector or pattern which Don't want a prefix
- namespace.bem namespace({token: '__'})
Same as
- token namespace({token: '__'})
Token for consolidate(e.g.) -
by default
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
|version|log|
|:-:|:--|
|1.1.0|Add bem function. (Alias {token: '__'})|node.nodes
|1.0.1|Fix |:nth*
|1.0.0|Rewrite with es2015 & Add not func in AtRule|
|0.2.5|Bug fix for selector & Revert v0.2.2 |@prefix
|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 from @namespace` #1|