[Feature Request]: postcss-discard-duplicates

[cssandstuff]

What should be improved?

Add an option to keep the first occurrence of a css duplicate, rather than the last.
At the moment when deduplicating code, the last occurrence of the declaration is kept, it would be preferable in some situations to keep the first rather than the last.

Describe the solution you would like

A boolean option keepFirst or something similar (default is false) is added in order to reverse the current way things are done.

 if (node && equals(node, last)) {
    keepFirst ? last.remove(): node.remove();
  }

Possible alternatives

change the current behaviour to just keep the first? seems like a better default

Additional context

some css-modules implementations when using 'composes' will litter the compiled stylesheet with these compiled classes. It's more useful to keep the first occurrence of these composed classes rather than the last, so that cascade order is maintained. There are other ways around this (using cascade @layers for example) but it would be nice to be able to keep the first occurrence and get rid of subsequent duplicates.

Are you willing to work on this?

• Yes, I would like to help

[ludofischer]

I am not sure I follow. Could you provide some example CSS that shows where the problem occurs?

[cssandstuff]

Sure, so given a stylesheet like this that has duplicates of .button-component:

.button-component{ background-color: red }
.make-me-blue{ background-color: blue;}
.button-component{ background-color: red }
.button-component{ background-color: red }

currently the deduplicated output will be:

.make-me-blue{ background-color: blue;}
.button-component{ background-color: red }

The last occurrence of .button-component is kept (and the others are discarded), so if you have selectors with the same specificity then that rule wins (your button is red)

whereas it might be often more desirable for the first occurrence to be kept, resulting in the output being:

.button-component{ background-color: red }
.make-me-blue{ background-color: blue;} 

So that subsequent duplicates are discarded, and the first occurrence is kept (button is blue)

Was suggesting that maybe it could be an option so that it wouldn't need to be a breaking change. Something maybe like keepFirstOccurrence: (true or false)

I hope that helps clarify what the feature request is. Thanks!

[cssandstuff]

Issue occurs here
https://github.com/cssnano/cssnano/blob/master/packages/postcss-discard-duplicates/src/index.js#L119

changing this to last.remove() rather than node.remove() gives the desired result of the first occurring selector being kept and not the last.

hope that makes sense.

[ludofischer]

I understand the issue now, but wouldn't your suggestion make the behaviour of the minified CSS different than the original? In your example, the button would be red before minification and blue after. If that's the case, I think it goes asgainst what most users would think minification would do.