tessl/npm-unocss--eslint-plugin
ESLint plugin for UnoCSS providing rules for class ordering, attributify ordering, blocklist enforcement, and class compilation
—
attributify-ordering.mddocs/
Attributify Ordering
Specialized ESLint rule for ordering UnoCSS utilities in Vue, Svelte, and other frameworks that support UnoCSS attributify mode.
Capabilities
Order Attributify Rule
Enforces consistent ordering of UnoCSS utilities when using attributify mode in framework templates.
/**
* ESLint rule for ordering UnoCSS utilities in attributify mode
* Supports Vue templates, Svelte components, and similar frameworks
*/
interface OrderAttributifyRule extends ESLintRule {
name: "order-attributify";
meta: {
type: "layout";
fixable: "code";
docs: {
description: "Order of UnoCSS utilities in attributify mode";
};
messages: {
"invalid-order": "UnoCSS utilities are not ordered";
};
schema: [];
};
defaultOptions: [];
}Usage Examples:
<!-- Vue Template - Before (unordered) -->
<template>
<div p-4 bg-red-500 text-white m-2>
Content
</div>
</template>
<!-- Vue Template - After (ordered by ESLint rule) -->
<template>
<div m-2 p-4 bg-red-500 text-white>
Content
</div>
</template><!-- Svelte Component - Before -->
<div p-4 bg-blue-500 text-white m-2>
Content
</div>
<!-- Svelte Component - After -->
<div m-2 p-4 bg-blue-500 text-white>
Content
</div>Framework Support
The order-attributify rule provides AST visitor patterns for multiple frameworks:
- Vue: Supports Vue 2 and Vue 3 template syntax
- Svelte: Full Svelte component syntax support
- Standard HTML: Works with plain HTML templates
Configuration
The rule works automatically without configuration options, using UnoCSS's default sorting logic through the worker system:
// ESLint configuration
export default [
{
rules: {
"unocss/order-attributify": "warn"
}
}
];Integration with UnoCSS Config
The rule automatically integrates with your UnoCSS configuration file to ensure consistent sorting based on your project's specific setup and custom utilities.
Install with Tessl CLI
npx tessl i tessl/npm-unocss--eslint-plugin