Kolache

Import and distribute configurable CSS packages via npm.

Full documentation at kolache.keithjgrant.com.

/* main.css */
@import 'button' as .button;
@import 'button:variant' as .button--danger {
  $color: red;
}
 
/* button.css */
@export {
  $(name) {
    display: inline-block;
    padding: 0.5em;
    border: 1px solid blue;
    background-color: blue;
  }
}
 
@export as 'variant' {
  $(name) {
    border-color: $color;
    color: $color;
  }
}

Compiles to:

.button {
  display: inline-block;
  padding: 0.5em;
  border: 1px solid blue;
  background-color: blue;
}
 
.button--danger {
  border-color: red;
  color: red;
}

Usage

postcss([require('kolache')]);

See PostCSS docs for examples for your environment.