การทำงานของ UnoCSS

สรุปจากบทความ https://antfu.me/posts/reimagine-atomic-css

1. On-demand Generation

UnoCSS จะสร้าง CSS เฉพาะ class ที่ใช้จริงในโค้ดเท่านั้น โดยมีกระบวนการดังนี้:

// uno.config.ts
export default defineConfig({
  content: {
    files: ["**/*.html", "**/*.vue", "**/*.js"], // ไฟล์ที่จะสแกนหา classes
  },
});

ตัวอย่างการทำงาน:

• เมื่อมีโค้ด HTML: <div class="p-4 bg-blue-500"></div>
• UnoCSS จะ generate CSS สำหรับ class p-4 และ bg-blue-500 เท่านั้น

2. Build-time Processing

ส่วนใหญ่ทำงานตอน build โปรเจค:

npm run build

ขั้นตอนการทำงาน:

1. สแกนไฟล์ทั้งหมดที่กำหนดใน config
2. แปลง utility classes เป็น CSS rules
3. Generate ไฟล์ CSS ออกมา

3. Runtime Support

ในโหมด development จะมี runtime ที่ช่วย:

• ตรวจสอบการใช้งาน classes แบบ real-time
• Hot reload เมื่อมีการเปลี่ยนแปลง

4. Zero CSS by Default

UnoCSS จะไม่ generate CSS ที่ไม่ได้ใช้ ทำให้ไฟล์ CSS มีขนาดเล็กมาก

5. Preset System

สามารถเลือกใช้ preset ต่างๆ ได้ตามต้องการ:

import presetAttributify from "@unocss/preset-attributify";
import presetUno from "@unocss/preset-uno";

export default defineConfig({
  presets: [
    presetUno(), // preset หลัก
    presetAttributify(), // เพิ่มความสามารถ attribute mode
  ],
});

ตัวอย่างการทำงานร่วมกับ Vue

<template>
  <button
    class="px-4 py-2 rounded"
    bg="blue-500 hover:blue-600"
    text="white"
  >
    คลิกฉัน
  </button>
</template>

ในตัวอย่างนี้ UnoCSS จะ generate CSS สำหรับ:

• class px-4, py-2, rounded
• attribute bg="blue-500 hover:blue-600"
• attribute text="white"