Skip to content

Latest commit

 

History

History
124 lines (87 loc) · 3.24 KB

require-variants-call-styles-name.md

File metadata and controls

124 lines (87 loc) · 3.24 KB
pageClass sidebarDepth title description frameworks since
rule-details
0
tailwind-variants/require-variants-call-styles-name
enforce that when calling a function returned by tailwind-variants (tv()), the result is assigned to a variable named styles (or a configurable name)
agnostic
v0.1.0

tailwind-variants/require-variants-call-styles-name

enforce that when calling a function returned by tailwind-variants (tv()), the result is assigned to a variable named styles (or a configurable name)

📖 Rule Details

This rule enforces that when you call a function returned by tv() (from tailwind-variants), the result must be assigned to a variable named styles (by default), or to a custom name if configured. This helps ensure consistency and clarity in codebases using tailwind-variants.

🔧 Options

{
  "tailwind-variants/require-variants-call-styles-name": [
    "error",
    {
      "name": "styles"
    }
  ]
}

{ "name": "styles" } (default)

// ✓ GOOD
const buttonVariants = tv({});
const styles = buttonVariants();
```js // ✗ BAD const buttonVariants = tv({}); const button = buttonVariants(); ```

{ "name": "variants" }

// ✓ GOOD
const buttonVariants = tv({});
const variants = buttonVariants();
// ✗ BAD
const buttonVariants = tv({});
const styles = buttonVariants();

⛔ Prohibited Patterns

Assigning the result of calling a function returned by tv() to any variable name other than the configured one is not allowed.

// ✗ BAD
const buttonVariants = tv({});
const button = buttonVariants();
const myStyles = buttonVariants();
// ✓ GOOD
const buttonVariants = tv({});
const styles = buttonVariants();

🔧 Auto-fix

This rule provides auto-fix functionality. When a variable name assigned from calling a variant function does not match the configured value, the fixer will automatically replace the name.

Before:

const buttonVariants = tv({});
const button = buttonVariants();

After auto-fix (with default name):

const buttonVariants = tv({});
const styles = buttonVariants();

🚀 Version

This rule was introduced in eslint-plugin-tailwind-variants v0.1.0

🔍 Implementation