Selectors

Custom selector 會把 authoring name 對應到巢狀 CSS selector 輸出；definition 統一使用 object-only grammar。

Static selectors

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

export default defineConfig({
  engine: {
    selectors: {
      definitions: [
        { name: '@dark', value: 'html.dark $' },
        { name: '@light', value: 'html:not(.dark) $' },
        { name: '@sm', value: '@media (min-width: 640px)' },
      ],
    },
  },
})

$ 代表目前產生的 atomic selector。Core 會嘗試為每個已設定的 static selector 產生 resolved PikaCSS Preview，顯示於 Typegen / IDE hover 文件。preview 產生成功時，手動撰寫的 description 會顯示在 preview 前；若僅 preview 的 resolution 失敗，PikaCSS 會回報診斷，但仍保留該 selector member 與其 description。

Dynamic selectors

Dynamic selector必須同時提供 pattern與明確 raw TypeScript inputType：

export default defineConfig({
  engine: {
    selectors: {
      definitions: [
        {
          pattern: /^@container-(.+)$/,
          inputType: '`@container-${string}`',
          resolve: ([, name]) => `@container ${name}`,
          autocomplete: ['@container-card', '@container-sidebar'],
          description: 'Named container query',
        },
      ],
    },
  },
})

autocomplete 是 deterministic concrete Typegen members。每個接受的 concrete member 都會使用與 runtime 相同的 selector transform pipeline 產生 resolved PikaCSS Preview。它不會從 runtime source hits 學習新成員。Pattern 不接受的 autocomplete value 會被診斷並排除。若僅 preview 的 resolution 失敗，PikaCSS 會回報診斷，但仍保留 concrete Typegen member；手動撰寫的 description 也會繼續保留。

Selector 可直接作為巢狀 style key 使用：

pika({
  'color': 'black',
  '@dark': { color: 'white' },
  '@sm': { fontSize: '14px' },
})

Selector value也可以是 StyleItem[]，因此可在 nested selector內組合 shortcut。

範例

selectors.example.ts

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)' },
		],
	},
})

下一步

• Shortcuts
• Variables