Low-performance styles (font-size, margin, padding, etc.) are not flagged in pseudo-classes (:hover, :focus)

[Valyay]

Thank you for maintaining stylelint-high-performance-animation! It helps catch animation pitfalls. However, I noticed the plugin skips checks for low-performance properties (e.g., font-size, margin, padding) in pseudo-classes like :hover or :focus.

What I Expected
I expected that any layout-affecting properties (such as font size, margin, padding, etc.) inside pseudo-class rules would be flagged just as if they were applied to a base class. Changing these properties during user interactions can degrade performance and cause layout thrashes.

What Happened
When I add a transition or animation that modifies these properties under a pseudo-class (e.g., hover, focus, etc.), stylelint-high-performance-animation does not display warnings or errors. These rules seem not to be detected in the linting process.

Example Code

.button {
  margin: 1rem;
  font-size: 16px;
  transition: margin 0.3s ease, font-size 0.3s ease;
}

.button:hover {
  margin: 2rem;         /* Potentially layout-thrashing property change */
  font-size: 24px;      /* Potentially layout-thrashing property change */
}

When I run stylelint with the stylelint-high-performance-animation plugin, I expect these changes to be flagged because they can trigger reflow, but currently, no warnings are generated.

Environment
Stylelint: ^16.11.0
stylelint-high-performance-animation: ^1.10.0
Editor: VsCode
Nodejs: 22.12.0
Operating system: macOS

Could the plugin’s checks be extended to flag low-performance properties regardless of whether they are in a base selector, a pseudo-class, or a keyframe?
Thank you again for all your work. Please let me know if there’s anything I can do to help troubleshoot or test a potential fix!

[kristerkari]

Thanks for the detailed description!

However, I noticed the plugin skips checks for low-performance properties (e.g., font-size, margin, padding) in pseudo-classes like :hover or :focus.

The plugin currently only checks for the properties in transition, transition-property, and inside @keyframe since we know that modifying certain properties in a transition or animation will cause either layout or paint.

If we would check for those properties inside the pseudo classes (e.g. :hover or :focus), it would be quite complicated to know if those values are changing or not. I guess one way of doing it would be just to disallow the layout/paint properties inside of :hover or :focus, but I'm not sure if doing that by default would work or not (or should it be added as an extra opt-in option for the plugin?).

The example that you provided will already be flagged by the plugin, since you are using margin and font-size inside a transition.

Hopefully I understood your feature request correctly. Let me know what you think!