Rollup Integration

PikaCSS integrates with Rollup via the @pikacss/unplugin-pikacss/rollup entry point.

Install

pnpm

pnpm add -D @pikacss/unplugin-pikacss

npm

npm install -D @pikacss/unplugin-pikacss

yarn

yarn add -D @pikacss/unplugin-pikacss

bun

bun add -D @pikacss/unplugin-pikacss

Configure Rollup

Add the PikaCSS plugin to your Rollup configuration:

// rollup.config.ts
import PikaCSS from '@pikacss/unplugin-pikacss/rollup'

export default {
	plugins: [
		PikaCSS(),
	],
}

Import Generated CSS

Add the following import to your application entry file:

// src/main.ts (or your app entry file)
import 'pika.css'

pika.css is a virtual module resolved by the plugin at build time. It points to the generated CSS output file (pika.gen.css by default).

Plugin Options

All unplugin adapters share the same options. You can customize the plugin behavior by passing an options object:

// rollup.config.ts
import PikaCSS from '@pikacss/unplugin-pikacss/rollup'

export default {
	plugins: [
		PikaCSS({
			// Customize file scanning patterns
			scan: {
				include: ['src/**/*.{ts,tsx}'],
				exclude: ['node_modules/**', 'dist/**'],
			},

			// The function name used in source code (default: 'pika')
			fnName: 'pika',

			// Output format: 'string' | 'array' | 'inline' (default: 'string')
			transformedFormat: 'string',

			// Automatically create config file if not found (default: true)
			autoCreateConfig: true,

			// TypeScript codegen file (default: true → 'pika.gen.ts')
			tsCodegen: true,

			// CSS codegen file (default: true → 'pika.gen.css')
			cssCodegen: true,
		}),
	],
}

Default Values

Option	Default	Description
scan.include	['**/*.{js,ts,jsx,tsx,vue}']	File glob patterns to scan
scan.exclude	['node_modules/**', 'dist/**']	File glob patterns to exclude
fnName	'pika'	Function name to detect in source code
transformedFormat	'string'	Output format: 'string', 'array', or 'inline'
autoCreateConfig	true	Auto-create pika.config.ts if not found
tsCodegen	true → 'pika.gen.ts'	TypeScript codegen file path, or false to disable
cssCodegen	true → 'pika.gen.css'	CSS codegen file path
config	undefined	Engine config object or path to config file

How It Works

The Rollup adapter is a thin createRollupPlugin(unpluginFactory) wrapper. It uses the same transform pipeline and codegen logic as all other unplugin adapters. The plugin:

1. Scans source files for pika() calls during the build.
2. Replaces each call with the generated atomic class name string.
3. Writes atomic CSS rules to the codegen output file.
4. Resolves pika.css imports to the generated CSS file.

Next

• Rolldown
• Plugin Options Reference