eslint-plugin-css icon indicating copy to clipboard operation
eslint-plugin-css copied to clipboard

New rule request: `prefer-logical-properties`

Open ej612 opened this issue 5 months ago • 1 comments

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!

ej612 avatar Sep 10 '24 10:09 ej612