PostCSS plugin that prefix a namespace to a selector
npm i postcss-namespace
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 {}
}not(string|regexp)...
Specify selector or pattern which Don't want a prefix
namespace.bem
Same asnamespace({token: '__'})
token
Token for consolidate(e.g.)namespace({token: '__'})
-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: '__'}) |
| 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 |