https://github.com/tadatuta/postcss-css-to-bem-css

postcss plugin to convert CSS to rebem-css
https://github.com/tadatuta/postcss-css-to-bem-css

bem convention css methodology naming postcss

Last synced: 2 months ago
JSON representation

postcss plugin to convert CSS to rebem-css

• Host: GitHub
• URL: https://github.com/tadatuta/postcss-css-to-bem-css
• Owner: tadatuta
• License: mit
• Created: 2018-07-03T15:46:17.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-06-10T14:33:49.000Z (over 2 years ago)
• Last Synced: 2024-10-05T08:39:41.939Z (3 months ago)
• Topics: bem, convention, css, methodology, naming, postcss
• Language: JavaScript
• Size: 552 KB
• Stars: 6
• Watchers: 3
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Css To Bem Css [![Build Status][ci-img]][ci]

[PostCSS] plugin to convert CSS to different [BEM notations](https://en.bem.info/methodology/naming-convention/).

[PostCSS]: https://github.com/postcss/postcss

[ci-img]:  https://travis-ci.org/tadatuta/postcss-css-to-bem-css.svg

[ci]:      https://travis-ci.org/tadatuta/postcss-css-to-bem-css

```css

/* Input example */

.b1__e1 {

}

/* Output example */

.B1-E1 {

}

```

## Usage

```js

postcss([

    require('postcss-css-to-bem-css')({

        sourceNaming: 'origin',

        targetNaming: 'react'

    })

])

```

### Options

* sourceNaming

* targetNaming

* transforms

* stringify

* blacklist

* whitelist

For examples please refer to [specs](https://github.com/tadatuta/postcss-css-to-bem-css/blob/master/index.test.js).

See [PostCSS] docs for examples for your environment.

### Convert all files in a folder

```js

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

        )

    ));

```