PostCSS Merge Selectors

PostCSS plugin to combine selectors that have identical rules. Can be configured to only merge rules who's selectors match specific filters.

Before:

  .foo { top: 0; }
  .baz { left: 10px; }
  .bar { top: 0; }

After:

  .foo, .bar { top: 0; }
  .baz { left: 10px; }

There be dragons :(

This plugin isn't smart. It hasn't got a chuffing clue what your css is trying to achieve. Combining selectors might satisfy your urge to be tidy, but the warm fluffy feeling will subside pretty quickly when your new bijou css causes styles to be applied differently. In order to merge two selectors we have to move one of them. That means they may now override rules that used to be after them, or they may be overridden by rules that used to be before them. I recommend you use the selectorFilter option to only target specific selectors and the promote option if you need to move the resulting selectors further down the stylesheet. Test the resulting css carefully.

Install

npm install postcss-merge-selectors --save-dev

Usage

var postcssMerge = require('postcss-merge-selectors');
postcss([ postcssMerge(opts) ]);

Options

You supply a map of one or more "matchers". The key for each can be any name that'll help jog your memory when you look at your code again after returning from your holiday.

All the selectors found by a matcher will be grouped by their css rules where they're the same.

If you're into SQL then it's a bit like this (pseudocode) SELECT CONCAT(selector), styles FROM stylesheet WHERE selector LIKE '%foobar%' GROUP BY styles (I dunno if that helps but it seemed like a good idea at the time.)

Options for each matcher:

• selectorFilter (String|RegExp) to find several selectors as candidates for merge. Those with identical style declarations will be merged.
• promote (Boolean) to place merged selectors where the last rule matching selectorFilter was found in the css. false (default) will place them all where the first match was found.

Example:

var opts = {
  matchers : {
    mergeAllMyFoobars : {
      selectorFilter : /.\foobar/,
      promote : true
    },
    someOtherMerge : {
      ...
    }
  }
}

And what is this weird promote:true flag about?

See PostCSS docs for examples for your environment.