Engine Config

pika.config.* 是 PikaCSS project semantics唯一的公開來源。請從直接安裝的 outer package使用 defineConfig()；Engine-specific options放在 engine。

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

export default defineConfig({
  fnName: 'pika',
  cssModule: 'pika.css',
  transformedFormat: 'string',
  engine: {},
})

Project fields

Property	說明
engine	此 entry的 EngineConfig。
fnName	Compile-time callable root；single form預設 'pika'。
cssModule	Logical runtime CSS module；single form預設 'pika.css'。
transformedFormat	'string' 或 'array'；預設 'string'。
scan	此 entry的 source include/exclude patterns。
report	Optional production report。
stateDir	Single form的 whole-project generated-state root；預設 .pikacss。

設定檔內相對 filesystem values以該設定檔目錄為基準。

Multi-entry projects

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

export default defineConfig([
  { fnName: 'pika', cssModule: 'pika.css', engine: {} },
  {
    fnName: 'adminPika',
    cssModule: 'admin-pika.css',
    scan: { include: 'admin/**/*.{ts,tsx,vue}' },
    engine: {},
  },
], {
  stateDir: '.pikacss',
})

Multi form中 fnName 與 cssModule 必須在整份 config內唯一。每個 entry的 runtime/Engine partition彼此隔離，但共用 project generated-state root。

Engine fields

Property	說明
prefix	Atomic class user prefix，預設 'pk-'。
defaultSelector	Atomic selector template；% 是 atomic ID slot。
plugins	Engine plugins。
layers	CSS layer priority map。
defaultPreflightsLayer	未指定 layer 的 preflight output 所使用的預設 layer。
defaultUtilitiesLayer	Atomic utilities 所使用的預設 layer。
preflights	Base/preflight definitions。
cssImports	CSS @import rules。
important	!important policy。
selectors	Selector semantics與其 Typegen metadata。
shortcuts	Shortcut semantics與其 Typegen metadata。
variables	Object-only local/external variables。
keyframes	Object-only keyframe definitions。

現在沒有 project-wide autocomplete bucket。Editor suggestions由能正確解釋語義的 domain各自擁有：selector/shortcut definitions提供 concrete autocomplete members，variables使用 suggest，plugins則透過所屬 subsystem或 Typegen capability貢獻 authoring metadata。

範例

import { defineEngineConfig } from '@pikacss/core'

export const selectorsConfig = defineEngineConfig({
	selectors: {
		definitions: [
			{ name: '@dark', value: 'html.dark $' },
			{ name: '@light', value: 'html:not(.dark) $' },
			{ name: '@sm', value: '@media (min-width: 640px)' },
			{ name: '@md', value: '@media (min-width: 768px)' },
			{ name: '@lg', value: '@media (min-width: 1024px)' },
		],
	},
})

下一步

• ESLint 設定
• Customizations
• 官方外掛