Registry / testing / eslint-plugin-react-with-styles

eslint-plugin-react-with-styles

library2.4.0jsnpmunverified

ESLint plugin for react-with-styles, version 2.4.0. Provides linting rules to enforce best practices for the react-with-styles library, which enables theming and CSS-in-JS with fallbacks to Aphrodite or other backends. This plugin includes two rules: no-unused-styles ensures all defined styles are referenced in the component, and only-spread-css prevents mixing css() spreads with className or style props. Release cadence is low; last update was in 2018. Differentiators: specifically tailored for react-with-styles rather than generic CSS-in-JS linting. Supports ESLint versions 2 through 8.

testing

npm install eslint-plugin-react-with-styles

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-with-styles

testingjavascriptv2.4.0

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.

plugin

✓ import plugin from 'eslint-plugin-react-with-styles'

✗ const plugin = require('eslint-plugin-react-with-styles')

ESLint plugins are commonly imported as default, but both ESM and CJS work. CJS require is valid but shown here as common.

no-unused-styles

✓ import { rules } from 'eslint-plugin-react-with-styles'; rules['no-unused-styles']

✗ import { noUnusedStyles } from 'eslint-plugin-react-with-styles'

Rules are accessed via the rules object; individual rule names are hyphens, not camelCase.

only-spread-css

✓ import { rules } from 'eslint-plugin-react-with-styles'; rules['only-spread-css']

✗ import { onlySpreadCss } from 'eslint-plugin-react-with-styles'

Same as above; use bracket notation with hyphenated name.

Configures ESLint to use the react-with-styles plugin with both rules enabled.

// In your .eslintrc.js or eslint config module.exports = { plugins: ['react-with-styles'], rules: { 'react-with-styles/no-unused-styles': 'error', 'react-with-styles/only-spread-css': 'error', }, };

Debug

Known issues

deprecatedPlugin is in maintenance mode with no recent updates; may not be compatible with newer ESLint versions beyond 8.

fix

Consider migrating to a more modern CSS-in-JS linting solution like eslint-plugin-styled-components or eslint-plugin-emotion.

affects: >=8.0.0

gotchaThe only-spread-css rule only works with react-with-styles' css() helper; it does not handle custom CSS functions.

fix

Use the provided css() function from react-with-styles and do not create custom wrappers.

affects: all

breakingDropped support for ESLint < 2 and may not support ESLint >= 9 due to configuration format changes.

fix

Ensure ESLint version is between 2 and 8; consider pinning ESLint to a supported version.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Failed to load plugin 'react-with-styles' declared in '.eslintrc' [...]

Missing eslint-plugin-react-with-styles as a dependency.

fix

Run: npm install eslint-plugin-react-with-styles --save-dev

Definition for rule 'react-with-styles/no-unused-styles' was not found.

The plugin is not properly loaded or the rule name is misspelled.

fix

Ensure plugins array includes 'react-with-styles' and rule is spelled exactly 'react-with-styles/no-unused-styles'.

ESLint: Unexpected top-level property 'plugins'

Using flat config (eslint.config.js) instead of legacy .eslintrc format.

fix

Convert to flat config or use .eslintrc with 'extends' or 'plugins' as expected by legacy config.

Upgrade

Version history

2.4.0latest on npm

Audit

Dependencies

eslintrequiredpeer dependency: required as the plugin runs within ESLint

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/airbnb/eslint-plugin-react-with-styles ↗

packagehttps://www.npmjs.com/package/eslint-plugin-react-with-styles ↗