0
# PostCSS Discard Duplicates
1

2
PostCSS Discard Duplicates is a PostCSS plugin that removes duplicate rules, declarations, and at-rules from CSS stylesheets to optimize file size. It provides intelligent deduplication by comparing node types, selectors, properties, values, and importance flags while preserving the semantic structure of CSS.
3

4
## Package Information
5

6
- **Package Name**: postcss-discard-duplicates
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install postcss-discard-duplicates`
10
- **Peer Dependencies**: postcss ^8.4.31
11
- **Node.js**: ^14 || ^16 || >=18.0
12

13
## Core Imports
14

15
```javascript
16
const postcssDiscardDuplicates = require("postcss-discard-duplicates");
17
```
18

19
For ES modules (using TypeScript-style import):
20

21
```javascript
22
import postcssDiscardDuplicates = require("postcss-discard-duplicates");
23
```
24

25
Or with modern ES module syntax:
26

27
```javascript
28
import postcssDiscardDuplicates from "postcss-discard-duplicates";
29
```
30

31
## Basic Usage
32

33
```javascript
34
const postcss = require("postcss");
35
const postcssDiscardDuplicates = require("postcss-discard-duplicates");
36

37
// Using PostCSS directly
38
const result = await postcss([
39
  postcssDiscardDuplicates()
40
])
41
  .process(css, { from: "input.css", to: "output.css" });
42

43
console.log(result.css);
44
```
45

46
Example transformation:
47

48
**Input CSS:**
49
```css
50
h1 {
51
  margin: 0 auto;
52
  margin: 0 auto
53
}
54

55
h1 {
56
  margin: 0 auto
57
}
58
```
59

60
**Output CSS:**
61
```css
62
h1 {
63
  margin: 0 auto
64
}
65
```
66

67
## Capabilities
68

69
### Plugin Creator Function
70

71
Creates a PostCSS plugin instance that removes duplicate CSS constructs.
72

73
```javascript { .api }
74
/**
75
 * Creates a PostCSS plugin that removes duplicate rules, declarations, and at-rules
76
 * @returns {import('postcss').Plugin} PostCSS plugin object
77
 */
78
function postcssDiscardDuplicates(): import('postcss').Plugin;
79
```
80

81
The plugin works by:
82
- **Rules**: Removes duplicate rules with identical selectors
83
- **Declarations**: Removes duplicate property-value pairs within rules
84
- **At-rules**: Removes duplicate at-rules with identical names and parameters
85
- **Recursive Processing**: Works through nested structures like media queries
86
- **Preservation**: Maintains CSS semantic structure and ordering
87

88
### Plugin Properties
89

90
```javascript { .api }
91
/**
92
 * PostCSS plugin compatibility flag
93
 */
94
postcssDiscardDuplicates.postcss: true;
95
```
96

97
## Types
98

99
```typescript { .api }
100
interface Plugin {
101
  postcssPlugin: string;
102
  OnceExit(root: import('postcss').Root): void;
103
}
104
```
105

106
## Deduplication Behavior
107

108
The plugin removes duplicates based on exact matching:
109

110
- **Rules**: Same selector text
111
- **Declarations**: Same property name, value, and importance (!important)
112
- **At-rules**: Same name and parameters
113
- **Whitespace**: Raw whitespace values are normalized during comparison
114
- **Comments**: Comments are preserved and do not affect deduplication
115

116
### Processing Order
117

118
1. Processes CSS AST from bottom-up (last to first)
119
2. For each rule, checks preceding rules for duplicates
120
3. For duplicate rules, merges declarations and removes empty rules
121
4. For duplicate declarations and at-rules, removes earlier instances
122
5. Recursively processes nested structures
123

124
### Limitations
125

126
The plugin does not normalize:
127
- Selector order (e.g., `h1, h2` vs `h2, h1` are considered different)
128
- Declaration values (e.g., `margin: 10px 0 10px 0` vs `margin: 10px 0`)
129
- Whitespace variations beyond raw value trimming
130

131
## Error Handling
132

133
The plugin operates on the PostCSS AST and does not throw exceptions during normal operation. Invalid CSS should be handled by PostCSS parsing before the plugin runs.
134

135
## Performance
136

137
The plugin uses efficient node comparison algorithms and processes the CSS tree recursively. Performance scales with the number of duplicate constructs rather than total CSS size.