@intility/no-inline-styles

A Deno lint plugin that prevents inline styles in JSX/TSX components. This helps maintain a consistent styling approach by encouraging the use of CSS classes instead of inline styles.

Installation

Add the plugin to your deno.json:

{
  "lint": {
    "plugins": ["jsr:@intility/no-inline-styles"],
    "rules": {
      "include": ["no-inline-styles/no-inline-styles"]
    }
  }
}

Usage

Once configured, the plugin will flag any inline styles:

// ❌ Error
<div style={{ color: 'red' }}>Content</div>

// ✅ Good
<div className="text-red-500">Content</div>

Ignoring Specific Cases

If you have legitimate use cases for inline styles, you can ignore specific lines:

// deno-lint-ignore no-inline-styles/no-inline-styles
<div style={{ backgroundColor: dynamicColor }}>Content</div>