跳至內容

Define 輔助函式

PikaCSS 在 Core 只保留兩個真正能改善 low-level authoring 體驗的 define 輔助函式:EngineConfig 值與外掛定義。Application 的 pika.config.* 仍使用直接安裝 outer package 所提供的 canonical defineConfig() surface。

defineEnginePlugin

回傳你提供的外掛定義,並為 hook 簽章提供完整的型別推導。

ts
import { defineEnginePlugin } from '@pikacss/core'

const plugin = defineEnginePlugin({
  name: 'my-plugin',
  configureEngine: async (engine) => {
    // 完整型別化的 engine 參數
  },
})

defineEngineConfig

回傳你提供的引擎設定,並為所有設定欄位提供完整的型別推導。請把它用在 low-level Engine/plugin code,或先建立 typed value 再放進 project 的 engine 欄位;它不是 pika.config.* 的 default-export root。

ts
import { defineEngineConfig } from '@pikacss/core'

const engineConfig = defineEngineConfig({
  prefix: 'pk-',
  plugins: [],
  layers: { base: 0, utilities: 1 },
})

Application project 要把這個值放進 canonical project config:

ts
import { defineConfig } from '@pikacss/unplugin-pikacss'

export default defineConfig({ engine: engineConfig })

至於其他有型別的結構,例如可重複使用的樣式物件、preflight、關鍵影格、選擇器、shortcut,或變數定義,請使用搭配 satisfies 的純物件常值,或明確的型別註記。

ts
import type { StyleDefinition, VariablesDefinition } from '@pikacss/core'

const card: StyleDefinition = {
  display: 'flex',
  '$:hover': { opacity: '0.8' },
}

const theme = {
  ':root': {
    '--color-primary': { value: '#3b82f6' },
    '--spacing-md': { value: '1rem' },
  },
} satisfies VariablesDefinition

下一步