postcss-variants

    0.1.1 • Public • Published

    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)

    Install

    npm i postcss-variants

    DownloadsWeekly Downloads

    5

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • agangji