Add rule to forbid className and style being passed to Components

[lencioni]

Passing className or style to your Components is a source of much
hidden complexity that can be solved either by using a wrapper to add
styling or by adding props for specific styling. This rule aims at
preventing these props from being passed to your Components, to help
minimize hidden complexity.

The original issue proposed having this rule check propTypes. I
considered that route, but I worry that it won't be as effective for
people who do not have every prop used by the component listed in the
propTypes. Additionally, propTypes seem to have waning interest from the
React team in favor of Flow annotations, so I think in the long run
checking for this at the callsite will be more stable.

More information can be found by reading:

https://medium.com/brigade-engineering/don-t-pass-css-classes-between-components-e9f7ab192785

Also:

https://twitter.com/sebmarkbage/status/598971268403073024

Fixes #314

cc: @janpaul123 @sebmarkbage

[ljharb]

would this not need a "react/" prefix?

[lencioni]

Yes, I think so. I was copying how it is in other rules documentation though so we should probably fix them all at the same time.

[ljharb]

Sounds good.

[petersendidit]

This should use the new eslint rule format

[lencioni]

Thanks for the heads up! This PR has been updated.

[ljharb]

If i want to forbid certain props on Components, but not forbid className/style, how do I do that?

[lencioni]

You would set the forbid option to include the props that you want to forbid and not include className/style. This is identical to forbid-prop-types.

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md

[ljharb]

It might be good to explicitly note that the default value of this option is ['className', 'style']

[lencioni]

Sure, done!

[lencioni]

@yannickcr @ljharb anything else you'd like to see on this before we merge it in?

[lencioni]

I plan to merge this soon unless I hear otherwise.

[cristian-sima]

This rule is nice, but what if we are required by default to pass the className as a prop. Let's take for instance, the react-modal case:

      <Modal
        className="Modal__Bootstrap modal-dialog"
        onRequestClose={this.handleCloseModal}
        isOpen>

[ljharb]

Per the info in the OP, you'd simply not use the rule in that case - the idea is that passing a className is an antipattern, and you'd want to avoid it.

[cristian-sima]

Thanks for your reply.

In order to not use it, I have to disable the rule, which in turn may be contra-productive, as I can have in the same function or file other components which should indeed not receive the className or style props.

I propose a different approach. What about introducing an option to tell the rule which components should be ignored.

As in my example, react-modal has always the Modal component. I can specify eslint to ignore any component with the name Modal.

Well, yes this approach has a down-side as I may write in the future components with that name, but I think is less likely.