[eslint-plugin] sort keys rule should sort object keys when applying fix

[nmn]

The sort-keys rule in @stylexjs/eslint-plugin correctly detects any key in a style object that is not sorted as it should be. (This is not alphabetical, but ordered according to style specificity).

The issue is with the auto-fix offered. It only moves the particular key that is not sorted correctly, but it can often leave behind additional lint warnings in the same style object.

Expected behaviour"
When the auto-fix is applied, the entire object should be sorted as expected such that there are no lint warnings after the auto-fix.

[yousoumar]

Hi @nmn ! I'm looking at it but cannot reproduce it. Do you have an example?

[nmn]

Here's a screen recording of the problem.

Screen.Recording.2024-12-01.at.2.05.46.PM.mov

Expected behavior: auto-fixing any error should sort all keys in the object.

[yousoumar]

Thanks for the example. You are clicking on “fix this line”, isn't that what's supposed to do? Can ESLint itself do otherwise? Also, what about the fact that on save in Visual Studio Code with the ESLint plugin, all the warnings are being fixed at once (at least in my case)?

[nmn]

@yousoumar The problem is that fixing one problem can create another problem. Notice how when I fix the left, it opacity becomes a problem again.

The only way an autofix for sorting keys can work is if all the keys on the current level are sorted.

[yousoumar]

I see @nmn, thanks!