Integrations Overview

PikaCSS integrates into your build pipeline through @pikacss/unplugin-pikacss, a universal build plugin powered by unplugin. A dedicated Nuxt module is also available for Nuxt projects.

Supported Build Tools

All build-tool plugins are thin adapters around the same core unpluginFactory. They share identical options, transform logic, and code generation behavior.

Build Tool	Package Import	Guide
Vite	`@pikacss/unplugin-pikacss/vite`	Vite →
Rollup	`@pikacss/unplugin-pikacss/rollup`	Rollup →
Webpack	`@pikacss/unplugin-pikacss/webpack`	Webpack →
esbuild	`@pikacss/unplugin-pikacss/esbuild`	esbuild →
Rspack	`@pikacss/unplugin-pikacss/rspack`	Rspack →
Rolldown	`@pikacss/unplugin-pikacss/rolldown`	Rolldown →
Nuxt	`@pikacss/nuxt-pikacss`	Nuxt →

Development Tools

PikaCSS also provides developer tooling to enforce best practices and catch errors during development.

Tool	Package	Purpose
ESLint	`@pikacss/eslint-config`	Enforce build-time constraints on `pika()` calls

ESLint Plugin →

Quick Setup Examples

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

export default defineConfig({
	plugins: [
		PikaCSS({
			/* PluginOptions */
		}),
	],
})

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

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

// webpack.config.js
const PikaCSS = require('@pikacss/unplugin-pikacss/webpack').default

module.exports = {
	plugins: [
		PikaCSS({
			/* PluginOptions */
		}),
	],
}

// esbuild.config.js
import PikaCSS from '@pikacss/unplugin-pikacss/esbuild'
import { build } from 'esbuild'

build({
	plugins: [
		PikaCSS({
			/* PluginOptions */
		}),
	],
})

// rspack.config.js
const PikaCSS = require('@pikacss/unplugin-pikacss/rspack').default

module.exports = {
	plugins: [
		PikaCSS({
			/* PluginOptions */
		}),
	],
}

// rolldown.config.js
import PikaCSS from '@pikacss/unplugin-pikacss/rolldown'

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

// nuxt.config.ts
export default defineNuxtConfig({
	modules: [
		'@pikacss/nuxt-pikacss',
	],
	pikacss: {
		// PluginOptions (except currentPackageName)
		scan: {
			include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],
		},
	},
})

Plugin Options

All build-tool plugins accept the same PluginOptions interface:

import type { PluginOptions } from '@pikacss/unplugin-pikacss'

// All options are optional — sensible defaults are provided
const options: PluginOptions = {
	// File patterns to scan for pika() calls
	scan: {
		include: ['**/*.{js,ts,jsx,tsx,vue}'], // default
		exclude: ['node_modules/**', 'dist/**'], // default
	},

	// Engine config: inline object or path to config file
	config: './pika.config.ts',

	// Auto-create a config file if none exists
	autoCreateConfig: true, // default

	// The function name to detect in source code
	fnName: 'pika', // default

	// Output format of generated class names
	// - 'string': "a b c"
	// - 'array':  ['a', 'b', 'c']
	// - 'inline': object for inline style usage
	transformedFormat: 'string', // default

	// TypeScript codegen file for autocomplete support
	// - true:   generates 'pika.gen.ts'
	// - string: custom file path
	// - false:  disable
	tsCodegen: true, // default → 'pika.gen.ts'

	// CSS codegen file containing all atomic styles
	// - true:   generates 'pika.gen.css'
	// - string: custom file path
	cssCodegen: true, // default → 'pika.gen.css'
}

Options Reference

Option	Type	Default	Description
`scan.include`	`string \| string[]`	`['*/.{js,ts,jsx,tsx,vue}']`	File glob patterns to scan for `pika()` calls
`scan.exclude`	`string \| string[]`	`['node_modules/', 'dist/']`	File glob patterns to exclude from scanning
`config`	`EngineConfig \| string`	`undefined`	Inline engine config object, or path to a config file
`autoCreateConfig`	`boolean`	`true`	Auto-create a `pika.config.ts` file if none exists
`fnName`	`string`	`'pika'`	Function name to detect and transform in source code
`transformedFormat`	`'string' \| 'array' \| 'inline'`	`'string'`	Output format of generated class names
`tsCodegen`	`boolean \| string`	`true`	TypeScript codegen file path (`true` → `'pika.gen.ts'`, `false` to disable)
`cssCodegen`	`true \| string`	`true`	CSS codegen file path (`true` → `'pika.gen.css'`)

Generated Files

The plugin generates two files in your project root during build:

pika.gen.css — Contains all extracted atomic CSS rules. This is the actual CSS output consumed by the virtual module.
pika.gen.ts — Provides TypeScript type augmentation for autocomplete and type-checking of pika() calls (custom selectors, shortcuts, variables, etc.).

You should add both files to your .gitignore:

gitignore

pika.gen.css
pika.gen.ts

Virtual CSS Module (`pika.css`)

PikaCSS provides a virtual module named pika.css that resolves to the generated CSS file. Import it in your application entry point to include all atomic styles:

// Import the virtual CSS module in your app entry file
import 'pika.css'

How it works

When the build plugin encounters import 'pika.css', it resolves the import to the generated pika.gen.css file. This works across all supported build tools — no physical pika.css file is needed in your project.

Configuration File

When autoCreateConfig is true (the default), the plugin will auto-create a pika.config.ts file if one does not already exist. The config file is auto-detected with the following names:

pika.config.js
pika.config.ts
pika.config.mjs
pika.config.mts
pika.config.cjs
pika.config.cts

The plugin watches the config file for changes and automatically reloads when it is modified.

Nuxt

The @pikacss/nuxt-pikacss package wraps the Vite plugin as a Nuxt module. It:

Automatically registers the Vite plugin with enforce: 'pre'
Injects import 'pika.css' via a Nuxt plugin template — no manual import needed
Defaults scan.include to ['**/*.vue', '**/*.tsx', '**/*.jsx']
Exposes options under the pikacss config key in nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
	modules: [
		'@pikacss/nuxt-pikacss',
	],
	pikacss: {
		// PluginOptions (except currentPackageName)
		scan: {
			include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],
		},
	},
})

See the Nuxt integration guide for full details.

Recommended Learning Path

We recommend starting with the Vite integration as the primary learning path, then branching out to other build tools as needed:

Vite — Primary, most common setup
Rollup / Rolldown — Rollup-family bundlers
esbuild — Fast bundler with minimal config
Webpack / Rspack — Webpack-family bundlers
Nuxt — Framework-level integration

Integrations Overview ​

Supported Build Tools ​

Development Tools ​

Quick Setup Examples ​

Plugin Options ​

Options Reference ​

Generated Files ​

Virtual CSS Module (pika.css) ​

Configuration File ​

Nuxt ​

Recommended Learning Path ​