PostCSS Composes

PostCSS plugin to make CSS Modules' composes work with any selectors.

Caution: use at your own risk.

.foo {
  color: red;
}
.bar:hover {
  composes: foo;
}

.foo {
  color: red;
}
.bar:hover {
  color: red;
}

Usage

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

See PostCSS docs for examples for your environment.

Why?

CSS Modules' composes is great but it only works with classes (see: 33, 41, 42, 68 and 80).

For example, the suggested way of composing pseudo-classes with CSS Modules requires the creation of extra classes:

.red {
  color: red;
}
.blue-on-hover:hover {
  color: blue;
}
 
.foo {
  composes: red blue-on-hover;
}

Credits

Thanks Aaron7 for the idea.