PikaCSS

Appearance

Configuration ​

TypeScript Support ​

Important!

Please remember to add /// <reference path="./src/pika.gen.ts" /> to the top of your pika config file.

Engine Options ​

  • plugins ​

    Register plugins to extend PikaCSS functionality.

  • prefix ​

    Set the prefix for generated atomic style id.

    • For example, pika- will generate pika-a, pika-b, etc.

  • defaultSelector ​

    Set the default selector format (% will be replaced with the atomic style id).

    • .% -> Use with class attribute <div class="a b c">
    • [data-pika~="%"] -> Use with attribute selector <div data-pika="a b c">

  • preflights ​

    Define global CSS styles that will be injected before atomic styles. Can be used for CSS variables, global animations, base styles, etc. Two ways to define:

    1. static CSS string
    2. function that returns a CSS string, which will get params
      • engine: Engine
      • isFormatted: boolean

Type

View EngineConfig's interface
ts
export interface EngineConfig {
	/**
	 * Register plugins to extend PikaCSS functionality.
	 *
	 * @example
	 * ```ts
	 * {
	 *   plugins: [
	 *     icons(), // Add icon support
	 *     customPlugin() // Custom plugin
	 *   ]
	 * }
	 * ```
	 */
	plugins?: EnginePlugin[]

	/**
	 * Set the prefix for generated atomic style id.
	 *
	 * @default ''
	 * @example
	 * ```ts
	 * {
	 *   prefix: 'pika-' // Generated atomic id will be 'pika-xxx'
	 * }
	 * ```
	 */
	prefix?: string

	/**
	 * Set the default selector format. '%' will be replaced with the atomic style id.
	 *
	 * @default '.%'
	 * @example
	 * ```ts
	 * {
	 *   defaultSelector: '.%' // Use with class attribute: <div class="a b c">
	 *   // or
	 *   defaultSelector: '[data-pika~="%"]' // Use with attribute selector: <div data-pika="a b c">
	 * }
	 * ```
	 */
	defaultSelector?: string

	/**
	 * Define global CSS styles that will be injected before atomic styles.
	 * Can be used for CSS variables, global animations, base styles, etc.
	 *
	 * @default []
	 * @example
	 * ```ts
	 * {
	 *   preflights: [
	 *     // Use CSS string directly
	 *     ':root { --color: blue }',
	 *     // Or use function to generate dynamically
	 *     (engine) => ':root { --theme: dark }'
	 *   ]
	 * }
	 * ```
	 */
	preflights?: Preflight[]
}

Core plugins' options: ​

variables ​

Define CSS custom properties that will be included in your generated CSS. See the Variables guide for complete configuration options.

ts
export default defineEngineConfig({
  variables: {
    variables: {
      '--color-primary': '#007bff',
      '--spacing-base': '1rem',
    }
  }
})

keyframes ​

Define @keyframes animations that can be referenced in your styles. See the Keyframes guide for complete configuration options.

ts
export default defineEngineConfig({
  keyframes: {
    keyframes: [
      ['fade', { from: { opacity: 0 }, to: { opacity: 1 } }],
      ['slide', { from: { transform: 'translateX(-100%)' }, to: { transform: 'translateX(0)' } }],
    ]
  }
})

selectors ​

Define custom selector aliases that can be used in your styles. See the Selectors guide for complete configuration options.

ts
export default defineEngineConfig({
  selectors: {
    selectors: [
      [':hover', '$:hover'],
      ['@dark', 'html.dark $'],
    ]
  }
})

shortcuts ​

Define reusable style shortcuts that can be applied to reduce boilerplate. See the Shortcuts guide for complete configuration options.

ts
export default defineEngineConfig({
  shortcuts: {
    shortcuts: [
      ['btn', { padding: '10px 20px', borderRadius: '4px', border: 'none' }],
      [/^flex-(.+)$/, ([, align]) => ({ display: 'flex', alignItems: align })],
    ]
  }
})

important ​

Configure how !important flags are handled in your styles.

ts
export default defineEngineConfig({
  important: {
    default: false,  // Default !important flag (optional)
  }
})

Next Steps ​