PostCSS Css To Bem Css

PostCSS plugin to convert CSS to different BEM notations.

/* Input example */
.b1__e1 {

}

/* Output example */
.B1-E1 {

}

Usage

postcss([
    require('postcss-css-to-bem-css')({
        sourceNaming: 'origin',
        targetNaming: 'react'
    })
])

Options

• sourceNaming
• targetNaming
• transforms
• stringify
• blacklist
• whitelist

For examples please refer to specs.

See PostCSS docs for examples for your environment.

Convert all files in a folder

const fs = require('fs');
const util = require('util');
const postcss = require('postcss');

const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
const glob = util.promisify(require('glob'));
const bemCss = postcss([require('postcss-css-to-bem-css')]);

glob('**/*.css').then(files =>
    files.map(file =>
        readFile(file).then(originalCss =>
            bemCss.process(originalCss, { from: file })
                .then(css => writeFile(file, css))
        )
    ));