ESLint Plugin for React Native Unistyles

3.0.7 verified Sat Apr 25 auth: no javascript

ESLint plugin with rules for React Native Unistyles v3, providing `no-unused-styles` and `sort-styles` rules to detect unused stylesheet definitions and enforce sorted style properties. Current stable version is 3.0.7. The plugin supports both ESLint flat config (ESLint 9+) and legacy config (.eslintrc). Key differentiator: it is specifically tailored for the React Native Unistyles library, covering usage patterns like `createStyleSheet`, `useStyles`, and component detection, including wrapped components (e.g., `memo()`).

Common errors

error Error: Failed to load plugin 'react-native-unistyles' declared in 'plugins': Cannot find module 'eslint-plugin-react-native-unistyles' ↓

cause The plugin is not installed as a dev dependency.

fix

Run yarn add eslint-plugin-react-native-unistyles -D or npm install eslint-plugin-react-native-unistyles --save-dev.

error Parsing error: 'import' and 'export' may only appear at the top level ↓

cause Using ES module syntax in a CommonJS environment or ESLint is not configured for ES modules.

fix

Set type: 'module' in package.json or use .mjs extension for config file.

error Configuration for rule 'react-native-unistyles/no-unused-styles' is invalid: severity must be one of the following values: 0 = off, 1 = warn, 2 = error ↓

cause The rule severity was set to a non-numeric value like `'error'` in a numeric-only context.

fix

Use numeric severity (0, 1, 2) or string severity ('off', 'warn', 'error') correctly depending on ESLint config format.

Warnings

breaking Version 3.0.0 introduced breaking changes for ESLint config: the recommended config is now `unistyles.configs.recommended` (flat config) and legacy config `plugin:react-native-unistyles/legacy-recommended` must be used for .eslintrc. ↓

fix Update ESLint config to use flat config or add 'legacy-' prefix for extends.

deprecated In v3.0.6, the `ignoreClassNames` option was renamed to `ignoreStyleNames`. The old option name still works but is deprecated. ↓

fix Update option name to `ignoreStyleNames` in sort-styles rule configuration.

gotcha The plugin requires JSX support to be enabled in ESLint parser options, otherwise it may fail to detect stylesheets. ↓

fix Add `languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } }` in flat config or `parserOptions: { ecmaFeatures: { jsx: true } }` in legacy config.

gotcha When using the plugin with TypeScript, ensure ESLint is configured to parse TypeScript files (e.g., with @typescript-eslint/parser) for proper type detection. ↓

fix Use @typescript-eslint/parser and set `languageOptions: { parser: '@typescript-eslint/parser' }` in flat config.

Install

npm install eslint-plugin-react-native-unistyles

yarn add eslint-plugin-react-native-unistyles

pnpm add eslint-plugin-react-native-unistyles

Imports

default
wrong
```
const unistyles = require('eslint-plugin-react-native-unistyles');
```
correct
```
import unistyles from 'eslint-plugin-react-native-unistyles';
```
ESM default import is the primary method; CommonJS require also works but is less common for ESLint plugins in flat config.

configs

wrong

import unistyles from 'eslint-plugin-react-native-unistyles'; const { configs } = unistyles;

correct

import { configs } from 'eslint-plugin-react-native-unistyles';

Named export for configs is available; using default then destructuring works but is redundant.

rules
```
import { rules } from 'eslint-plugin-react-native-unistyles';
```
Named export for rules object; useful for custom rule configuration or testing.

Quickstart

This example shows how to set up the plugin with ESLint flat config, enabling both rules.

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

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