tessl/npm-unocss--eslint-plugin

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

UnoCSS ESLint Plugin

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

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;
}