Variables

Variables subsystem擁有 CSS custom-property semantics、pruning與 Typegen suggestions。Variable leaf只接受 object form。

Local variables

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

export default defineConfig({
  engine: {
  variables: {
    definitions: {
      '--color-primary': { value: '#3b82f6' },
      '--brand-color': {
        value: '#2563eb',
        suggest: {
          asProperty: true,
          asValueOf: ['color', 'backgroundColor'],
        },
      },
    },
  },
  },
})

suggest.asProperty 控制 custom property本身是否成為 explicit Typegen member；suggest.asValueOf 控制哪些 CSS property value會建議 var(--name)，'*' 是明確 wildcard。

External variables

外部 stylesheet/runtime提供的變數可用：

'--host-theme-color': {
  external: true,
  suggest: { asValueOf: 'color' },
}

它會參與 authoring suggestions，但 PikaCSS不輸出 value。

Selector scopes

Non-variable keys可形成 selector scopes。

Pruning

Local variable預設依目前 live CSS usage做 pruning；必要時可用 leaf pruneUnused: false、safeList 或 config-level pruneUnused: false 保留。

範例

import { defineEngineConfig } from '@pikacss/core'

export const variablesConfig = defineEngineConfig({
	variables: {
		definitions: {
			'--color-primary': { value: '#3b82f6' },
			'--color-secondary': { value: '#64748b' },
			'--spacing-md': { value: '1rem' },
		},
	},
})

下一步

• Keyframes
• Autocomplete