eslint-plugin-css
eslint-plugin-css copied to clipboard
New rule request: `prefer-logical-properties`
Hi there!
Motivation In our project, we are encouraged to use logical CSS properties, i.e. properties that are compatible with languages that are read from right-to-left or even top-to-bottom.
Example:
Using inline-size
instead of width
& margin-block-end
instead of margin-bottom
.
Not all devs are aware of this, and mistakes happen. It would therefore help to have a rule that throws an error (or even auto-fixes) whenever one of the physical properties is used.
There seem to be plugins that do this for a linter called "stylelint", which I've never heard of:
- https://github.com/yuschick/stylelint-plugin-logical-css?tab=readme-ov-file#pluginuse-logical-properties-and-values
- https://github.com/csstools/stylelint-use-logical
The latter plugin has a comprehensive Bad-vs-Good table on its readme page: https://github.com/csstools/stylelint-use-logical?tab=readme-ov-file#property-and-value-mapping
I have no experience with writing ESlint rules, so I don't know how hard this would be and if it would make sense to re-implement this for ESlint.
Thanks a lot in advance!