Rule Suggestion: Forbid Classes / Classnames

[cycomachead]

We have a font-awesome <Icon> component that handles accessibility nicely. However, it's still really easy for people to write <i className="fa ...">. It would be nice if we could ban a class based on matching a regex. Obviously, it's tricky/impossible to ban every possible use if people are doing things at runtime, but it would be nice if I could say no to a fair number of cases where this comes up.

[ljharb]

If you have an Icon component, what do you still need <i> for?

[ljharb]

(forbid-elements can ban <i>, and forbid-component-props can ban className, but there's definitely not currently a way to combine these, or provide a filter on the value)

[cycomachead]

Thanks for the suggestions. `<i>` is still a valid HTML tag that I think is currently used in a couple other places, though it might be easiest to just ban it all together. A way to combine rules would be really powerful, and I could definitely see adding specific cases for it, though I don't know if you are interested in supporting that complexity.

[ljharb]

I absolutely could see the value in banning specific combinations of "component" and "prop" - however, I think that it would get potentially very complex to let you ban specific prop values on top of that. Would banning className on i only, solve your problem?

[cycomachead]

👍 I think so. I can't really see a great use for that compared to just a span or something.

[ljharb]

In that case, perhaps a schema enhancement on forbid-component-props is in order, so you can do ['badProp', { component: 'i', prop: 'className' }, 'otherBadProp']?

[cycomachead]

I like it. Seems like a good balance of simplicity and flexibility.