Transformers

Transformers ใน UnoCSS คือ feature ที่ช่วยในการแปลง syntax ของ class ให้เป็นรูปแบบที่ต้องการ

Built-in Transformers

@unocss/transformer-directives

ช่วยในการแปลง CSS directives (@apply, @screen) ให้เป็น utility classes

.btn {
	@apply font-bold py-2 px-4 rounded;
}

@screen sm {
	.btn {
		@apply py-3 px-6;
	}
}

@unocss/transformer-variant-group

ช่วยในการจัดกลุ่ม variants เพื่อลดการเขียนซ้ํา

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>

<!-- จะถูกแปลงเป็น -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>

@unocss/transformer-compile-class

ช่วย compile class names ให้เป็น atomic CSS ที่มีขนาดเล็กลง

<div class="bg-blue-500 text-sm font-bold"/>

<!-- จะถูก compile เป็น -->
<div class="uno-g7sfh"/>

การใช้งาน Transformers

สามารถเพิ่ม transformers ในไฟล์ config ได้ดังนี้

// uno.config.ts
import { defineConfig } from 'unocss'
import { transformerDirectives, transformerVariantGroup } from 'unocss'

export default defineConfig({
	transformers: [
		transformerDirectives(),
		transformerVariantGroup(),
	],
})