postcss-merge-queries

A PostCSS plugin to merge media queries and optionally sort them. Nested media queries are supported, including those in @layer rules.

Installation

1npm install @eslym/postcss-merge-queries

Usage

Add @eslym/postcss-merge-queries to your PostCSS configuration.

Without sorting

1// postcss.config.js
2module.exports = {
3  plugins: [require("@eslym/postcss-merge-queries")()],
4};

With sorting

1const merge = require("@eslym/postcss-merge-queries");
2// postcss.config.js
3module.exports = {
4  plugins: [
5    merge({
6      // Sort queries by the witdh and height features
7      sortQuery: merge.simpleCompare,
8    }),
9  ],
10};

Example

Input CSS:

1/* Before */
2@media (min-width: 768px) {
3  .foo {
4    color: red;
5  }
6}
7@media (min-width: 768px) {
8  .bar {
9    color: blue;
10  }
11}

Output CSS:

1/* After */
2@media (min-width: 768px) {
3  .foo {
4    color: red;
5  }
6  .bar {
7    color: blue;
8  }
9}