Selectors

Selector definitions只使用 object 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 也會繼續保留。

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

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

範例

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