WordPress/gutenberg

Add ESLint rule to prevent usage of the order CSS property

Open

#61,247 创建于 2024年4月30日

在 GitHub 查看
 (11 评论) (0 反应) (1 负责人)JavaScript (9,607 star) (3,893 fork)batch import
Good First Issue[Focus] Accessibility (a11y)[Status] In Progress[Type] Code Quality

描述

Description

See https://github.com/WordPress/gutenberg/issues/61241

Some components come with CSS in JS.

https://github.com/WordPress/gutenberg/issues/61241 and https://github.com/WordPress/gutenberg/pull/61243 aim to introduce a stylelint rule to prevent usage of the order CSS property, which is impactful for accessibility.

In the same way, it would be nice to add an ESLint rule to prevent usage of the order CSS property in any *.js file.

Unfortunately this isn't exactly my area of expertise so that I'd appreciate some guidance. I did see a similar rule added in https://github.com/WordPress/gutenberg/pull/58130

Step-by-step reproduction instructions

  • Add an order CSS property e.g. order: 1; to any CSS-in-JS for example in this file..
  • Run npm run lint:js.
  • Observe the linter does not report any error.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

贡献者指南

技术栈
javascript
领域
accessibilitytooling
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
active
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Understanding of ESLint custom rulesFamiliarity with Gutenberg codebase
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
45
研究方向
Refer to the existing ESLint rule added in PR #58130 for implementation pattern. The rule should detect CSS 'order' property in CSS in JS strings. Test with files like packages/components/src/palette edit/styles.ts. Consider consulting the related stylelint rule issue #61241 for context.