fix: prevent mangling of 'named timeline range names and percentages' in keyframe selectors

[johannesodland]

This PR fixes an issue reported in #1460

Keyframe selectors from scroll-driven animations (named timeline range name and percentage) are mangled by replacing 100% with to in keyframe selectors where it is not valid.

@keyframes test {
   entry 100% {
      color: red;
   }
}

/*
The keyframe-selector with a named timeline range name and percentage is mangled to:

@keyframes test {
   entry to {
      color: red;
   }
}
*/

This PR fixes the issue by only replacing 100% with to when the parent selector only has one child node.

[ludofischer]

Apologies for the long delay in answering. It looks fine, but could you maybe write a comment explaining what the selector.parent etc. check is trying to achieve?

[johannesodland]

Sure. I refactored and added comments to clarify the handling of simple vs complex tag selectors. 7c68ea8

I'm not sure if checking parent node length is the best way to differentiate between a complex or a simple selector. Do you know if there is a better way?

[ludofischer]

No better way comes to mind, in fact the codebase is full of this sort of parent checks. Partly I think it's because the parsers we use were mainly developed before the introduction of more recent CSS features.

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Files	Coverage Δ
packages/postcss-minify-selectors/src/index.js	99.25% <100.00%> (+0.02%)	⬆️

📢 Thoughts on this report? Let us know!.