0
# Class Compilation Verification
1

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

4
## Capabilities
5

6
### Enforce Class Compile Rule
7

8
Enforces that class strings include the required compilation prefix for UnoCSS processing.
9

10
```typescript { .api }
11
/**
12
 * ESLint rule for enforcing class compilation prefix
13
 * Ensures classes include prefix like ":uno:" for UnoCSS compilation
14
 */
15
interface EnforceClassCompileRule extends ESLintRule {
16
  name: "enforce-class-compile";
17
  meta: {
18
    type: "problem";
19
    fixable: "code"; 
20
    docs: {
21
      description: "Enforce class compilation";
22
    };
23
    messages: {
24
      missing: 'prefix: `{{prefix}}` is missing';
25
    };
26
    schema: [EnforceClassCompileOptions];
27
  };
28
  defaultOptions: [EnforceClassCompileOptions];
29
}
30

31
interface EnforceClassCompileOptions {
32
  /** Prefix required for class compilation */
33
  prefix: string;
34
  /** Whether to enable automatic fixing */
35
  enableFix: boolean;
36
}
37
```
38

39
**Default Configuration:**
40

41
```typescript
42
{
43
  prefix: ":uno:",
44
  enableFix: true
45
}
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
// ESLint configuration
52
{
53
  rules: {
54
    "@unocss/enforce-class-compile": ["error", {
55
      prefix: ":custom:",
56
      enableFix: true
57
    }]
58
  }
59
}
60
```
61

62
### Supported Contexts
63

64
The rule currently supports Vue templates with planned support for JSX and Svelte:
65

66
**Vue Templates:**
67

68
```vue
69
<!-- Before: missing prefix -->
70
<div class="p-4 bg-red-500" />
71

72
<!-- After: with required prefix -->  
73
<div class=":uno: p-4 bg-red-500" />
74

75
<!-- Complex expressions -->
76
<div :class="{ ':uno: p-4': condition, ':uno: bg-red-500': active }" />
77

78
<!-- Template literals -->
79
<div :class="`${':uno: p-4'} ${condition ? ':uno: bg-red-500' : ''}`" />
80
```
81

82
**JSX/Svelte (Planned):**
83

84
```typescript
85
// Currently marked as TODO in implementation
86
// JSXAttribute support - NEED HELP
87
// SvelteAttribute support - NEED HELP
88
```
89

90
## Implementation Details
91

92
### Vue Template Processing
93

94
The rule uses Vue-specific AST visitors for template processing:
95

96
```typescript { .api }
97
/**
98
 * Vue template visitor functions
99
 */
100
interface VueTemplateVisitors {
101
  /** Process class attributes on Vue elements */
102
  "VAttribute[key.name=class]"(attr: VAttribute): void;
103
  
104
  /** Process string literals in class expressions */
105
  "VAttribute[key.argument.name=class] VExpressionContainer Literal"(
106
    literal: ESLintStringLiteral
107
  ): void;
108
  
109
  /** Process template elements in class expressions */
110
  "VAttribute[key.argument.name=class] VExpressionContainer TemplateElement"(
111
    templateElement: ESLintTemplateElement
112
  ): void;
113
  
114
  /** Process object properties in class expressions */
115
  "VAttribute[key.argument.name=class] VExpressionContainer Property"(
116
    property: ESLintProperty
117
  ): void;
118
}
119
```
120

121
### Auto-Fixing Behavior
122

123
The rule provides automatic fixes when `enableFix` is true:
124

125
**Simple Class Attributes:**
126

127
```vue
128
<!-- Input -->
129
<div class="p-4 bg-red-500" />
130

131
<!-- Fixed output -->
132
<div class=":uno: p-4 bg-red-500" />
133
```
134

135
**Object Properties:**
136

137
```vue
138
<!-- Input -->
139
<div :class="{ 'p-4': true, 'bg-red-500': active }" />
140

141
<!-- Fixed output -->  
142
<div :class="{ ':uno: p-4': true, ':uno: bg-red-500': active }" />
143
```
144

145
**Shorthand Properties:**
146

147
```vue
148
<!-- Input with shorthand -->
149
<div :class="{ p4: isActive }" />
150

151
<!-- Fixed output -->
152
<div :class="{ ':uno: p4': p4 }" />
153
```
154

155
### Configuration Options
156

157
```typescript { .api }
158
interface EnforceClassCompileOptions {
159
  /** 
160
   * Prefix required for class compilation
161
   * Default: ":uno:"
162
   * Common alternatives: ":unocss:", "@apply"
163
   */
164
  prefix: string;
165
  
166
  /** 
167
   * Whether to enable automatic fixing
168
   * Default: true
169
   * Set to false for error reporting only
170
   */
171
  enableFix: boolean;
172
}
173
```
174

175
**Configuration Examples:**
176

177
```javascript
178
// Minimal configuration (uses defaults)
179
{
180
  rules: {
181
    "@unocss/enforce-class-compile": "error"
182
  }
183
}
184

185
// Custom prefix
186
{
187
  rules: {
188
    "@unocss/enforce-class-compile": ["error", {
189
      prefix: ":unocss:",
190
      enableFix: true
191
    }]
192
  }
193
}
194

195
// Error only (no auto-fix)
196
{
197
  rules: {
198
    "@unocss/enforce-class-compile": ["error", {
199
      prefix: ":uno:",
200
      enableFix: false  
201
    }]
202
  }
203
}
204
```
205

206
### Framework Support Status
207

208
**Current Support:**
209
- ✅ Vue templates with `vue-eslint-parser`
210
- ✅ Vue class attributes (`class="..."`)
211
- ✅ Vue dynamic classes (`:class="..."`)
212
- ✅ Vue object expressions (`:class="{ ... }"`)
213
- ✅ Vue template literals (`:class="\`...\`"`)
214

215
**Planned Support:**
216
- ⏳ JSX attributes (`className="..."`)
217
- ⏳ Svelte class attributes (`class="..."`)
218

219
**Implementation Notes:**
220

221
```typescript
222
// Current JSX/Svelte visitor stubs
223
const scriptVisitor: RuleListener = {
224
  JSXAttribute(_node) {
225
    // todo: add support | NEED HELP
226
  },
227
  SvelteAttribute(_node: any) {
228
    // todo: add support | NEED HELP  
229
  },
230
}
231
```
232

233
### Error Messages
234

235
The rule provides clear error messages indicating the missing prefix:
236

237
```typescript { .api }
238
interface ErrorData {
239
  /** The required prefix that is missing */
240
  prefix: string; // e.g., ":uno:"
241
}
242
```
243

244
**Error Message Examples:**
245

246
```text
247
prefix: `:uno:` is missing
248
prefix: `:custom:` is missing
249
```