no-unused-styles.md

Detect unused StyleSheet rules in React components

When working on a component over a longer period of time, you could end up with unused StyleSheet rules that slipped in over time but are forgotten as you continue to improve your UX/UI design.

---

Options

enableImportsCheck: boolean

false - disabled by default.

⚠️ Note: This is an experimental feature and can include bugs

no-unused-styles rule works only for single file (because eslint design), and in case when you store styles in the separate files this rule doesn't work. So, to enable parsing imported styles you need to enable the next option:

// .eslintrc.js
module.exports = {
    // ...
    rules: {
        'react-native/no-unused-styles': ['error', {enableImportsCheck: true}],
    },
};

If you use typescript you need provide additional settings to help a plugin resolve .ts files:

// .eslintrc.js
const allExtensions = ['.ts', '.tsx', '.js', '.jsx'];

module.exports = {
    // ...
    rules: {
        'react-native/no-unused-styles': ['error', {enableImportsCheck: true}],
    },
    settings: {
        'import/parsers': {'@typescript-eslint/parser': ['.ts', '.tsx']},
        'import/resolver': {node: {extensions: allExtensions}},
    },
};

---

Rule Details

The following patterns are considered warnings:

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

const Hello = React.createClass({
  render: function() {
    return <Text>Hello {this.props.name}</Text>;
  }
});

The following patterns are not considered warnings:

const styles = StyleSheet.create({
  name: {}
});

const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});

The most common case.

const styles = StyleSheet.create({
  text: {}
});
const Hello = React.createClass({
  propTypes: {
    textStyle: Text.propTypes.style
  },
  render: function() {
    return <Text style={[styles.text, textStyle]}>Hello {this.props.name}</Text>;
  }
});

Style rules referenced in a Style array are marked as used.

const styles = StyleSheet.create({
  name: {}
});

const Hello = React.createClass({
  render: function() {
    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
  }
});

Style rules referenced in a conditional and logical expressions are marked as used.

const styles = StyleSheet.create({
  name: {}
});

const Hello = React.createClass({
  getInitialState: function() {
    return {condition: true};
  },

  render: function() {
    return <Text textStyle={[this.state.condition && styles.name]}>
      Hello {this.props.name}
    </Text>;
  }
});

const styles = StyleSheet.create({
  name: {},
  alternate: {},
});

const Hello = React.createClass({
  getInitialState: function() {
    return {condition: true};
  },

  render: function() {
    return <Text textStyle={[this.state.condition ? styles.name : styles.alternate]}>
      Hello {this.props.name}
    </Text>;
  }
});

Rules are also marked as used when they are used in tags that contain the word style.

const styles = StyleSheet.create({
  name: {},
  welcome: {}
});
const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});
const Welcome = React.createClass({
  render: function() {
    return <Text style={styles.welcome}>Welcome</Text>;
  }
});

Usage is tracked over multiple components in the same file.

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

There should be at least one component, so centralized StyleSheets are not checked for unused rules.