Eslint-plugin-react: Rule Proposal: Disallow use of inline style

[npasquet]

It would be great to have a rule that discourage use of inline style. It should warn for both

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

OR

class MyComponent extends React.Component {
  render() {
    return (
      <div className="component">
        <style>
          .component {
            padding: 15px;
          }
        </style>
        {this.props.prompt}
        <span>{this.props.hint}</span>
      </div>);
  }
}

[jonathanong]

:+1:

I think sometimes they make sense though. background image makes sense as an inline style sometimes, so i guess there should be an option for CSS properties to allow.

I don't think there should ever be style tags at all though. I would consider that a separate rule.

@yannickcr I haven't contributed nor looked at this code before, but if you point me where to look ill be happy to contribute.

[yannickcr]

@jonathanong You can look at the no-danger rule and use a similar one to disallow the style JSXAttribute. And target JSXOpeningElement to disallow the style element the same way. You can also use AST explorer, it's a great tool to explore AST and to write rules.

I think sometimes they make sense though. background image makes sense as an inline style sometimes, so i guess there should be an option for CSS properties to allow.

That could be interesting but also much more difficult do to since styles can come from various places and we can't really track them down since we only have access to the AST.

[aarongreenwald]

I did something along these lines in this PR to eslint-plugin-react-native but now I'm realizing perhaps it's not specific to React Native and could be useful here. But I don't do anything with the style tag.

Also, this rule only checks for object literals directly inside JSXAttributes with style in the name. It makes an exception for object literals that only have properties with variable values, so that you can use state or props in styles inline.

[lencioni]

I've done something similar in #703, which might serve as a pretty good start for a rule like this one.

[lambdabaa]

👍

[jseminck]

@lambdabaa, It turns out eslint-plugin-react-native has this rule. It's not pretty to use that for a web app 😄 ... see: https://github.com/yannickcr/eslint-plugin-react/issues/1325

Perhaps we should port it over to here...

[kevinSuttle]

Would it be more useful to disallow creation of new object, function, and array literals inside render()?

[ljharb]

@kevinSuttle because that could be done in a separate function, there’s no way to statically verify that.

[kevinSuttle]

https://github.com/yannickcr/eslint-plugin-react/?

[ljharb]

It’s impossible/impractical for an eslint plugin to know what things from separate files do.

Consider as well a.map(b) and friends.

[kevinSuttle]

True

[petermikitsh]

Is there a way to use the no-inline-styles rule for React Native in a React Web project?

[twig]

Someone created the rule here: https://github.com/buythewhale/eslint-plugin-react-extra

edit: it doesn't seem to work

[artemtam]

Any updates?

[gruckion]

With ESLint replacing TSLint a lot of people, myself included, are migrating over from TSLint. This still doesn't exist.

https://github.com/palantir/tslint-react/tree/master/test/rules/jsx-ban-props

[ljharb]

The forbid-component-props rule can already block a style prop, and https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md can forbid style elements.

This seems already achievable.

[mulholio]

For anyone looking for the rule @ljharb mentions, the correct link is here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md

This rule is also useful: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md