PikaCSS

Appearance

Shortcuts ​

Create reusable aliases that expand to full style definitions.

Shortcuts let you define named style combinations that can be referenced as string arguments in pika() calls. They work like utility class presets — define once, reuse everywhere.

Config ​

Why the nested key?

The outer shortcuts is the plugin configuration field added to EngineConfig via type augmentation. The inner shortcuts is the actual shortcut list. This two-level structure keeps each feature's options under a single top-level key.

Shortcuts can be defined as static pairs or dynamic patterns:

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

export default defineEngineConfig({
  shortcuts: {
    shortcuts: [
      // Static pair: [name, styleDefinition]
      ['flex-center', {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }],

      // Static pair with nested selectors
      ['btn', {
        'padding': '0.5rem 1rem',
        'borderRadius': '0.25rem',
        'cursor': 'pointer',
        '$:hover': { opacity: '0.8' },
      }],

      // Dynamic pattern: [RegExp, resolver, autocomplete?]
      [/^size-(.+)$/, ([, size]) => ({
        width: size,
        height: size,
      })],
    ],
  },
})

Use shortcuts:

ts
// Reference by name
pika('flex-center')

// Combine with inline styles
pika('flex-center', { gap: '1rem' })

Examples ​

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

export const shortcutsConfig = defineEngineConfig({
	shortcuts: {
		shortcuts: [
			['flex-center', {
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
			}],
		],
	},
})

Next ​