PikaCSS

English

繁體中文

English

繁體中文

Appearance

Vite ​

Vite is the easiest way to understand the PikaCSS integration model, even if your final target is another unplugin-compatible bundler.

Install ​

sh
pnpm add -D @pikacss/unplugin-pikacss
sh
npm install -D @pikacss/unplugin-pikacss
sh
yarn add -D @pikacss/unplugin-pikacss

Minimal setup ​

ts
// vite.config.ts
import PikaCSS from '@pikacss/unplugin-pikacss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		PikaCSS(),
	],
})
ts
// Import the virtual CSS module in your app entry file
import 'pika.css'

Inline config vs config file ​

Use an inline config only for very small setups or experiments.

ts
// vite.config.ts — inline engine configuration (no separate config file)
import PikaCSS from '@pikacss/unplugin-pikacss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		PikaCSS({
			// Pass engine config directly — autoCreateConfig is ignored when using inline config
			config: {
				prefix: 'pk-',
				shortcuts: {
					btn: { padding: '8px 16px', borderRadius: '4px', cursor: 'pointer' },
				},
			},
			autoCreateConfig: false,
		}),
	],
})

For most applications, prefer a dedicated pika.config.ts file so selectors, shortcuts, variables, and plugins have one stable home.

Useful options ​

ts
// vite.config.ts — all available plugin options with their defaults
import PikaCSS from '@pikacss/unplugin-pikacss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		PikaCSS({
			// Automatically creates a pika.config.{js,ts} file if none is found.
			// Set to false to disable auto-creation.
			autoCreateConfig: true, 

			// The function name used in source code to define styles.
			// PikaCSS scans for calls to this function.
			fnName: 'pika', 

			// Format of the transformed output:
			//   'string' — returns "pk-a pk-b pk-c" (space-separated string)
			//   'array'  — returns ['pk-a', 'pk-b', 'pk-c']
			transformedFormat: 'string', 

			// TypeScript codegen file path.
			//   true   — generates 'pika.gen.ts' (default)
			//   false  — disables TS codegen
			//   string — custom file path
			tsCodegen: true, 

			// CSS codegen file path.
			//   true   — generates 'pika.gen.css' (default)
			//   string — custom file path
			cssCodegen: true, 

			// File scanning patterns (glob format).
			scan: {
				include: ['**/*.{js,ts,jsx,tsx,vue}'], 
				exclude: ['node_modules/**', 'dist/**'], 
			},

			// Engine configuration: inline object or path to config file.
			// config: { /* EngineConfig */ },
			// config: './pika.config.ts',
		}),
	],
})

What to verify first ​

  1. pika.css is imported in your app entry.
  2. The plugin is registered in vite.config.ts.
  3. Your pika() input is static.
  4. Generated files appear where you expect them.

Next ​