Registry / testing / eslint-plugin-react-native-unistyles

eslint-plugin-react-native-unistyles

library3.0.7jsnpmunverified

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()`).

testing

npm install eslint-plugin-react-native-unistyles

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-native-unistyles

testingjavascriptv3.0.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

✗ const unistyles = require('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

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

✗ import unistyles from 'eslint-plugin-react-native-unistyles'; const { configs } = 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.

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 } ], }, }, ]);

Debug

Known issues

breakingVersion 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.

affects: >=3.0.0

deprecatedIn 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.

affects: >=3.0.6

gotchaThe 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.

affects: >=3.0.0

gotchaWhen 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.

affects: >=3.0.0

Errors

Common errors & fixes

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

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`.

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

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.

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

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.

Upgrade

Version history

3.0.7latest on npm

Audit

Dependencies

eslintrequiredPeer dependency; plugin requires ESLint version ^3.17.0 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9

react-native-unistylesrequiredThe plugin lints stylesheets created with React Native Unistyles; requires version ^3.0.0

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/RodSarhan/eslint-plugin-react-native-unistyles ↗

packagehttps://www.npmjs.com/package/eslint-plugin-react-native-unistyles ↗