PostCSS plugin for css modules to compose local-scope classes
postcss([require('postcss-icss-composes')])
See PostCSS docs for examples for your environment.
composes
and compose-with
combines specified class name with rule class name.
.buttonStyle {
background: #fff;
}
.buttonStyle:hover {
box-shadow: 0 0 4px -2px;
}
.cellStyle {
margin: 10px;
}
.addButton {
composes: buttonStyle cellStyle;
color: green;
}
/* becomes */
:export {
buttonStyle: buttonStyle;
cellStyle: cellStyle;
addButton: addButton buttonStyle cellStyle
}
.buttonStyle {
background: #fff;
}
.buttonStyle:hover {
box-shadow: 0 0 4px -2px;
}
.cellStyle {
margin: 10px;
}
.addButton {
color: green;
}
You may use any identifier for composition
.addButton {
composes: globalButtonStyle;
background: #000;
}
/* becomes */
:export {
addButton: addButton globalButtonStyle
}
.addButton {
background: #000;
}
postcss-icss-selectors plugin allows to local-scope classes.
.buttonStyle {
background: #fff;
}
.addButton {
composes: buttonStyle;
border: 1px solid #000;
}
/* becomes */
:export {
buttonStyle: __scope__buttonStyle;
addButton: __scope__addButton __scope__buttonStyle
}
.__scope__buttonStyle {
background: #fff;
}
.__scope__addButton {
border: 1px solid #000;
}
/* compositions.css */
.button {
background: #fff;
border: 1px solid #000;
}
.cell {
margin: 10px;
}
/* main.css */
.addButton {
composes: button cell from './composition.css';
font-size: 20px;
}
postcss-icss-composes passes result.messages for each composed class name
{
plugin: 'postcss-icss-composes',
type: 'icss-composed',
name: string, // rule class name
value: string // composed class name
}
MIT © Glen Maddern and Bogdan Chadkin, 2015