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