eslint-plugin-react-with-styles

2.4.0 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

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

fix

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

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

cause 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'.

error ESLint: Unexpected top-level property 'plugins' ↓

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

Warnings

deprecated Plugin 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.

gotcha The 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.

breaking Dropped 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.

Install

npm install eslint-plugin-react-with-styles

yarn add eslint-plugin-react-with-styles

pnpm add eslint-plugin-react-with-styles

Imports

plugin
wrong
```
const plugin = require('eslint-plugin-react-with-styles')
```
correct
```
import plugin from '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

wrong

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

correct

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

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

only-spread-css

wrong

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

correct

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

Same as above; use bracket notation with hyphenated name.

Quickstart

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',
  },
};