tessl/npm-unocss--eslint-plugin

ESLint plugin for UnoCSS providing rules for class ordering, attributify ordering, blocklist enforcement, and class compilation

—

Pending

Overview

Eval results

Files

Class Compilation Verification

Name: tessl/npm-unocss--eslint-plugin
Author: tessl

Ensures proper class compilation prefix usage for UnoCSS processing, with configurable prefix and auto-fixing capabilities for Vue templates.

Capabilities

Enforce Class Compile Rule

Enforces that class strings include the required compilation prefix for UnoCSS processing.

/**
 * ESLint rule for enforcing class compilation prefix
 * Ensures classes include prefix like ":uno:" for UnoCSS compilation
 */
interface EnforceClassCompileRule extends ESLintRule {
  name: "enforce-class-compile";
  meta: {
    type: "problem";
    fixable: "code"; 
    docs: {
      description: "Enforce class compilation";
    };
    messages: {
      missing: 'prefix: `{{prefix}}` is missing';
    };
    schema: [EnforceClassCompileOptions];
  };
  defaultOptions: [EnforceClassCompileOptions];
}

interface EnforceClassCompileOptions {
  /** Prefix required for class compilation */
  prefix: string;
  /** Whether to enable automatic fixing */
  enableFix: boolean;
}

Default Configuration:

{
  prefix: ":uno:",
  enableFix: true
}

Usage Examples:

// ESLint configuration
{
  rules: {
    "@unocss/enforce-class-compile": ["error", {
      prefix: ":custom:",
      enableFix: true
    }]
  }
}

Supported Contexts

The rule currently supports Vue templates with planned support for JSX and Svelte:

Vue Templates:

<!-- Before: missing prefix -->
<div class="p-4 bg-red-500" />

<!-- After: with required prefix -->  
<div class=":uno: p-4 bg-red-500" />

<!-- Complex expressions -->
<div :class="{ ':uno: p-4': condition, ':uno: bg-red-500': active }" />

<!-- Template literals -->
<div :class="`${':uno: p-4'} ${condition ? ':uno: bg-red-500' : ''}`" />

JSX/Svelte (Planned):

// Currently marked as TODO in implementation
// JSXAttribute support - NEED HELP
// SvelteAttribute support - NEED HELP

Implementation Details

Vue Template Processing

The rule uses Vue-specific AST visitors for template processing:

/**
 * Vue template visitor functions
 */
interface VueTemplateVisitors {
  /** Process class attributes on Vue elements */
  "VAttribute[key.name=class]"(attr: VAttribute): void;
  
  /** Process string literals in class expressions */
  "VAttribute[key.argument.name=class] VExpressionContainer Literal"(
    literal: ESLintStringLiteral
  ): void;
  
  /** Process template elements in class expressions */
  "VAttribute[key.argument.name=class] VExpressionContainer TemplateElement"(
    templateElement: ESLintTemplateElement
  ): void;
  
  /** Process object properties in class expressions */
  "VAttribute[key.argument.name=class] VExpressionContainer Property"(
    property: ESLintProperty
  ): void;
}

Auto-Fixing Behavior

The rule provides automatic fixes when enableFix is true:

Simple Class Attributes:

<!-- Input -->
<div class="p-4 bg-red-500" />

<!-- Fixed output -->
<div class=":uno: p-4 bg-red-500" />

Object Properties:

<!-- Input -->
<div :class="{ 'p-4': true, 'bg-red-500': active }" />

<!-- Fixed output -->  
<div :class="{ ':uno: p-4': true, ':uno: bg-red-500': active }" />

Shorthand Properties:

<!-- Input with shorthand -->
<div :class="{ p4: isActive }" />

<!-- Fixed output -->
<div :class="{ ':uno: p4': p4 }" />

Configuration Options

interface EnforceClassCompileOptions {
  /** 
   * Prefix required for class compilation
   * Default: ":uno:"
   * Common alternatives: ":unocss:", "@apply"
   */
  prefix: string;
  
  /** 
   * Whether to enable automatic fixing
   * Default: true
   * Set to false for error reporting only
   */
  enableFix: boolean;
}

Configuration Examples:

// Minimal configuration (uses defaults)
{
  rules: {
    "@unocss/enforce-class-compile": "error"
  }
}

// Custom prefix
{
  rules: {
    "@unocss/enforce-class-compile": ["error", {
      prefix: ":unocss:",
      enableFix: true
    }]
  }
}

// Error only (no auto-fix)
{
  rules: {
    "@unocss/enforce-class-compile": ["error", {
      prefix: ":uno:",
      enableFix: false  
    }]
  }
}

Framework Support Status

Current Support:

✅ Vue templates with vue-eslint-parser
✅ Vue class attributes (class="...")
✅ Vue dynamic classes (:class="...")
✅ Vue object expressions (:class="{ ... }")
✅ Vue template literals (:class="\...`"`)

Planned Support:

⏳ JSX attributes (className="...")
⏳ Svelte class attributes (class="...")

Implementation Notes:

// Current JSX/Svelte visitor stubs
const scriptVisitor: RuleListener = {
  JSXAttribute(_node) {
    // todo: add support | NEED HELP
  },
  SvelteAttribute(_node: any) {
    // todo: add support | NEED HELP  
  },
}

Error Messages

The rule provides clear error messages indicating the missing prefix:

interface ErrorData {
  /** The required prefix that is missing */
  prefix: string; // e.g., ":uno:"
}

Error Message Examples:

prefix: `:uno:` is missing
prefix: `:custom:` is missing

Install with Tessl CLI

npx tessl i tessl/npm-unocss--eslint-plugin

docs

attributify-ordering.md