postcss-remove-duplicate-values

Smart PostCSS plugin that removes duplicate CSS properties, reduces bundle size, and improves CSS maintainability.

✨ What It Does?

Automatically removes duplicate CSS properties from your stylesheets while keeping the most important ones. Perfect for cleaning up CSS and improving performance.

🎯 Key Features

• 🧹 Removes duplicate properties (keeps the last one)
• ⚡ Handles !important declarations intelligently
• 🎨 Supports vendor prefixes and modern CSS
• 🎯 Filters specific selectors (optional)
• 🗑️ Cleans empty rules (configurable)
• 🚀 Zero configuration needed

🚀 Quick Start

1. Install

npm install postcss-remove-duplicate-values --save-dev
# or
pnpm add postcss-remove-duplicate-values -D
# or
yarn add postcss-remove-duplicate-values -D

2. Use in PostCSS

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-remove-duplicate-values')
  ]
}

3. That's it! 🎉

The plugin automatically removes duplicates from your CSS.

📖 Examples

Basic Duplicate Removal

/* Before */
.button {
  color: red;
  color: blue;
  margin: 10px;
  margin: 20px;
}

/* After */
.button {
  color: blue;
  margin: 20px;
}

!important Handling

/* Before */
.button {
  color: red !important;
  color: blue;
  font-weight: normal;
  font-weight: bold !important;
}

/* After */
.button {
  color: red !important;
  font-weight: bold !important;
}

Vendor Prefixes

/* Before */
.button {
  transform: translateX(40px);
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  transform: translateX(10px);
}

/* After */
.button {
  /* Plugin removes duplicate 'transform' properties, keeping the last one */
  /* Vendor prefixes are preserved */
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  transform: translateX(10px);
}

⚙️ Configuration Options

Before applying the plugin, you can configure the following options:

| Option | Type | Default | | --------------------------------- | --------------------------------------------------- | ----------- | | selector | (selector: string) => boolean \| string \| RegExp | undefined | | preserveEmpty | boolean | false |

selector

Filter which CSS selectors to process.

// Only process .button selectors
removeDuplicateValues({
  selector: '.button'
})

// Process selectors matching regex
removeDuplicateValues({
  selector: /^\.btn-/
})

// Custom function
removeDuplicateValues({
  selector: (selector) => selector.includes('button')
})

preserveEmpty

Keep or remove empty CSS rules.

// Remove empty rules (default)
removeDuplicateValues({
  preserveEmpty: false
})

// Keep empty rules
removeDuplicateValues({
  preserveEmpty: true
})

🔧 Advanced Usage

With PostCSS API

const postcss = require('postcss')
const removeDuplicateValues = require('postcss-remove-duplicate-values')

const css = `
.button {
  color: red;
  color: blue;
}`

postcss([removeDuplicateValues()])
  .process(css)
  .then(result => {
    console.log(result.css)
    // Output: .button { color: blue; }
  })

With Build Tools

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('postcss-remove-duplicate-values')
              ]
            }
          }
        ]
      }
    ]
  }
}

📚 More Examples

Selector Filtering

/* Input CSS */
.container {
  color: red;
  color: blue;
}
.button {
  margin: 10px;
  margin: 20px;
}

/* With selector: '.container' */
.container {
  color: blue;
}
.button {
  margin: 10px;
  margin: 20px; /* Not processed */
}

Empty Rule Handling

/* Input CSS */
.empty-rule {
}
.button {
  color: blue;
}

/* With preserveEmpty: false */
.button {
  color: blue;
}
/* .empty-rule removed */

/* With preserveEmpty: true */
.empty-rule {
}
.button {
  color: blue;
}

🎮 Try It Live!

Test the plugin in real-time with our interactive playground:

🎮 Try the Playground →

What You Can Do in the Playground:

• ✨ Test CSS processing in real-time
• 🎯 Experiment with options (selector filtering, empty rule preservation)
• 📚 Try pre-built examples for common scenarios
• 📊 See live statistics of duplicate removal results
• 🎨 Understand plugin behavior through interactive examples

Made with ❤️ by Bharat Rawat