Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(eslint): enable react/forbid-dom-props rule #73

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

huyenltnguyen
Copy link
Member

Note: The color-system component violates this rule so it needs to be updated, but its story needs to be resurrected first in order to test the changes (#66).


Checklist:

This PR enables the react/forbid-dom-props rule to disallow inline styles in HTML elements.

We already have two ways to style an element: using a CSS stylesheet and using Tailwind classes, so there is no need for inline styles. Inline styles also have high specificity and they will override the rules in our stylesheets (except for rules with !important), so they will make debugging CSS more challenging.

Ref: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md

Screenshot

Screenshot of the rule in action:

Screenshot 2024-04-12 at 14 11 16

@huyenltnguyen huyenltnguyen added the status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. label Apr 12, 2024
@huyenltnguyen huyenltnguyen changed the title chore(eslint): enable react/forbid-dom-props rule [skip ci] chore(eslint): enable react/forbid-dom-props rule Apr 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant