Usage

Write styles using CSS property names in JavaScript objects, and PikaCSS transforms them into atomic CSS at build time.

Your First Styled Component

No configuration is needed beyond the Setup steps — call the pika global directly in your component. Do not import it: the build plugin replaces every call at build time.

Vue

<!-- App.vue -->
<script setup lang="ts">
const buttonClass = pika({
  padding: '0.5rem 1rem',
  border: 'none',
  borderRadius: '8px',
  backgroundColor: '#3b82f6',
  color: 'white',
  cursor: 'pointer',
  '$:hover': {
    backgroundColor: '#2563eb',
  },
})
</script>

<template>
  <button :class="buttonClass">Click me</button>
</template>

React

// Button.tsx
const buttonClass = pika({
  padding: '0.5rem 1rem',
  border: 'none',
  borderRadius: '8px',
  backgroundColor: '#3b82f6',
  color: 'white',
  cursor: 'pointer',
  '$:hover': {
    backgroundColor: '#2563eb',
  },
})

export function Button() {
  return <button className={buttonClass}>Click me</button>
}

At build time the plugin replaces the pika() call with a plain string literal of the generated class names:

const buttonClass = 'pk-a pk-b pk-c pk-d pk-e pk-f pk-g'

Transformed calls always use single-quoted string literals, so the replacement stays valid even inside a double-quoted Vue template attribute such as :class="pika({ ... })".

Each declaration becomes its own atomic class in the generated CSS (imported through import 'pika.css'):

@layer utilities {
  .pk-a {
    padding: 0.5rem 1rem;
  }
  .pk-b {
    border: none;
  }
  .pk-c {
    border-radius: 8px;
  }
  .pk-d {
    background-color: #3b82f6;
  }
  .pk-e {
    color: white;
  }
  .pk-f {
    cursor: pointer;
  }
  .pk-g:hover {
    background-color: #2563eb;
  }
}

pika() Variants

PikaCSS provides several function variants for different output formats and use cases:

pika()

The default function. Returns a space-separated string of atomic class names.

const className = pika({ color: 'red', fontSize: '16px' })
// → 'pk-a pk-b'

pika.str()

Explicit string variant. Always returns a space-separated string of class names, even when the integration is configured with transformedFormat: 'array' — under the default transformedFormat: 'string' it behaves identically to pika().

const className = pika.str({ color: 'red' })
// → 'pk-a'

pika.arr()

Array variant. Returns an array of individual class name strings instead of a single joined string. Useful for frameworks or utilities that accept class name arrays.

const classNames = pika.arr({ color: 'red', fontSize: '16px' })
// → ['pk-a', 'pk-b']

pikap() — Preview Mode

Preview variant for development. Works the same as pika(), but triggers a live preview of the generated CSS when you save the file. Available as pikap(), pikap.str(), and pikap.arr().

// Save the file to see the generated CSS preview
const className = pikap({ color: 'red' })

The preview appears in your editor: for every saved pikap() call, the integration writes a JSDoc overload containing the rendered CSS into the generated pika.gen.ts, so hovering the call shows the CSS in the type tooltip. This requires tsCodegen to be enabled (the default) and the generated file to be part of your TypeScript program — see Generated Files.

TIP

All variants accept the same arguments — they only differ in return type. The ESLint plugin validates all variants equally.

Examples

Basic CSS Properties

Pass a style definition object with standard CSS properties:

Input

const className = pika({
	color: 'red',
	fontSize: '16px',
})

Output

@layer utilities {
  .pk-a {
    color: red;
  }
  .pk-b {
    font-size: 16px;
  }
}

Pseudo-Classes and Pseudo-Elements

Use $:hover, $:focus, $::before, etc. to add pseudo selectors:

Input

const className = pika({
	color: 'blue',
	'$:hover': {
		color: 'red',
	},
})

Output

@layer utilities {
  .pk-a {
    color: blue;
  }
  .pk-b:hover {
    color: red;
  }
}

Responsive Styles

Use @media queries as keys for responsive breakpoints:

Input

const className = pika({
	fontSize: '14px',
	'@media (min-width: 768px)': {
		fontSize: '16px',
	},
	'@media (min-width: 1024px)': {
		fontSize: '18px',
	},
})

Output

@layer utilities {
  .pk-a {
    font-size: 14px;
  }
  @media (min-width: 768px) {
    .pk-b {
      font-size: 16px;
    }
  }
  @media (min-width: 1024px) {
    .pk-c {
      font-size: 18px;
    }
  }
}

Custom Selectors

Use custom selector names defined in your engine config. This example requires the @dark selector to be registered first:

// pika.config.ts
import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  selectors: {
    definitions: [
      ['@dark', 'html.dark $'],
    ],
  },
})

Input

const className = pika({
	color: 'black',
	'@dark': {
		color: 'white',
	},
})

Output

@layer utilities {
  .pk-a {
    color: black;
  }
  html.dark .pk-b {
    color: white;
  }
}

Shortcut References

Reference named shortcuts as string arguments:

// Assuming a shortcut "flex-center" is defined in config
const className = pika('flex-center')

Next

• Engine Config — customize the engine behavior.
• Customizations — define custom selectors.