postcss-class-namespace v0.1.0

postcss-class-namespace

Install

npm i postcss-class-namespace

Usage

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

.outside {}

@namespace block;

.box {}

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

&: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-class-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 .target {}
.block .inner .not-target {}
.block .inner .ignore-1 {}
.block .inner .ignore-2,
.block .inner .target {}

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

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