Registry / testing / eslint-plugin-styled-components-a11y

eslint-plugin-styled-components-a11y

library2.2.1jsnpmunverified

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.

testing

npm install eslint-plugin-styled-components-a11y

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-STYL

eslint-plugin-styled-components-a11y

testingjavascriptv2.2.1

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 export

✓ import styledA11y from 'eslint-plugin-styled-components-a11y'

✗ const styledA11y = require('eslint-plugin-styled-components-a11y')

Plugin uses ESM default export; CJS require works but import is preferred for flat config.

plugin in plugins object

✓ import styledA11y from 'eslint-plugin-styled-components-a11y'; plugins: { 'styled-components-a11y': styledA11y }

✗ plugins: ['styled-components-a11y']

Flat config requires plugin object, not string array.

flatConfigs.recommended

✓ import styledA11y from 'eslint-plugin-styled-components-a11y'; export default [ styledA11y.flatConfigs.recommended ]

✗ export default [ 'plugin:styled-components-a11y/recommended' ]

Flat config shareable configs are attached to the plugin object; the string syntax is for legacy config only.

Install the plugin and configure it with the recommended ruleset using either legacy .eslintrc or flat config.

npm install --save-dev eslint-plugin-styled-components-a11y eslint-plugin-jsx-a11y # Legacy .eslintrc: { "plugins": ["styled-components-a11y"], "extends": ["plugin:styled-components-a11y/recommended"] } # Flat config (eslint.config.js): import styledA11y from 'eslint-plugin-styled-components-a11y'; export default [ styledA11y.flatConfigs.recommended, ];

Debug

Known issues

gotchaStyled-components v6 changed some internal APIs; older plugin versions may not detect all styled patterns correctly.

fix

Upgrade to v2.2.0+ which addresses styled-components v6 compatibility.

affects: <=2.1.0

deprecatedThe `componentWithForwardedRef` rule no longer exists in recent versions; use `no-arrow-function-in-jsx` instead.

fix

Replace 'styled-components-a11y/componentWithForwardedRef' with 'styled-components-a11y/no-arrow-function-in-jsx'.

affects: >=2.0.0

breakingFlat config support requires ESLint v9+; using flat config with ESLint v8 will result in errors.

fix

Ensure ESLint v9 is installed if using flat config; for ESLint v8, continue using legacy .eslintrc.

affects: >=2.2.0

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

fix

Disable standalone jsx-a11y rules when using this plugin to avoid duplicate warnings.

affects: *

gotchaThe `as` prop is supported but only when used with styled-components; custom components using `as` without styled may not be linted.

fix

Ensure the component using `as` is created via styled() to trigger linting rules.

affects: *

deprecatedESLint v8 is becoming legacy; future plugin releases may drop support for v8.

fix

Migrate to ESLint v9 to ensure continued compatibility.

affects: >=2.2.1

Errors

Common errors & fixes

Error: Failed to load plugin 'styled-components-a11y' declared in '.eslintrc.json'

Plugin not installed or peer dependency missing (eslint-plugin-jsx-a11y).

fix

Run npm install --save-dev eslint-plugin-styled-components-a11y eslint-plugin-jsx-a11y

TypeError: Cannot read properties of undefined (reading 'recommended')

Using flat config but the plugin is imported incorrectly (default import missing).

fix

Use import styledA11y from 'eslint-plugin-styled-components-a11y' then access styledA11y.flatConfigs.recommended

ESLint: 'styled-components-a11y/rule-name' is not a valid rule name

Rule name misspelled or not available (maybe using old rule names).

fix

Check the correct rule name from the plugin's rule list (e.g., 'styled-components-a11y/no-onchange').

Upgrade

Version history

2.2.1latest on npm

Audit

Dependencies

eslintrequiredpeer dependency required up to v9

eslint-plugin-jsx-a11yrequiredcore dependency for rule implementations

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/brendanmorrell/eslint-plugin-styled-components-a11y ↗

packagehttps://www.npmjs.com/package/eslint-plugin-styled-components-a11y ↗