PostCSS plugin that prefix a namespace to a selector
npm i postcss-namespace
# if still
npm i postcss
Write @prefix atrule to your css file.
(e.g. input.css)
.outside {}
@prefix block;
.box {}
.inner {}
.inner .exists {}
.inner .new {}
.inner .exists,
.inner .outside {}
.exists {}
@prefix ;
.box {}
.inner {}
@prefix block2;
.box {}
[class*="box"] {}
.inner {}Use this plugin in PostCSS (e.g.)
var fs = require('fs');
var postcss = require('postcss');
var namespace = require('postcss-namespace');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss()
.use(namespace({token: '__'}))
.process(css)
.css;
console.log(output);Will get output like following CSS
.outside {}
.block__box {}
.block__inner {}
.block__inner .block__exists {}
.block__inner .new {}
.block__inner .block__exists,
.block__inner .outside {}
.block__exists {}
.box {}
.inner {}
.block2__box {}
[class*="box"] {}
.block2__inner {}token
Token for consolidate(e.g.)namespace({token: '__'})
By default, it is-
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
npm run example
| version | log |
|---|---|
| 0.2.0 | Change at-rule keyword to @prefix from @namespace #1 |