How PikaCSS Works

At a high level, PikaCSS turns statically analyzable style input into generated atomic CSS.

Source input

You write pika() calls in supported files:

// pika() is available as a global function — no import needed

// A button component using pika() for styling
const buttonClass = pika({
	padding: '0.5rem 1rem',
	borderRadius: '0.5rem',
	backgroundColor: '#0ea5e9',
	color: 'white',
	cursor: 'pointer',
})

document.querySelector('#btn')!.className = buttonClass

Build-time transform

The integration scans source files, extracts the style input, and turns it into atomic class names.

// After build-time compilation, pika() calls are replaced
// with plain string literals — no function call remains.

const buttonClass = 'a b c d e'

document.querySelector('#btn')!.className = buttonClass

Generated CSS

Those class names point to generated CSS declarations:

css

/* Auto-generated by @pikacss/unplugin-pikacss */
@layer preflights, utilities;

@layer utilities {
  .pk-a { padding: 0.5rem 1rem; }
  .pk-b { border-radius: 0.5rem; }
  .pk-c { background-color: #0ea5e9; }
  .pk-d { color: white; }
  .e { cursor: pointer; }
}

Why atomic output matters here

PikaCSS does not emit one class per component block. It breaks style content into reusable atomic declarations. When the same declaration appears again, the engine can reuse the same atomic class.

// Two different components using the same CSS property-value pairs

// Button component
const btnClass = pika({
	color: 'white', // → class 'a'
	padding: '1rem', // → class 'b'
	cursor: 'pointer', // → class 'c'
})

// Link component — shares `color: white` and `cursor: pointer`
const linkClass = pika({
	color: 'white', // → reuses class 'a' (same property-value!)
	fontSize: '14px', // → class 'd' (new)
	cursor: 'pointer', // → reuses class 'c' (same property-value!)
})

css

/* Only 4 atomic classes — not 6!
   Shared property-value pairs are deduplicated across the entire app */
@layer preflights, utilities;

@layer utilities {
  .pk-a { color: white; }
  .pk-b { padding: 1rem; }
  .pk-c { cursor: pointer; }
  .pk-d { font-size: 14px; }
}

Where PikaCSS is more careful than many atomic systems

Reuse is not always safe.

When two declarations overlap in effect, the real winner is determined by stylesheet order, not by the order of tokens in markup. PikaCSS detects these collisions and keeps later overlapping declarations order-sensitive instead of blindly reusing one global atomic class.

Read Atomic Order And Cascade for the full explanation.

What plugins change

Plugins can modify config, extend selectors, shortcuts, variables, keyframes, autocomplete, and preflights. They change what the engine understands before and during extraction.

That is why PikaCSS can stay small for end users while still supporting richer ecosystems.

What stays out of runtime

The application runtime receives class names and CSS files, not a styling engine that keeps interpreting objects in the browser.

How PikaCSS Works ​

Source input ​

Build-time transform ​

Generated CSS ​

Why atomic output matters here ​

Where PikaCSS is more careful than many atomic systems ​

What plugins change ​

What stays out of runtime ​

Next ​