[postcss][git_url]-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.

$3

- 🧹 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

$3

``bash
npm install postcss-remove-duplicate-values --save-dev

or

pnpm add postcss-remove-duplicate-values -D

or

yarn add postcss-remove-duplicate-values -D
`

$3

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

$3

The plugin automatically removes duplicates from your CSS.

📖 Examples

$3

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

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

$3


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

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

$3


`css
/ 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 |

$3

Filter which CSS selectors to process.

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

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

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

$3

Keep or remove empty CSS rules.

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

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

🔧 Advanced Usage

$3


`js
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; }
})
`

$3


`js
// 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

$3

`css
/ 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 /
}
`

$3


`css
/ 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 →

$3

- ✨ 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

[PostCSS Remove Duplicate Values]: https://github.com/xettri/postcss-remove-duplicate-values
[npm_url]: https://www.npmjs.com/package/postcss-remove-duplicate-values
[git_url]: https://github.com/xettri/postcss-remove-duplicate-values
[PostCSS]: https://github.com/postcss/postcss