eslint-plugin-react-native icon indicating copy to clipboard operation
eslint-plugin-react-native copied to clipboard

[idea] no-inline-styles consider ternary styles to be valid as well

Open SidOfc opened this issue 5 years ago • 1 comments

Hello,

Thank you for creating and maintaining these rules, they are very useful!

I think I found an issue with how the no-inline-styles rule determines to warn you about usage of inline styles. Say that I have this style object:

style={{backgroundColor: this.state.backgroundColor}}

This does not generate warnings, and neither does this:

style={{
    backgroundColor: this.state.backgroundColor,
    color: this.state.color
}}

However, In my case I use a ternary for one property which sometimes evaluates to an empty string literal, like this:

style={{
    backgroundColor: this.state.backgroundColor,
    backgroundImage: this.state.image
        ? `url(${this.state.image})`
        : '',
    color: this.state.color
}}

This gives me a no-inline-styles warning. The warning originates from the usage of the empty string literal ''. If I change this to a template string literal ``, the warning goes away:

style={{
    backgroundColor: this.state.backgroundColor,
    backgroundImage: this.state.image
        ? `url(${this.state.image})`
        : ``,
    color: this.state.color
}}

The last example works as I expected. However, other ternary statements are also giving me the no-inline-styles warning, like this one using numeric values:

style={{flex: this.state.grow ? 1 : 0}}

Perhaps it would be an idea to consider ternary statements as dynamic styles as well? I've read #23 which doesn't really cover this scenario so it's not really a bug but rather new behavior that would have to be supported.

I think it would be nice to have this as to prevent having to write bulkier code / comment in sometimes strange places to "silence" the warning.

I'm interested in hearing opinions about this, thanks for taking the time to read as well!

SidOfc avatar May 27 '20 09:05 SidOfc