postcss-css-to-bem-css

PostCSS plugin to convert CSS to different BEM notations

Usage no npm install needed!

<script type="module">
  import postcssCssToBemCss from 'https://cdn.skypack.dev/postcss-css-to-bem-css';
</script>

README

PostCSS Css To Bem Css Build Status

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))
        )
    ));