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: ​