Trying to figure out which feature is splitting up rules

[Banner-Keith]

There are a lot of places in my css like this:

I can't think of any reason why splitting these rules into two copies of the exact same selector improves browser compatibility.

[romainmenke]

Hi @Banner-Keith,

That is impossible to tell because you only provide screenshots. No code we can copy/paste and no config we can verify. You are also showing a diff in output but you aren't showing the input diff. Did you change the source code, add plugins, remove plugins, updated plugins?

In fact, your post doesn't even include a question 🤔

It would be neat if we were clairvoyant, but then we would likely use our powers for more interesting things 😄

[Banner-Keith]

I'm sorry. I thought my question was implied in the post title. I should have been more clear. I am trying to figure out which plugin is resulting in these changes.

The diff is from a tool called RsDoctor and it is showing what this css file looked like from before and after Post CSS runs. This isn't a new behavior or something like that. Just trying to understand the changes that are made so we can optimize our bundle as much as possible.

The only post css plugin I have enabled is "postcss-preset-env". And then I have this line for my browsers defaults and fully supports css-variables I have disabled the custom-properties feature. That's really all that I have in my config for post css.

I am not wanting anyone to spend a lot of time on this. Mostly just hoping that someone who is more familiar with the rules and features might recognize which one would have this behavior. It's not a big deal.

I have turned on the debug feature, which does tell me which features were enabled, but I can't tell which changes are being made by each feature.

This is running through webpack so it's not a super easy thing to just toss the configuration over to someone, but if you'd liike I can probably make a smaller example to show these.

[romainmenke]

That is fine :D

Thank you for the extra info.
Do you happen to use cascade layers?

One of the steps in the cascade layers polyfill plugin is to separate important and non-important styles into separate rules. This is done because important styles have different behavior than non-important styles.

As far as I can tell from your screenshot all the split rules are along important vs. non-important styles.

---

If this is caused by cascade layers then it is needed and useful even if it seems redundant.

The cascade layers polyfill in general adds a lot of extra stuff and assumes that you use gzip or other compression steps to reduce the impact of that.

It also assumes that it wont be needed forever, only up until adoption is high enough.
So it is a short term pain :)