1---
2name: transformer-compile-class
3description: Compile multiple classes into one hashed class
4---
5 
6# Transformer Compile Class
7 
8Compiles multiple utility classes into a single hashed class for smaller HTML.
9 
10## Installation
11 
12```ts
13import { defineConfig, transformerCompileClass } from 'unocss'
14 
15export default defineConfig({
16  transformers: [
17    transformerCompileClass(),
18  ],
19})
20```
21 
22## Usage
23 
24Add `:uno:` prefix to mark classes for compilation:
25 
26```html
27<!-- Before -->
28<div class=":uno: text-center sm:text-left">
29  <div class=":uno: text-sm font-bold hover:text-red" />
30</div>
31 
32<!-- After -->
33<div class="uno-qlmcrp">
34  <div class="uno-0qw2gr" />
35</div>
36```
37 
38## Generated CSS
39 
40```css
41.uno-qlmcrp {
42  text-align: center;
43}
44.uno-0qw2gr {
45  font-size: 0.875rem;
46  line-height: 1.25rem;
47  font-weight: 700;
48}
49.uno-0qw2gr:hover {
50  --un-text-opacity: 1;
51  color: rgb(248 113 113 / var(--un-text-opacity));
52}
53@media (min-width: 640px) {
54  .uno-qlmcrp {
55    text-align: left;
56  }
57}
58```
59 
60## Options
61 
62```ts
63transformerCompileClass({
64  // Custom trigger string (default: ':uno:')
65  trigger: ':uno:',
66  
67  // Custom class prefix (default: 'uno-')
68  classPrefix: 'uno-',
69  
70  // Hash function for class names
71  hashFn: (str) => /* custom hash */,
72  
73  // Keep original classes alongside compiled
74  keepOriginal: false,
75})
76```
77 
78## Use Cases
79 
80- **Smaller HTML** - Reduce repetitive class strings
81- **Obfuscation** - Hide utility class names in production
82- **Performance** - Fewer class attributes to parse
83 
84## ESLint Integration
85 
86Enforce compile class usage across project:
87 
88```json
89{
90  "rules": {
91    "@unocss/enforce-class-compile": "warn"
92  }
93}
94```
95 
96This rule:
97- Warns when class attribute doesn't start with `:uno:`
98- Auto-fixes by adding the prefix
99 
100Options:
101 
102```json
103{
104  "rules": {
105    "@unocss/enforce-class-compile": ["warn", {
106      "prefix": ":uno:",
107      "enableFix": true
108    }]
109  }
110}
111```
112 
113## Combining with Other Transformers
114 
115```ts
116export default defineConfig({
117  transformers: [
118    transformerVariantGroup(),  // Process variant groups first
119    transformerDirectives(),    // Then directives
120    transformerCompileClass(),  // Compile last
121  ],
122})
123```
124 
125<!-- 
126Source references:
127- https://unocss.dev/transformers/compile-class
128-->
129