minify: Drop duplicate rules

[aleclarson]

Playground link

.green {
  background: green;
}
.red {
  background: red;
}
.green {
  background: green;
}

I would expect the first .green rule to be dropped when minifying.

Use case

Using the UnoCSS library, I'm generating single-property rules based on usage in JavaScript. This happens on a per-module basis, so in production builds, I would like LightningCSS to deduplicate any rules that are used by multiple modules within a single bundle chunk.

[devongovett]

Merging non-adjacent rules is not generally safe because they have the same specificity so the order is important. For example:

<p class="green red">text</p>

In the original code the text would be green, but if we merged the selectors it would be red.

See also #225

[aleclarson]

Thanks for the quick reply!

I would expect the first .green rule to be dropped when minifying.

Did you read this correctly?

I should've included the expected output instead, sorry.

.red {
  background: red;
}
.green {
  background: green;
}

IIUC, your example's behavior will not change.

[devongovett]

Ah I see. Yeah for exact duplicates it could work. If either the selectors or declarations are different then it isn't safe.

[devongovett]

Implemented in the above commit. Rules are considered duplicates if they have exactly the same selectors, and the list of properties is the same. The rules may have different values for the same properties, however.

This took a bit of work to make performant. In the general case, duplicate rules are rare, so I wanted to make sure there wasn't a big performance penalty if you didn't have any duplicates. At the moment, if there are nested rules within a style rule, it cannot be deduplicated because comparing the whole tree of rules would be expensive. Hopefully this should be rare. The performance difference when minifying bootstrap with the current implementation is about 0.2ms.