https://github.com/bike-js/postcss-bike
PostCSS plugin for transformation of custom At-rules to BEM-like rules
https://github.com/bike-js/postcss-bike
bem bike css plugin postcss postcss-plugin
Last synced: about 1 year ago
JSON representation
PostCSS plugin for transformation of custom At-rules to BEM-like rules
- Host: GitHub
- URL: https://github.com/bike-js/postcss-bike
- Owner: Bike-JS
- Created: 2017-10-03T14:33:07.000Z (almost 9 years ago)
- Default Branch: release/2.0.0
- Last Pushed: 2023-06-12T02:46:03.000Z (about 3 years ago)
- Last Synced: 2025-04-26T18:44:53.015Z (about 1 year ago)
- Topics: bem, bike, css, plugin, postcss, postcss-plugin
- Language: JavaScript
- Homepage:
- Size: 136 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bike plugin [![npm version][npm-image]][npm-url] [![Deps][deps-image]][deps-url]
> This [PostCSS] plugin for implements transformation of custom At-rules to BEM-like rules
[PostCSS]: https://github.com/postcss/postcss
[posthtml-bike]: https://github.com/Satanpit/posthtml-bike
## Install
```
npm install -S @bikejs/postcss-bem
```
## Usage
```javascript
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
```css
@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:
```css
.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](LICENSE)
[travis-url]: https://travis-ci.org/Bike-JS/postcss-bike
[travis-image]: http://img.shields.io/travis/Bike-JS/postcss-bike.svg?style=flat-square
[npm-url]: https://www.npmjs.org/package/postcss-bike
[npm-image]: http://img.shields.io/npm/v/postcss-bike.svg?style=flat-square
[deps-url]: https://david-dm.org/artem-tolstykh/postcss-bike
[deps-image]: https://david-dm.org/artem-tolstykh/postcss-bike.svg?style=flat-square