stylex icon indicating copy to clipboard operation
stylex copied to clipboard

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

Open nmn opened this issue 1 year ago • 5 comments

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.

nmn avatar Nov 30 '24 02:11 nmn

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

yousoumar avatar Nov 30 '24 14:11 yousoumar

Here's a screen recording of the problem.

https://github.com/user-attachments/assets/9b521fc8-1868-4e7f-8f60-db92b6e42627

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

nmn avatar Dec 01 '24 22:12 nmn

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)?

yousoumar avatar Dec 02 '24 11:12 yousoumar

@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.

nmn avatar Dec 04 '24 21:12 nmn

I see @nmn, thanks!

yousoumar avatar Dec 08 '24 18:12 yousoumar