0
# Class Ordering Rules
1

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

4
## Capabilities
5

6
### Order Rule
7

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

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

31
interface OrderRuleOptions {
32
  /** Array of function names that contain UnoCSS classes */
33
  unoFunctions?: string[];
34
  /** Array of regex patterns matching variable names containing UnoCSS classes */
35
  unoVariables?: string[];
36
}
37
```
38

39
**Default Configuration:**
40

41
```typescript
42
{
43
  unoFunctions: ["clsx", "classnames"],
44
  unoVariables: ["^cls", "classNames?$"]
45
}
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
// ESLint configuration
52
{
53
  rules: {
54
    "@unocss/order": ["warn", {
55
      unoFunctions: ["clsx", "classnames", "cn"],
56
      unoVariables: ["^cls", "className", "styles$"]
57
    }]
58
  }
59
}
60
```
61

62
**Supported Contexts:**
63

64
```jsx
65
// JSX attributes
66
<div className="p-4 bg-red-500 text-white" />
67

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

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

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

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

80
// Variable assignments
81
const buttonClass = "p-4 bg-red-500 text-white"
82
```
83

84
### Order Attributify Rule
85

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

88
```typescript { .api }
89
/**
90
 * ESLint rule for ordering UnoCSS attributify attributes
91
 * Only works with Vue template syntax
92
 */
93
interface OrderAttributifyRule extends ESLintRule {
94
  name: "order-attributify";
95
  meta: {
96
    type: "layout";  
97
    fixable: "code";
98
    docs: {
99
      description: "Order of UnoCSS attributes";
100
    };
101
    messages: {
102
      "invalid-order": "UnoCSS attributes are not ordered";
103
    };
104
    schema: [];
105
  };
106
  defaultOptions: [];
107
}
108

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

113
**Usage Examples:**
114

115
```vue
116
<!-- Before: unordered attributify attributes -->
117
<div text-white bg-red-500 p-4 m-2 />
118

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

123
**Configuration:**
124

125
```typescript
126
// ESLint configuration
127
{
128
  rules: {
129
    "@unocss/order-attributify": "warn"
130
  }
131
}
132
```
133

134
## Implementation Details
135

136
### AST Node Support
137

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

140
**Standard JavaScript/TypeScript:**
141
- `Literal` nodes for string literals
142
- `TemplateLiteral` nodes for template strings
143
- `TaggedTemplateExpression` for String.raw templates
144
- `CallExpression` for function calls
145
- `VariableDeclarator` for variable assignments
146

147
**JSX (React):**
148
- `JSXAttribute` nodes for JSX attributes
149
- `JSXExpressionContainer` for dynamic expressions
150

151
**Vue Templates:**
152
- `VAttribute` nodes for template attributes  
153
- `VLiteral` nodes for literal values
154

155
**Svelte Components:**
156
- `SvelteAttribute` nodes for component attributes
157
- `SvelteLiteral` and `SvelteMustacheTag` for values
158

159
### Configuration Integration
160

161
Both rules integrate with UnoCSS configuration:
162

163
```typescript { .api }
164
// ESLint settings integration
165
interface ESLintSettings {
166
  unocss?: {
167
    /** Path to UnoCSS configuration file */
168
    configPath?: string;
169
  };
170
}
171
```
172

173
**ESLint Configuration:**
174

175
```javascript
176
module.exports = {
177
  settings: {
178
    unocss: {
179
      configPath: "./uno.config.ts"
180
    }
181
  },
182
  rules: {
183
    "@unocss/order": "warn",
184
    "@unocss/order-attributify": "warn"
185
  }
186
};
187
```
188

189
### Framework-Specific Behavior
190

191
**Vue Integration:**
192
- Requires `vue-eslint-parser`
193
- Uses `defineTemplateBodyVisitor` for template processing
194
- Supports both template and script sections
195

196
**Svelte Integration:**  
197
- Requires `svelte-eslint-parser`
198
- Handles Svelte-specific AST nodes
199
- Supports component attributes and expressions
200

201
**JSX Integration:**
202
- Works with `@typescript-eslint/parser`
203
- Handles JSX attributes and expressions
204
- Supports React and other JSX frameworks