PikaCSS

繁體中文

English

繁體中文

English

Appearance

How PikaCSS Works ​

從整體流程來看，PikaCSS 會把可靜態分析的 style 輸入轉成產生的 atomic CSS。

Source input ​

你會在支援的檔案中寫 pika() 呼叫：

ts
// pika() 是全域函式，不需要另外匯入

// 用 pika() 來處理樣式的按鈕元件
const buttonClass = pika({
	padding: '0.5rem 1rem',
	borderRadius: '0.5rem',
	backgroundColor: '#0ea5e9',
	color: 'white',
	cursor: 'pointer',
})

document.querySelector('#btn')!.className = buttonClass

Build-time transform ​

Integration 會掃描原始碼檔案，抽出 style 輸入，再把它轉成 atomic class names。

ts
// 經過 build-time 編譯後，pika() 呼叫會被替換
// 成一般字串字面值，不會留下函式呼叫。

const buttonClass = 'a b c d e'

document.querySelector('#btn')!.className = buttonClass

Generated CSS ​

這些 class names 會對應到產生的 CSS declarations：

css
/* 由 @pikacss/unplugin-pikacss 自動產生 */
@layer preflights, utilities;

@layer utilities {
  .pk-a { padding: 0.5rem 1rem; }
  .pk-b { border-radius: 0.5rem; }
  .pk-c { background-color: #0ea5e9; }
  .pk-d { color: white; }
  .e { cursor: pointer; }
}

為什麼這裡的 atomic output 很重要 ​

PikaCSS 不會把每個 component block 都壓成單一 class。它會把 style 內容拆成可重用的 atomic declarations。當同一個 declaration 再次出現時，engine 就能直接重用原本的 atomic class。

ts
// 兩個不同 component 使用相同的 CSS property-value 組合

// Button 元件
const btnClass = pika({
	color: 'white', // → class 'a'
	padding: '1rem', // → class 'b'
	cursor: 'pointer', // → class 'c'
})

// Link 元件：會共用 `color: white` 和 `cursor: pointer`
const linkClass = pika({
	color: 'white', // → 重用 class 'a'（相同的 property-value！）
	fontSize: '14px', // → class 'd'（新的）
	cursor: 'pointer', // → 重用 class 'c'（相同的 property-value！）
})
css
/* 只有 4 個 atomic classes，不是 6 個！
  重複的 property-value 組合會在整個應用程式中被去重 */
@layer preflights, utilities;

@layer utilities {
  .pk-a { color: white; }
  .pk-b { padding: 1rem; }
  .pk-c { cursor: pointer; }
  .pk-d { font-size: 14px; }
}

PikaCSS 比許多 atomic systems 更謹慎的地方 ​

重用並不總是安全的。

當兩個 declarations 在效果上彼此重疊時，真正決定結果的是 stylesheet 的順序，不是 markup 裡 token 的順序。PikaCSS 會偵測這些衝突，讓後續重疊的 declarations 對順序保持敏感，而不是盲目重用全域 cached class。

完整說明請讀 Atomic Order And Cascade。

plugins 改變的是什麼 ​

Plugins 可以修改 config，也能擴充 selectors、shortcuts、variables、keyframes、autocomplete 與 preflights。它們會在抽取前與抽取過程中，改變 engine 能理解的內容。

也因為這樣，PikaCSS 才能對終端使用者保持精簡，同時又支援更豐富的 ecosystem。

哪些東西不會留在 runtime ​

應用程式 runtime 拿到的是 class names 與 CSS files，而不是一個會在瀏覽器裡持續解讀 objects 的 styling engine。

Next ​