eslint-plugin-react-native
eslint-plugin-react-native copied to clipboard
[idea] no-inline-styles consider ternary styles to be valid as well
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!