Wondering what’s next for npm?Check out our public roadmap! »

    @bikejs/postcss-bem

    1.0.1 • Public • Published

    Bike plugin npm version Deps

    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 headerfooter {
          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

    Install

    npm i @bikejs/postcss-bem

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    23.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar