@bikejs/postcss-bem

Bike plugin

This PostCSS plugin for implements transformation of custom At-rules to BEM-like rules

Install

npm install -S @bikejs/postcss-bem

Usage

const { readFileSync } = require('fs');
const postcss = require('postcss');
const bike = require('postcss-bike');

const css = readFileSync('input.css');

postcss([bike()]).process(css).then((res) => console.log(output.css));

Example

Default

@component example {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  background-color: #f5f5f5;
  color: #333;

  @mod theme[dark] {
    background-color: #333;
    color: #f5f5f5;

    @elem header, footer {
      background-color: #1b1b1b;
      color: #fff;
    }
  }

  @elem header {
    flex: 0 0 50px;
    background-color: #fff;
    color: #000;
  }

  @elem main {
    flex: 1 1 auto;

    @mod hidden {
      display: none;
    }
  }

  @elem footer {
    flex: 0 0 50px;
    background-color: #fff;
    color: #000;
  }
}

Transformed to:

.example {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  background-color: #f5f5f5;
  color: #333;
}
.example_theme_dark {
  background-color: #333;
  color: #f5f5f5;
}
.example_theme_dark .example__header,
.example_theme_dark .example__footer {
  background-color: #1b1b1b;
  color: #fff;
}
.example__header {
  flex: 0 0 50px;
  background-color: #fff;
  color: #000;
}
.example__main {
  flex: 1 1 auto;
}
.example__main_hidden {
  display: none;
}
.example__footer {
  flex: 0 0 50px;
  background-color: #fff;
  color: #000;
}

Options

component

type: String
default: {component: 'component'}

Allows to set custom name for component @rule.

element

type: String
default: {element: 'elem'}

Allows to set custom name for element @rule.

modifier

type: String
default: {modifier: 'mod'}

Allows to set custom name for modifier @rule.

modifierRegExp

type: RegExp
default: {modifierRegExp: /(\w+)\[(\w+)\]/}

Allows to set custom regular expressions for modifier params. Where $1 is Modifier Name and $2 is Modifier Value. For changing Modifier Value Separator, change default separator \[$2\], which goes before and after $2 (only this [ ] symbols).

License MIT