PikaCSS

English

繁體中文

English

繁體中文

Appearance

Build-time Engine ​

PikaCSS is easiest to use when you remember one rule: the styling engine runs during the build, not in the browser.

Zero runtime overhead means exactly that ​

Once transformed, your production bundle carries static class names and generated CSS. There is no client-side styling engine resolving objects on page load.

ts
// Source code — uses pika() to define styles
// pika() is available as a global function — no import needed

const cardClass = pika({
	padding: '1.5rem',
	borderRadius: '0.75rem',
	boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
})

const titleClass = pika({
	fontSize: '1.25rem',
	fontWeight: '700',
	color: '#1a1a1a',
})

export function createCard(title: string, content: string) {
	return `
    <div class="${cardClass}">
      <h2 class="${titleClass}">${title}</h2>
      <p>${content}</p>
    </div>
  `
}
ts
// After compilation — no pika import, no function calls
// Only plain string literals remain

const cardClass = 'a b c'

const titleClass = 'd e f'

export function createCard(title: string, content: string) {
	return `
    <div class="${cardClass}">
      <h2 class="${titleClass}">${title}</h2>
      <p>${content}</p>
    </div>
  `
}
css
/* Auto-generated by @pikacss/unplugin-pikacss */

/* The ONLY runtime artifact — a static CSS file */
.pk-a { padding: 1.5rem; }
.pk-b { border-radius: 0.75rem; }
.pk-c { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.pk-d { font-size: 1.25rem; }
.e { font-weight: 700; }
.pk-f { color: #1a1a1a; }

Why the engine wants static inputs ​

The build-time architecture enables:

  • deterministic output
  • atomic deduplication
  • generated autocomplete
  • plugin-controlled config resolution

It also means you must express variation through static shapes: variants, selectors, shortcuts, and variables.

Virtual modules and generated files ​

The import pika.css is a virtual module. It resolves to generated CSS at build time. On disk, the integration may also write files such as pika.gen.ts and pika.gen.css.

Read Generated Files before treating any generated artifact as source code.

The correct design question ​

Do not ask, "How do I make pika() accept this runtime value?"

Ask, "Which static representation of this styling problem should my project encode?"

That shift usually leads to a better result anyway.

Next ​