no-color-literals.md

Detect color literals in styles

When developing UIs, we often find ourselves reusing the same colors in multiple places in the UI. If the colors have to be updated, they likely have to be updated across the board. So it's good practice to store the color definitions in variables instead of hardcoding them inside styles. This rule will detect color properties that have literals (ie strings) as values.

The rule looks at all properties that contain color (case-insensitive) in their name in either StyleSheet definitions or JSX properties that have style in their name.

Rule Details

The following patterns are considered warnings:

  <Text style={{backgroundColor: '#FFF'}}>Hello</Text>;

  <View style={{borderBottomColor: 'rgba(255, 125, 125, 0.5)'}}>
    ...
  </View>;

  <Text textStyle={[styles.text, {backgroundColor: '#FFF'}]}>Hello</Text>;

  <Text style={[styles.text, this.props.something && {backgroundColor: '#000'}]}>Hello</Text>;

  <Text style={[styles.text, {backgroundColor: this.props.something ? '#FFF' : '#000'}]}>Hello</Text>;

  const styles = StyleSheet.create({
    text: {
      color: 'blue'
    }
  });

  const someVariable = false;
  const someColorVariable = 'green';
  const styles = StyleSheet.create({
    text: {
      color: someVariable ? 'blue' : someColorVariable
    }
  });

The following patterns are not considered warnings:

  const white = '#fff';
    ...
  <Text style={{backgroundColor: white}}>Hello</Text>;

  <View style={{borderBottomColor: this.state.borderBottomColor}}>
    ...
  </View>;

  const $coolBlue = '#00F';
  const styles = StyleSheet.create({
    text: {
      color: $coolBlue
    }
  });