-
-
Notifications
You must be signed in to change notification settings - Fork 320
[Feature Request]: postcss-discard-duplicates #1583
New issue
Hav 8000 e a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
I am not sure I follow. Could you provide some example CSS that shows where the problem occurs? |
Sure, so given a stylesheet like this that has duplicates of .button-component:
currently the deduplicated output will be:
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:
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! |
Issue occurs here 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. |
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. |
I face the same issue related to using it with Tailwind. Using @cssandstuff example (removing the last class as it is redundant), in my case the first two classes come from a dependency, and the last one comes from the local code: /* from pkg-a */
.button-component{ background-color: red }
.make-me-blue{ background-color: blue;}
/* from app */
.button-component{ background-color: red } With the current behavior, the component within I'm using the following postcss: {
"plugins": {
"postcss-import": {},
"tailwindcss": {},
"postcss-discard-duplicates": {}
} This issue can partially resolved by tools like |
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.
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?
The text was updated successfully, but these errors were encountered: