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 Ordering Rules

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

Rules for enforcing consistent ordering of UnoCSS utility classes across different contexts and frameworks.

Capabilities

Order Rule

Enforces consistent ordering of UnoCSS utilities in class attributes, function calls, and template literals.

/**
 * ESLint rule for ordering UnoCSS utilities in class attributes
 * Supports JSX, Vue, Svelte, and standard HTML class attributes
 */
interface OrderRule extends ESLintRule {
  name: "order";
  meta: {
    type: "layout";
    fixable: "code";
    docs: {
      description: "Order of UnoCSS utilities in class attribute";
    };
    messages: {
      "invalid-order": "UnoCSS utilities are not ordered";
    };
    schema: [OrderRuleOptions];
  };
  defaultOptions: [OrderRuleOptions];
}

interface OrderRuleOptions {
  /** Array of function names that contain UnoCSS classes */
  unoFunctions?: string[];
  /** Array of regex patterns matching variable names containing UnoCSS classes */
  unoVariables?: string[];
}

Default Configuration:

{
  unoFunctions: ["clsx", "classnames"],
  unoVariables: ["^cls", "classNames?$"]
}

Usage Examples:

// ESLint configuration
{
  rules: {
    "@unocss/order": ["warn", {
      unoFunctions: ["clsx", "classnames", "cn"],
      unoVariables: ["^cls", "className", "styles$"]
    }]
  }
}

Supported Contexts:

// JSX attributes
<div className="p-4 bg-red-500 text-white" />

// Vue templates
<div class="p-4 bg-red-500 text-white" />

// Svelte components
<div class="p-4 bg-red-500 text-white" />

// Function calls
clsx("p-4 bg-red-500", condition && "text-white")

// Template literals
const styles = `p-4 bg-red-500 text-white`

// Variable assignments
const buttonClass = "p-4 bg-red-500 text-white"

Order Attributify Rule

Enforces ordering of UnoCSS attributify-style attributes in Vue templates.

/**
 * ESLint rule for ordering UnoCSS attributify attributes
 * Only works with Vue template syntax
 */
interface OrderAttributifyRule extends ESLintRule {
  name: "order-attributify";
  meta: {
    type: "layout";  
    fixable: "code";
    docs: {
      description: "Order of UnoCSS attributes";
    };
    messages: {
      "invalid-order": "UnoCSS attributes are not ordered";
    };
    schema: [];
  };
  defaultOptions: [];
}

/** Attribute names ignored during attributify ordering */
const IGNORE_ATTRIBUTES: string[] = ["style", "class", "classname", "value"];

Usage Examples:

<!-- Before: unordered attributify attributes -->
<div text-white bg-red-500 p-4 m-2 />

<!-- After: ordered attributify attributes -->  
<div p-4 m-2 bg-red-500 text-white />

Configuration:

// ESLint configuration
{
  rules: {
    "@unocss/order-attributify": "warn"
  }
}

Implementation Details

AST Node Support

The order rules support various AST node types across different parsers:

Standard JavaScript/TypeScript:

Literal nodes for string literals
TemplateLiteral nodes for template strings
TaggedTemplateExpression for String.raw templates
CallExpression for function calls
VariableDeclarator for variable assignments

JSX (React):

JSXAttribute nodes for JSX attributes
JSXExpressionContainer for dynamic expressions

Vue Templates:

VAttribute nodes for template attributes
VLiteral nodes for literal values

Svelte Components:

SvelteAttribute nodes for component attributes
SvelteLiteral and SvelteMustacheTag for values

Configuration Integration

Both rules integrate with UnoCSS configuration:

// ESLint settings integration
interface ESLintSettings {
  unocss?: {
    /** Path to UnoCSS configuration file */
    configPath?: string;
  };
}

ESLint Configuration:

module.exports = {
  settings: {
    unocss: {
      configPath: "./uno.config.ts"
    }
  },
  rules: {
    "@unocss/order": "warn",
    "@unocss/order-attributify": "warn"
  }
};

Framework-Specific Behavior

Vue Integration:

Requires vue-eslint-parser
Uses defineTemplateBodyVisitor for template processing
Supports both template and script sections

Svelte Integration:

Requires svelte-eslint-parser
Handles Svelte-specific AST nodes
Supports component attributes and expressions

JSX Integration:

Works with @typescript-eslint/parser
Handles JSX attributes and expressions
Supports React and other JSX frameworks

Install with Tessl CLI

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

docs

attributify-ordering.md