postcss-discard-duplicates

What is postcss-discard-duplicates?

The postcss-discard-duplicates package is a PostCSS plugin designed to remove duplicate rules, declarations, and @rules from your CSS. This helps in reducing the file size and cleaning up the CSS for better performance and readability.

What are postcss-discard-duplicates's main functionalities?

Discard duplicate rules

This feature removes duplicate CSS rules. If two or more rules are identical, only one is kept.

"const postcss = require('postcss');
const discardDuplicates = require('postcss-discard-duplicates');

postcss([ discardDuplicates() ])
.process('a { color: black; } a { color: black; }', { from: undefined })
.then(result => {
  console.log(result.css);
  // Output: 'a { color: black; }'
});"

Discard duplicate declarations within a rule

This feature removes duplicate declarations within a single rule, keeping only one instance of the declaration.

"const postcss = require('postcss');
const discardDuplicates = require('postcss-discard-duplicates');

postcss([ discardDuplicates() ])
.process('a { color: black; color: black; }', { from: undefined })
.then(result => {
  console.log(result.css);
  // Output: 'a { color: black; }'
});"

Discard duplicate @rules

This feature removes duplicate @rules from the CSS, ensuring that only one instance of each @rule is present.

"const postcss = require('postcss');
const discardDuplicates = require('postcss-discard-duplicates');

postcss([ discardDuplicates() ])
.process('@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }
@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }', { from: undefined })
.then(result => {
  console.log(result.css);
  // Output: '@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }'
});"

Other packages similar to postcss-discard-duplicates

cssnano

cssnano is a modular CSS minifier that includes functionalities similar to postcss-discard-duplicates as part of its optimization suite. It goes beyond just discarding duplicates by also compressing colors, reordering rules, and more for maximum efficiency.

postcss-merge-rules

postcss-merge-rules combines selectors with identical rules into one, which can indirectly remove duplicates by merging them. It's more focused on consolidation rather than direct removal of duplicates.

clean-css

clean-css is a fast and efficient CSS optimizer for Node.js and the web. It provides functionalities similar to postcss-discard-duplicates by removing duplicates, but it also offers a wide range of other optimizations like reordering rules, merging identical rules, and minifying the CSS.

README

postcss-discard-duplicates

Discard duplicate rules in your CSS files with PostCSS.

Install

With npm do:

npm install postcss-discard-duplicates --save

Example

This module will remove all duplicate rules from your stylesheets. It works on at rules, normal rules and declarations. Note that this module does not have any responsibility for normalising declarations, selectors or whitespace, so that it considers these two rules to be different:

h1, h2 {
    color: blue;
}

h2, h1 {
    color: blue;
}

It has to assume that your rules have already been transformed by another processor, otherwise it would be responsible for too many things.

Input

h1 {
    margin: 0 auto;
    margin: 0 auto
}

h1 {
    margin: 0 auto
}

Output

h1 {
    margin: 0 auto
}

Usage

See the PostCSS documentation for examples for your environment.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs