0
# Attributify Ordering
1

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

4
## Capabilities
5

6
### Order Attributify Rule
7

8
Enforces consistent ordering of UnoCSS utilities when using attributify mode in framework templates.
9

10
```typescript { .api }
11
/**
12
 * ESLint rule for ordering UnoCSS utilities in attributify mode
13
 * Supports Vue templates, Svelte components, and similar frameworks
14
 */
15
interface OrderAttributifyRule extends ESLintRule {
16
  name: "order-attributify";
17
  meta: {
18
    type: "layout";
19
    fixable: "code";
20
    docs: {
21
      description: "Order of UnoCSS utilities in attributify mode";
22
    };
23
    messages: {
24
      "invalid-order": "UnoCSS utilities are not ordered";
25
    };
26
    schema: [];
27
  };
28
  defaultOptions: [];
29
}
30
```
31

32
**Usage Examples:**
33

34
```vue
35
<!-- Vue Template - Before (unordered) -->
36
<template>
37
  <div p-4 bg-red-500 text-white m-2>
38
    Content
39
  </div>
40
</template>
41

42
<!-- Vue Template - After (ordered by ESLint rule) -->
43
<template>
44
  <div m-2 p-4 bg-red-500 text-white>
45
    Content
46
  </div>
47
</template>
48
```
49

50
```svelte
51
<!-- Svelte Component - Before -->
52
<div p-4 bg-blue-500 text-white m-2>
53
  Content
54
</div>
55

56
<!-- Svelte Component - After -->
57
<div m-2 p-4 bg-blue-500 text-white>
58
  Content
59
</div>
60
```
61

62
### Framework Support
63

64
The `order-attributify` rule provides AST visitor patterns for multiple frameworks:
65

66
- **Vue**: Supports Vue 2 and Vue 3 template syntax
67
- **Svelte**: Full Svelte component syntax support
68
- **Standard HTML**: Works with plain HTML templates
69

70
### Configuration
71

72
The rule works automatically without configuration options, using UnoCSS's default sorting logic through the worker system:
73

74
```javascript
75
// ESLint configuration
76
export default [
77
  {
78
    rules: {
79
      "unocss/order-attributify": "warn"
80
    }
81
  }
82
];
83
```
84

85
### Integration with UnoCSS Config
86

87
The rule automatically integrates with your UnoCSS configuration file to ensure consistent sorting based on your project's specific setup and custom utilities.