Bike plugin
This PostCSS plugin based on the idea of posthtml-bike by Alex Khyrenko and implements transformation of custom At-rules to BEM-like rules
Install
npm install --save-dev postcss-bike
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 50 px ;
background-color : # fff ;
color : # 000 ;
}
@ elem main {
flex : 1 1 auto ;
@ mod hidden {
display : none ;
}
}
@ elem footer {
flex : 0 0 50 px ;
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 50 px ;
background-color : # fff ;
color : # 000 ;
}
. example__main {
flex : 1 1 auto ;
}
. example__main_hidden {
display : none ;
}
. example__footer {
flex : 0 0 50 px ;
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).
Credits
License MIT