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

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(function(result) {
    fs.writeFileSync('app.css', result.css);
    if (result.map) fs.writeFileSync('app.css.map', result.map);
  });

Using PostCSS CLI (Broken)

Note: PostCSS CLI does not support ES6 modules yet, here is how it will be able to be used once postcss-cli has resolved the issue.

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
}

Limitations

Currently the plugin does not differentiate media blocks.

so this code

.module {
  color: green
}
.another-module {
  color: blue
}
@media (max-width: 600px) {
  .module {
    background: red
  }
  .another-module {
    background: yellow
  }
}

produces this output

.module {
  color: green;
  background: red
}
.another-module {
  color: blue;
  background: yellow
}
@media (max-width: 600px) {
}