plugin.ts

/**
 * Deno lint plugin to prevent inline styles in JSX/TSX components.
 *
 * This rule blocks all usage of the `style` prop on JSX elements to enforce
 * consistent styling through CSS classes (Tailwind, CSS modules, etc.).
 *
 * ## Installation
 *
 * Add the plugin to your `deno.json`:
 *
 * ```json
 * {
 *   "lint": {
 *     "plugins": ["jsr:@intility/no-inline-styles"],
 *     "rules": {
 *       "tags": ["recommended"],
 *       "include": ["no-inline-styles/no-inline-styles"]
 *     }
 *   }
 * }
 * ```
 *
 * ## Usage
 *
 * Once configured, the plugin will flag any inline styles:
 *
 * ```tsx
 * // ❌ Error: Inline styles are not allowed
 * <div style={{ color: 'red', padding: '10px' }}>
 *   Content
 * </div>
 *
 * // ✅ Good: Use CSS classes
 * <div className="text-red-500 p-2">
 *   Content
 * </div>
 * ```
 *
 * ## Ignoring Specific Cases
 *
 * If you have legitimate use cases for inline styles, you can ignore specific lines:
 *
 * ```tsx
 * // deno-lint-ignore no-inline-styles/no-inline-styles
 * <div style={{ backgroundColor: dynamicColor }}>
 *   Content
 * </div>
 * ```
 *
 * @module
 */

/**
 * Deno lint plugin that enforces CSS classes over inline styles in JSX/TSX.
 *
 * Provides a single rule that detects and reports any usage of the `style` prop on JSX elements.
 */
const plugin: Deno.lint.Plugin = {
  name: "no-inline-styles",
  rules: {
    "no-inline-styles": {
      create(context) {
        return {
          'JSXAttribute[name.name="style"]'(node) {
            context.report({
              node,
              message:
                "Inline styles are not allowed. Use CSS classes (Tailwind, CSS modules, etc.) instead.",
            });
          },
        };
      },
    },
  },
};

export default plugin;