{"id":19907,"library":"eslint-plugin-react-with-styles","title":"eslint-plugin-react-with-styles","description":"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.","status":"maintenance","version":"2.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/airbnb/eslint-plugin-react-with-styles","tags":["javascript","eslint","react","react-with-styles","eslint-plugin","eslintplugin"],"install":[{"cmd":"npm install eslint-plugin-react-with-styles","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-with-styles","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-with-styles","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: required as the plugin runs within ESLint","package":"eslint","optional":false}],"imports":[{"note":"ESLint plugins are commonly imported as default, but both ESM and CJS work. CJS require is valid but shown here as common.","wrong":"const plugin = require('eslint-plugin-react-with-styles')","symbol":"plugin","correct":"import plugin from 'eslint-plugin-react-with-styles'"},{"note":"Rules are accessed via the rules object; individual rule names are hyphens, not camelCase.","wrong":"import { noUnusedStyles } from 'eslint-plugin-react-with-styles'","symbol":"no-unused-styles","correct":"import { rules } from 'eslint-plugin-react-with-styles'; rules['no-unused-styles']"},{"note":"Same as above; use bracket notation with hyphenated name.","wrong":"import { onlySpreadCss } from 'eslint-plugin-react-with-styles'","symbol":"only-spread-css","correct":"import { rules } from 'eslint-plugin-react-with-styles'; rules['only-spread-css']"}],"quickstart":{"code":"// In your .eslintrc.js or eslint config\nmodule.exports = {\n  plugins: ['react-with-styles'],\n  rules: {\n    'react-with-styles/no-unused-styles': 'error',\n    'react-with-styles/only-spread-css': 'error',\n  },\n};\n","lang":"javascript","description":"Configures ESLint to use the react-with-styles plugin with both rules enabled."},"warnings":[{"fix":"Consider migrating to a more modern CSS-in-JS linting solution like eslint-plugin-styled-components or eslint-plugin-emotion.","message":"Plugin is in maintenance mode with no recent updates; may not be compatible with newer ESLint versions beyond 8.","severity":"deprecated","affected_versions":">=8.0.0"},{"fix":"Use the provided css() function from react-with-styles and do not create custom wrappers.","message":"The only-spread-css rule only works with react-with-styles' css() helper; it does not handle custom CSS functions.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure ESLint version is between 2 and 8; consider pinning ESLint to a supported version.","message":"Dropped support for ESLint < 2 and may not support ESLint >= 9 due to configuration format changes.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install eslint-plugin-react-with-styles --save-dev","cause":"Missing eslint-plugin-react-with-styles as a dependency.","error":"Error: Failed to load plugin 'react-with-styles' declared in '.eslintrc' [...]"},{"fix":"Ensure plugins array includes 'react-with-styles' and rule is spelled exactly 'react-with-styles/no-unused-styles'.","cause":"The plugin is not properly loaded or the rule name is misspelled.","error":"Definition for rule 'react-with-styles/no-unused-styles' was not found."},{"fix":"Convert to flat config or use .eslintrc with 'extends' or 'plugins' as expected by legacy config.","cause":"Using flat config (eslint.config.js) instead of legacy .eslintrc format.","error":"ESLint: Unexpected top-level property 'plugins'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}