{"id":19952,"library":"eslint-plugin-styled-components-a11y","title":"eslint-plugin-styled-components-a11y","description":"An ESLint plugin that adds accessibility linting rules for styled-components, wrapping eslint-plugin-jsx-a11y to handle all seven methods styled-components uses to create components (styled.div, styled('div'), attrs, as prop, object syntax, etc.). Version 2.2.1 supports ESLint 3–9 and works with both legacy and flat configs. Unique in extending jsx-a11y to cover styled-components patterns without false negatives. Released under MIT, maintained by Brendan Morrell.","status":"active","version":"2.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/brendanmorrell/eslint-plugin-styled-components-a11y","tags":["javascript","react","eslint","styled-components","accessibility","eslint-plugin","jsx-a11y","eslint-plugin-jsx-a11y","a11y"],"install":[{"cmd":"npm install eslint-plugin-styled-components-a11y","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-styled-components-a11y","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-styled-components-a11y","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required up to v9","package":"eslint","optional":false},{"reason":"core dependency for rule implementations","package":"eslint-plugin-jsx-a11y","optional":false}],"imports":[{"note":"Plugin uses ESM default export; CJS require works but import is preferred for flat config.","wrong":"const styledA11y = require('eslint-plugin-styled-components-a11y')","symbol":"default export","correct":"import styledA11y from 'eslint-plugin-styled-components-a11y'"},{"note":"Flat config requires plugin object, not string array.","wrong":"plugins: ['styled-components-a11y']","symbol":"plugin in plugins object","correct":"import styledA11y from 'eslint-plugin-styled-components-a11y';\nplugins: { 'styled-components-a11y': styledA11y }"},{"note":"Flat config shareable configs are attached to the plugin object; the string syntax is for legacy config only.","wrong":"export default [ 'plugin:styled-components-a11y/recommended' ]","symbol":"flatConfigs.recommended","correct":"import styledA11y from 'eslint-plugin-styled-components-a11y';\nexport default [ styledA11y.flatConfigs.recommended ]"}],"quickstart":{"code":"npm install --save-dev eslint-plugin-styled-components-a11y eslint-plugin-jsx-a11y\n# Legacy .eslintrc:\n{\n  \"plugins\": [\"styled-components-a11y\"],\n  \"extends\": [\"plugin:styled-components-a11y/recommended\"]\n}\n\n# Flat config (eslint.config.js):\nimport styledA11y from 'eslint-plugin-styled-components-a11y';\nexport default [\n  styledA11y.flatConfigs.recommended,\n];","lang":"javascript","description":"Install the plugin and configure it with the recommended ruleset using either legacy .eslintrc or flat config."},"warnings":[{"fix":"Upgrade to v2.2.0+ which addresses styled-components v6 compatibility.","message":"Styled-components v6 changed some internal APIs; older plugin versions may not detect all styled patterns correctly.","severity":"gotcha","affected_versions":"<=2.1.0"},{"fix":"Replace 'styled-components-a11y/componentWithForwardedRef' with 'styled-components-a11y/no-arrow-function-in-jsx'.","message":"The `componentWithForwardedRef` rule no longer exists in recent versions; use `no-arrow-function-in-jsx` instead.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure ESLint v9 is installed if using flat config; for ESLint v8, continue using legacy .eslintrc.","message":"Flat config support requires ESLint v9+; using flat config with ESLint v8 will result in errors.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"Disable standalone jsx-a11y rules when using this plugin to avoid duplicate warnings.","message":"The plugin re-exports all rules from eslint-plugin-jsx-a11y but prefixed with 'styled-components-a11y/'. Enabling recommended ruleset may conflict with standalone jsx-a11y rules if both are used.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure the component using `as` is created via styled() to trigger linting rules.","message":"The `as` prop is supported but only when used with styled-components; custom components using `as` without styled may not be linted.","severity":"gotcha","affected_versions":"*"},{"fix":"Migrate to ESLint v9 to ensure continued compatibility.","message":"ESLint v8 is becoming legacy; future plugin releases may drop support for v8.","severity":"deprecated","affected_versions":">=2.2.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev eslint-plugin-styled-components-a11y eslint-plugin-jsx-a11y","cause":"Plugin not installed or peer dependency missing (eslint-plugin-jsx-a11y).","error":"Error: Failed to load plugin 'styled-components-a11y' declared in '.eslintrc.json'"},{"fix":"Use import styledA11y from 'eslint-plugin-styled-components-a11y' then access styledA11y.flatConfigs.recommended","cause":"Using flat config but the plugin is imported incorrectly (default import missing).","error":"TypeError: Cannot read properties of undefined (reading 'recommended')"},{"fix":"Check the correct rule name from the plugin's rule list (e.g., 'styled-components-a11y/no-onchange').","cause":"Rule name misspelled or not available (maybe using old rule names).","error":"ESLint: 'styled-components-a11y/rule-name' is not a valid rule name"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}