การกำหนดค่า UnoCSS

การกำหนดค่า

การกำหนดค่าคือสิ่งที่ทำให้ UnoCSS ทรงพลัง

• Rules - กำหนด utilities CSS แบบ atomic
• Shortcuts - รวมหลายกฎเป็นตัวย่อเดียว
• Theme - กำหนดตัวแปรธีม
• Variants - ใช้ conventions แบบกำหนดเองกับกฎ
• Extractors - กำหนดตำแหน่งและวิธีการแยกการใช้งาน utilities
• Preflights - กำหนด CSS ดิบทั่วไป
• Layers - กำหนดลำดับของแต่ละเลเยอร์ utilities
• Presets - การกำหนดค่าที่กำหนดไว้ล่วงหน้าสำหรับกรณีใช้งานทั่วไป
• Transformers - Code transformers เพื่อแปลงซอร์สโค้ดผู้ใช้เพื่อสนับสนุน conventions
• Autocomplete - กำหนดคำแนะนำ autocomplete แบบกำหนดเอง

ตัวเลือก

rules

• ประเภท: Rule<Theme>[]

กฎเพื่อสร้าง utilities CSS รายการที่มาทีหลังมีลำดับความสำคัญสูงกว่า

shortcuts

• ประเภท: UserShortcuts<Theme>

คล้ายกับ shortcuts ของ Windi CSS ช่วยให้คุณสร้าง utilities ใหม่โดยการรวม existing ones รายการที่มาทีหลังมีลำดับความสำคัญสูงกว่า

theme

• ประเภท: Theme

อ็อบเจกต์ธีมสำหรับการกำหนดค่าที่ใช้ร่วมกันระหว่างกฎ

extendTheme

• ประเภท: Arrayable<ThemeExtender<Theme>> ฟังก์ชันแบบกำหนดเองที่เปลี่ยนแปลงอ็อบเจกต์ธีม

ยังสามารถส่งคืนอ็อบเจกต์ธีมใหม่เพื่อแทนที่อันเดิมได้

variants

• ประเภท: Variant<Theme>[]

Variants ที่ประมวลผล selectors ล่วงหน้า มีความสามารถในการเขียน CSS object ใหม่

extractors

• ประเภท: Extractor[]

Extractors เพื่อจัดการไฟล์ซอร์สและส่งออกคลาส/selectors ที่เป็นไปได้ สามารถรับรู้ภาษาได้

preflights

• ประเภท: Preflight<Theme>[]

การฉีด CSS ดิบ

layers

• ประเภท: Record<string, number>

ลำดับเลเยอร์ ค่าเริ่มต้นเป็น 0

outputToCssLayers

• ประเภท: boolean | UseCssLayersOptions
• ค่าเริ่มต้น: false

ส่งออกเลเยอร์ไปยัง CSS Cascade Layers

cssLayerName

• ประเภท: (internalLayer: string) => string | undefined | null

ระบุชื่อของ CSS layer ที่ internal layer ควรถูกส่งออกไป (สามารถเป็น sublayer เช่น "mylayer.mysublayer")

หากส่งคืน undefined ชื่อ internal layer จะถูกใช้เป็นชื่อ CSS layer หากส่งคืน null internal layer จะไม่ถูกส่งออกไปยัง CSS layer

sortLayers

• ประเภท: (layers: string[]) => string[]

ฟังก์ชันแบบกำหนดเองเพื่อจัดเรียงเลเยอร์

presets

• ประเภท: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

การกำหนดค่าที่กำหนดไว้ล่วงหน้าสำหรับกรณีใช้งานทั่วไป

transformers

• ประเภท: SourceCodeTransformer[]

Transformers แบบกำหนดเองสำหรับซอร์สโค้ด

blocklist

• ประเภท: BlocklistRule[]

กฎเพื่อยกเว้น selectors สำหรับ design system ของคุณ (เพื่อลดความเป็นไปได้) การรวมตัวเลือก warnExcluded ยังสามารถช่วยคุณระบุการใช้งานที่ผิดพลาด

safelist

• ประเภท: string[]

Utilities ที่รวมเสมอ

preprocess

• ประเภท: Arrayable<Preprocessor>

ประมวลผล utilities ที่เข้ามาล่วงหน้า ส่งคืนค่า falsy เพื่อยกเว้น

postprocess

• ประเภท: Arrayable<Postprocessor>

ประมวลผล utils object ที่สร้างขึ้นหลังจากนั้น

separators

• ประเภท: Arrayable<string>
• ค่าเริ่มต้น: [':', '-']

ตัวคั่น variant

extractorDefault

• ประเภท: Extractor | null | false
• ค่าเริ่มต้น: import('@unocss/core').defaultExtractor

Default extractor ที่ใช้เสมอ โดยค่าเริ่มต้นมันแบ่งซอร์สโค้ดตามช่องว่างและเครื่องหมายคำพูด

มันอาจถูกแทนที่โดย preset หรือ user config มีเพียงหนึ่ง default extractor เท่านั้นที่สามารถนำเสนอได้ อันที่มาทีหลังจะแทนที่อันก่อนหน้า

ส่ง null หรือ false เพื่อปิดใช้งาน default extractor

autocomplete

ตัวเลือกเพิ่มเติมสำหรับ auto complete

templates

• ประเภท: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

ฟังก์ชัน / templates แบบกำหนดเองเพื่อให้คำแนะนำ autocomplete

extractors

• ประเภท: Arrayable<AutoCompleteExtractor>

Extractors แบบกำหนดเองเพื่อเลือกคลาสที่เป็นไปได้และแปลงคำแนะนำแบบ class-name style เป็นรูปแบบที่ถูกต้อง

shorthands

• ประเภท: Record<string, string | string[]>

Shorthands แบบกำหนดเองเพื่อให้คำแนะนำ autocomplete หาก values เป็น array มันจะถูกรวมด้วย | และห่อด้วย ()

content

ตัวเลือกสำหรับแหล่งที่มาที่จะถูกแยกเป็นการใช้งาน utilities

แหล่งที่มาที่รองรับ:

• filesystem - แยกจากระบบไฟล์
• inline - แยกจากข้อความ plain inline
• pipeline - แยกจาก pipeline การแปลงของเครื่องมือสร้าง เช่น Vite และ Webpack

การใช้งานที่แยกจากแหล่งที่มาแต่ละแห่งจะถูก รวม เข้าด้วยกัน

filesystem

• ประเภท: string[]
• ค่าเริ่มต้น: []

รูปแบบ Glob เพื่อแยกจากระบบไฟล์ นอกเหนือจากแหล่งเนื้อหาอื่นๆ

ในโหมด dev ไฟล์จะถูกเฝ้าดูและเรียกใช้ HMR

inline

• ประเภท: string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []

ข้อความ inline ที่จะถูกแยก

pipeline

ตัวกรองเพื่อกำหนดว่าจะแยกโมดูลบางอย่างจาก pipeline การแปลงของเครื่องมือสร้างหรือไม่

ปัจจุบันทำงานสำหรับการผสานรวม Vite และ Webpack เท่านั้น

ตั้งค่า false เพื่อปิดใช้งาน

include

• ประเภท: FilterPattern
• ค่าเริ่มต้น: [\/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

รูปแบบที่กรองไฟล์ที่ถูกแยก รองรับ regular expressions และรูปแบบ glob picomatch

โดยค่าเริ่มต้น ไฟล์ .ts และ .js จะไม่ถูกแยก

exclude

• ประเภท: FilterPattern
• ค่าเริ่มต้น: [\/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

รูปแบบที่กรองไฟล์ที่ไม่ถูกแยก รองรับ regular expressions และรูปแบบ glob picomatch

โดยค่าเริ่มต้น node_modules และ dist ยังถูกแยกด้วย

configResolved

• ประเภท: (config: ResolvedConfig) => void

Hook เพื่อแก้ไข config ที่แก้ไขแล้ว

Presets ที่มาก่อนจะทำงานก่อนและ user config

configFile

• ประเภท: string | false

โหลดจากไฟล์ configs

ตั้งค่า false เพื่อปิดใช้งาน

configDeps

• ประเภท: string[]

รายการไฟล์ที่จะเรียกใช้การโหลด config ใหม่ด้วย

cli

ตัวเลือก UnoCSS CLI

entry

• ประเภท: Arrayable<CliEntryItem>

จุดเริ่มต้น UnoCSS cli

patterns

• ประเภท: string[]

รูปแบบ Glob เพื่อแยกจากระบบไฟล์

outFile

• ประเภท: string

เส้นทางไฟล์เอาต์พุต

shortcutsLayer

• ประเภท: string
• ค่าเริ่มต้น: 'shortcuts'

ชื่อเลเยอร์ของ shortcuts

envMode

• ประเภท: 'dev' | 'build'
• ค่าเริ่มต้น: 'build'

โหมดสภาพแวดล้อม

details

• ประเภท: boolean

เปิดเผยรายละเอียดภายในสำหรับการดีบัก / ตรวจสอบ

warn

• ประเภท: boolean
• ค่าเริ่มต้น: true

ส่งคำเตือนเมื่อ selectors ที่ตรงกันปรากฏใน blocklist