Package Exports

postcss-combine-duplicated-selectors

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-combine-duplicated-selectors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Postcss combine duplicated selectors

Automatically detects and combines duplicated css selectors so you don't have to 😄

Usage

Requirements

In order to use this you will need to have postcss installed. Depending on whether or not you want to use the CLI you need to install postcss-cli.

Using PostCSS JS API

'use strict';

const fs = require('fs');
const postcss = require('postcss');
const css = fs.readFileSync('src/app.css');

postcss([require('postcss-combine-duplicated-selectors')])
    .process(css, {from: 'src/app.css', to: 'app.css'})
    .then((result) => {
      fs.writeFileSync('app.css', result.css);
      if (result.map) fs.writeFileSync('app.css.map', result.map);
    });

Using PostCSS CLI

postcss style.css --use postcss-combine-duplicated-selectors --output newcss.css

Example

Input

.module {
  color: green;
}
.another-module {
  color: blue;
}
.module {
  background: red;
}
.another-module {
  background: yellow;
}

Output

.module {
  color: green;
  background: red;
}
.another-module {
  color: blue;
  background: yellow;
}

Duplicated Properties

Duplicated properties can optionally be combined.

Set the removeDuplicatedProperties option to true to enable.

const postcss = require('postcss');
const combineSelectors = require('postcss-combine-duplicated-selectors');

postcss([combineSelectors({removeDuplicatedProperties: true})]);

When enabled the following css

.a {
  height: 10px;
  background: orange;
  background: rgba(255, 165, 0, 0.5);
}

will combine into

.a {
  height: 10px;
  background: rgba(255, 165, 0, 0.5);
}

Media Queries

If you have code with media queries, pass code through postcss-combine-media-query before postcss-combine-duplicated-selectors to ensure optimal results.