or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

attributify-ordering.mdblocklist.mdclass-compilation.mdclass-ordering.mdconfiguration.mdindex.md
tile.json

tessl/npm-unocss--eslint-plugin

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/eslint-plugin@66.5.x

To install, run

npx @tessl/cli install tessl/npm-unocss--eslint-plugin@66.5.0

index.mddocs/

UnoCSS ESLint Plugin

UnoCSS ESLint Plugin provides essential ESLint rules for projects using UnoCSS, the instant on-demand Atomic CSS engine. It offers four specialized rules to maintain code quality and consistency: class ordering, attributify ordering, blocklist enforcement, and class compilation verification. The plugin integrates seamlessly with ESLint configurations and supports JavaScript, TypeScript, Vue, Svelte, and other frameworks.

Package Information

  • Package Name: @unocss/eslint-plugin
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @unocss/eslint-plugin

Core Imports

import unocssPlugin from "@unocss/eslint-plugin";

For CommonJS:

const unocssPlugin = require("@unocss/eslint-plugin");

Basic Usage

// ESLint Flat Config (ESLint 9+)
import unocssPlugin from "@unocss/eslint-plugin";

export default [
  unocssPlugin.configs.flat,
  {
    rules: {
      "unocss/order": "warn",
      "unocss/blocklist": "error",
    },
  },
];
// Legacy ESLint Config
module.exports = {
  extends: ["@unocss/eslint-plugin/recommended"],
  rules: {
    "@unocss/order": "warn",
    "@unocss/blocklist": "error",
  },
};

Architecture

The UnoCSS ESLint Plugin is built around several key components:

  • Rule Engine: Four specialized ESLint rules targeting different aspects of UnoCSS usage
  • Worker System: Background processing for UnoCSS operations (sorting, blocklist checking)
  • Configuration Integration: UnoCSS config file integration for context-aware rule enforcement
  • Multi-Framework Support: AST visitor patterns supporting Vue, Svelte, JSX, and standard JavaScript/TypeScript
  • Synchronous Operations: Worker-based synchronous execution of UnoCSS utilities within ESLint context

Capabilities

Class Ordering Rules

Rules for enforcing consistent ordering of UnoCSS utility classes in various contexts including class attributes, function calls, and template literals.

// Main plugin export (default export)
interface UnoCSSSLintPlugin {
  rules: {
    order: ESLintRule;
    "order-attributify": ESLintRule;
    blocklist: ESLintRule;
    "enforce-class-compile": ESLintRule;
  };
  configs: {
    recommended: ESLintConfig;
    flat: ESLintConfig;
  };
}

// Order rule specific configuration
interface OrderRuleOptions {
  unoFunctions?: string[];
  unoVariables?: string[];
}

Class Ordering Rules

Attributify Ordering

Specialized rule for ordering UnoCSS utilities in Vue, Svelte, and other frameworks that support attributify mode.

// Order attributify rule for framework templates
interface OrderAttributifyRule extends ESLintRule {
  name: "order-attributify";
  meta: {
    type: "layout";
    fixable: "code";
    docs: {
      description: "Order of UnoCSS utilities in attributify mode";
    };
  };
}

Attributify Ordering

Blocklist Enforcement

Prevents usage of specific CSS utilities or patterns based on UnoCSS blocklist configuration, with context-aware error reporting.

// Blocklist rule configuration
interface BlocklistRule extends ESLintRule {
  meta: {
    type: "problem";
    fixable: "code";
    messages: {
      "in-blocklist": string;
    };
  };
}

Blocklist Enforcement

Class Compilation Verification

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

// Enforce class compile rule options
interface EnforceClassCompileOptions {
  prefix: string; // Default: ":uno:"
  enableFix: boolean; // Default: true
}

Class Compilation

Configuration Presets

Pre-configured ESLint configurations for quick setup in both legacy and flat config formats.

// Configuration preset structure
interface ConfigPresets {
  recommended: {
    plugins: string[];
    rules: Record<string, string>;
  };
  flat: {
    plugins: Record<string, any>;
    rules: Record<string, string>;
  };
}

Configuration Setup

Types

// ESLint shared configuration settings extension
interface SharedConfigurationSettings {
  unocss?: {
    configPath?: string;
  };
}

// Core ESLint rule type used by all plugin rules
interface ESLintRule {
  meta: {
    type: "problem" | "suggestion" | "layout";
    fixable?: "code" | "whitespace";
    docs: {
      description: string;
    };
    messages: Record<string, string>;
    schema?: any[];
  };
  create: (context: any) => Record<string, Function>;
}

// Configuration presets for different ESLint config formats
interface ESLintConfig {
  plugins: string[] | Record<string, any>;
  rules: Record<string, string>;
}

// Worker function types for synchronous UnoCSS operations
type SyncAction = {
  (configPath: string | undefined, action: "sort", classes: string): string;
  (
    configPath: string | undefined,
    action: "blocklist",
    classes: string,
    id?: string
  ): [string, BlocklistMeta | undefined][];
};

// Blocklist metadata for error reporting
interface BlocklistMeta {
  message?: string | ((raw: string) => string);
}

// Enforce class compile rule options
interface EnforceClassCompileOptions {
  prefix: string;
  enableFix: boolean;
}