ESLint 設定

PikaCSS 提供一個 ESLint 外掛，用來確保所有 pika() 引數在建置時期都是可靜態分析的。

安裝與設定

安裝套件：

pnpm

pnpm add -D @pikacss/eslint-config

npm

npm install -D @pikacss/eslint-config

yarn

yarn add -D @pikacss/eslint-config

把建議的設定加入你的 eslint.config.js：

// eslint.config.js
import pikacss from '@pikacss/eslint-config'

export default [
  pikacss(),
]

若要使用自訂的函式名稱：

import pikacss from '@pikacss/eslint-config'

export default [
  pikacss({ fnName: 'css' }),
]

規則

no-dynamic-args

說明

強制 pika()、pika.str()、pika.arr() 以及它們的預覽變體（pikap() 等）的所有引數，在建置時期都必須是可靜態分析的。不支援動態值、計算後的運算式，以及執行階段的變數。

什麼算是靜態的

這個規則會用與建置時期編譯器相同、能感知值的求值器來評估每一個引數。以下這些形式是靜態的：

• 常值：字串、數字、布林值，以及 null
• 值本身也是靜態的物件與陣列常值（允許巢狀）：{ color: 'red' }、[{ color: 'red' }, 'flex-center']
• 內插值會求值成靜態原始值的範本常值（template literal）
• 作用在靜態運算元上的一元、二元、邏輯與條件運算式：條件運算式的測試部分必須是靜態的，但只有它所選到的分支需要是靜態的（&&／||／?? 也只看實際採用的那一側）
• 全域常數 undefined、NaN 與 Infinity，除非有本地宣告將它們遮蔽

以下這些不是靜態的：

• 任何其他變數或識別字的引用：包含對 const 的引用，因為編譯器從不解析繫結
• 函式呼叫
• 成員運算式
• 對不是靜態陣列或物件的值使用 spread
• 內插了動態值或非原始值的範本常值

範例

// ✅ 有效
pika({ color: 'red' })
pika({ 'color': 'red', '$:hover': { color: 'blue' } })
pika('flex-center')

// ❌ 無效：動態變數
const color = getColor()
pika({ color })

// ❌ 無效：條件式
pika(isDark ? { color: 'white' } : { color: 'black' })

// ❌ 無效：spread
pika({ ...baseStyles })

下一步

• 整合：搭配你的建置工具設定 PikaCSS。
• 使用方式：看看常見的樣式模式。