Rule proposal: ensure style prop on DOM element tags is an object

[lencioni]

React will issue a warning in dev if you pass a non-object to the style prop on DOM element tags

https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L204-L207

This should be easy enough to enforce for most cases with a linter rule.

Bad:

<div style="foo" />

<div style={true} />

const styles = true;
<div style={styles} />

Good:

<div style={{ color: 'red' }} />

const styles = { color: 'red' };
<div style={styles} />

It would be even nicer if it validated that the values of the style object are all strings.

[lencioni]

Name: dom-elements-style-is-object?

[petersendidit]

I can work on this