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

eslint-plugin-styled-components-varname

library1.0.1jsnpmunverified

An ESLint plugin that enforces consistent naming conventions for styled-components variables. Version 1.0.1 is the current stable release. The plugin provides a single rule 'varname' that allows developers to define prefix, suffix, or regex patterns for styled-component variable names, differentiating between tag styles (e.g., styled.div) and extended styles (e.g., styled(FooComponent)). This helps reduce verbose naming and standardizes codebase patterns. Unlike generic naming rules, this plugin understands the context of styled-components, making it easier to enforce conventions specifically for styled components. No significant updates since initial release; project appears to be stable but may not be actively maintained.

testing

npm install eslint-plugin-styled-components-varname

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-STYL

eslint-plugin-styled-components-varname

testingjavascriptv1.0.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–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

eslint-plugin-styled-components-varname

✓ export default { plugins: ['styled-components-varname'], rules: { 'styled-components-varname/varname': 'error' } }

ESLint plugin loads via plugin name; no specific symbol import needed. Use the string 'styled-components-varname' in ESLint config.

varname

✓ import { rules } from 'eslint-plugin-styled-components-varname'

The rule object is exported as 'varname' under 'rules'. For custom rule configuration, you can import the rule directly if needed.

configs

✓ import { configs } from 'eslint-plugin-styled-components-varname'

No presets/configs are exported by this plugin; configs object may be empty.

Configures ESLint to enforce prefix-based naming for styled-components: '_' for tag styles and '$' for extended styles.

// .eslintrc.json { "plugins": ["styled-components-varname"], "rules": { "styled-components-varname/varname": ["error", { "tagStyle": { "prefix": "_" }, "extendedStyle": { "prefix": "$" } }] } } // Valid code const _Div = styled.div` color: red; ` const $Component = styled(Component)` color: blue; ` // Invalid code const StyledDiv = styled.div` color: red; `

Debug

Known issues

gotchaThe rule only applies to variables declared with `styled.*` or `styled(...)`; it does not check other styled-components patterns like `styled(SomeComponent).attrs(...)`.

fix

Manually ensure naming consistency for complex styled-component usages.

affects: >=1.0.0

gotchaDefault options use prefix '_' for tag styles and '$' for extended styles, which may conflict with other linting rules (e.g., no-underscore-dangle).

fix

Set a custom prefix or pattern that does not trigger other rules.

affects: >=1.0.0

gotchaThe rule does not support dynamic style creation or component variables passed through functions.

fix

Ensure all styled-components assignments are plain variable declarations.

affects: >=1.0.0

Errors

Common errors & fixes

Definition for rule 'styled-components-varname/varname' was not found

ESLint cannot locate the plugin; likely missing installation or incorrect plugin name.

fix

Run `npm install eslint-plugin-styled-components-varname --save-dev` and ensure plugins array contains 'styled-components-varname'.

Cannot find module 'eslint-plugin-styled-components-varname'

ESLint plugin not installed in the project.

fix

Install the plugin: npm install eslint-plugin-styled-components-varname --save-dev

Expected property name 'prefix' to match one or more of the following: 'pattern', 'prefix', 'suffix'

Invalid configuration option for tagStyle or extendedStyle.

fix

Ensure the option object only contains 'prefix', 'suffix', or 'pattern'. Example: { tagStyle: { prefix: '_' } }

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

13 hits · last 30 days

node

Resources

githubhttps://github.com/macinjoke/eslint-plugin-styled-components-varname ↗

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