A CSS Modules transform to extract export statements from local-scope classes
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

postcss-icss-composes Build Status

PostCSS plugin for css modules to compose local-scope classes

Usage

postcss([require('postcss-icss-composes')])

See PostCSS docs for examples for your environment.

Local class composition

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;
}

Global class composition

You may use any identifier for composition

.addButton {
  composes: globalButtonStyle;
  background: #000;
}

/* becomes */
:export {
  addButton: addButton globalButtonStyle
}
.addButton {
  background: #000;
}

Scoping class names

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;
}

External composition

/* compositions.css */
.button {
  background: #fff;
  border: 1px solid #000;
}
.cell {
  margin: 10px;
}

/* main.css */
.addButton {
  composes: button cell from './composition.css';
  font-size: 20px;
}

Messages

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
}

License

MIT © Glen Maddern and Bogdan Chadkin, 2015