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

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 --use postcss-combine-duplicated-selectors *.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 mq-packer before postcss-combine-duplicated-selectors to ensure optimal results.