PostCSS Variants

PostCSS plugin for generating variants of functional CSS. Variant types are pluggable with included plugins to generate responsive and hover variants.

Here's an example using the built-in hover variant.

@variants hover {
  .black { color: black; }
}

.black { color: black; }
.hover-black:hover { color: black; }

Here's an example using the built-in responsive variant.

@variants responsive {
  .black { color: black; }
}

.black { color: black; }
@media (--breakpoint-sm) {
  .black-sm { color: black; }
}
@media (--breakpoint-md) {
  .black-md { color: black; }
}
@media (--breakpoint-lg) {
  .black-lg { color: black; }
}
@media (--breakpoint-xl) {
  .black-xl { color: black; }
}

They can be combined to generate both.

@variants hover, responsive {
  .black { color: black; }
}

.black { color: black; }
.hover-black:hover { color: black; }
@media (--breakpoint-sm) {
  .black-sm { color: black; }
}
@media (--breakpoint-md) {
  .black-md { color: black; }
}
@media (--breakpoint-lg) {
  .black-lg { color: black; }
}
@media (--breakpoint-xl) {
  .black-xl { color: black; }
}

They can also be nested to apply them combinatorially.

@variants responsive {
  @variants hover {
    .black { color: black; }
  }
}

.black { color: black; }
.hover-black:hover { color: black; }
@media (--breakpoint-sm) {
  .black-sm { color: black; }
  .hover-black-sm:hover { color: black; }
}
@media (--breakpoint-md) {
  .black-md { color: black; }
  .hover-black-md:hover { color: black; }
}
@media (--breakpoint-lg) {
  .black-lg { color: black; }
  .hover-black-lg:hover { color: black; }
}
@media (--breakpoint-xl) {
  .black-xl { color: black; }
  .hover-black-xl:hover { color: black; }
}

Usage

Install package:

npm install --save-dev postcss-variants

Use postcss-variants as a plugin to PostCSS:

postcss([
  require('postcss-variants')()
]).process(YOUR_CSS)

Customize transform function

Use the transform param to customize the selector structure

postcss([
  require('postcss-variants')({
    transform: (selector, suffix) => `${suffix}-${selector}`
  })
]).process(YOUR_CSS)