Extractors ใน UnoCSS

Extractor คือฟีเจอร์ที่ช่วยให้ UnoCSS สามารถค้นหา utility class จาก source code ได้อย่างถูกต้อง แม้ในไฟล์หรือ syntax ที่ซับซ้อน เช่น Vue, JSX, Markdown

ประโยชน์ของ Extractors

• รองรับ syntax หลากหลาย (HTML, Vue, JSX, Markdown, ...)
• ช่วยให้ UnoCSS เจอ class ที่เขียนแปลก ๆ หรือซ่อนอยู่ใน template

ตัวอย่าง Extractor ที่ใช้บ่อย

UnoCSS มี Extractor หลัก ๆ เช่น

• extractorSplit (default): แยก class จาก attribute/class string ทั่วไป
• extractorPug: รองรับไฟล์ .pug
• extractorSvelte: รองรับไฟล์ .svelte

วิธีเพิ่ม Extractor

ใน uno.config.ts:

import { extractorPug, extractorSplit } from "unocss";

defineConfig({
  extractors: [extractorSplit(), extractorPug()],
});

หมายเหตุ

• โดยปกติไม่ต้องตั้งค่า UnoCSS จะเลือก extractor ที่เหมาะสมให้
• ถ้าเขียน syntax พิเศษหรือใช้ framework ใหม่ สามารถเพิ่ม custom extractor ได้เอง

---