ESLint Plugin for React Native Unistyles

ESLint rules for React Native Unistyles to help you write cleaner, more maintainable stylesheets.

📋 Requirements

• ESLint
• React Native Unistyles ^3.0.0

📦 Installation

Install the plugin as a dev dependency:

yarn add eslint-plugin-react-native-unistyles -D

⚙️ Configuration

ESLint Flat Config (Recommended)

For ESLint 9+ with flat config:

import { defineConfig } from 'eslint/config';
import unistyles from 'eslint-plugin-react-native-unistyles';

export default defineConfig([
  // Your other configs...
  unistyles.configs.recommended,
]);

Custom Configuration

import unistyles from 'eslint-plugin-react-native-unistyles';

export default defineConfig([
  {
    plugins: {
      'react-native-unistyles': unistyles,
    },
    rules: {
      'react-native-unistyles/no-unused-styles': 'error',
      'react-native-unistyles/sort-styles': [
        'warn',
        'asc',
        {
          ignoreStyleNames: false,
          ignoreStyleProperties: false
        }
      ],
    },
  },
]);

Legacy Configuration (.eslintrc)

For older ESLint versions:

{
  "extends": ["plugin:react-native-unistyles/legacy-recommended"]
}

Manual Rule Configuration

{
  "plugins": ["react-native-unistyles"],
  "rules": {
    "react-native-unistyles/no-unused-styles": "warn",
    "react-native-unistyles/sort-styles": [
      "warn",
      "asc",
      {
        "ignoreStyleNames": false,
        "ignoreStyleProperties": false
      }
    ]
  }
}

Note

If it is not already the case you must also configure ESLint to support JSX.

{
  "languageOptions": {
    "parserOptions": {
      "ecmaFeatures": {"jsx": true}
    }
  }
}

📖 Rules

| Rule | Description | |------|-------------| | no-unused-styles | Detect unused stylesheet definitions | | sort-styles | Enforce sorted style properties |

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by eslint-plugin-react-native
• Built for React Native Unistyles by @jpudysz

📚 Related Projects

• React Native Unistyles - The styling library this plugin supports
• ESLint - The pluggable linting utility for JavaScript