PostCSS Responsive Query

PostCSS plugin that automatically expands rules into media queries.

Install

$ yarn add postcss-responsive-query -D
# or
$ npm install post-css-responsive-query --save-dev

Configuration

This plugin requires a breakpoints object in options:

breakpoints: {
  mobile: '(max-width: 600px)',
  tablet: '(max-width: 960px) and (min-width: 600px)',
  desktop: '(min-width: 961px)'
}

These keys are used as suffixes for the generated classnames, as shown in the example below.

Usage

Rules inside of a responsive query will be duplicated into the media queries you specify with a suffix you specify appended to the classname:

/* Input */
@responsive {
  .foo {
    color: red;
  }
}

/* Output */
@media (max-width: 600px) {
  .foo-mobile {
    color: red;
  }
}

@media (max-width: 960px) and (min-width: 600px) {
  .foo-tablet {
    color: red;
  }
}

@media (min-width: 961px) {
  .foo-desktop {
    color: red;
  }
}

Only class selectors are allowed inside responsive queries. The following will throw an error:

@responsive {
  /* ERROR, not a class selector */
  div {
    color: red;
  }
}

Responsive Query Parameters

You can pass parameters to the responsive query to indicate what classnames to transform:

/* Input */
@responsive (.bar) {
  .foo.bar + .biz {
    color: red;
  }
}

/* Output */
@media (max-width: 600px) {
  .foo.bar-mobile + .biz { /* .foo and .biz classnames are untouched */
    color: red;
  }
}

/* ... */

Just like above, you should only use class selectors inside responsive query parameters:

/* ERROR, not a class selector */
@responsive (div) {
  /* ... */
}

Usage with Next.js

Read the Next.js docs about customizing the PostCSS config and add postcss-responsive-query to your list of plugins.

For example:

// postcss.config.js

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    ['postcss-responsive-query', {
      breakpoints: {
        mobile: '(max-width: 600px)',
        tablet: '(max-width: 960px) and (min-width: 600px)',
        desktop: '(min-width: 961px)'
      }
    }],
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3,
        features: {
          'custom-properties': false
        }
      }
    ]
  ]
}