FAQ
Is pika() a runtime function?
No. It is build-time input. The call is scanned and transformed during the build.
Why do static arguments matter so much?
Because static input is what allows PikaCSS to generate deterministic atomic CSS, deduplicate declarations, and provide generated autocomplete.
See Static Arguments.
Is PikaCSS just another utility CSS framework?
No. The output is atomic CSS, but the authoring model is style-definition based. You write style objects and plugin-driven config, not only predefined utility class tokens.
// pika() is available as a global function — no import needed
const btn = pika({
color: 'white',
backgroundColor: 'blue',
})
const link = pika({
color: 'white',
textDecoration: 'underline',
})
// Both `btn` and `link` share the same atomic class for `color: white`/* Each property-value pair becomes one atomic class */
.pk-a { color: white; }
.pk-b { background-color: blue; }
.pk-c { text-decoration: underline; }
/* btn → "pk-a pk-b", link → "pk-a pk-c" — the class for `color: white` is shared */Does class token order decide the final result?
Not by itself.
When atomic declarations have the same specificity, the browser still resolves conflicts by stylesheet declaration order. That is why overlapping utilities can produce surprising results in many atomic systems.
PikaCSS detects overlapping property effects and keeps later overlapping declarations order-sensitive, so local author order stays meaningful where it actually affects the cascade.
Can I use nested selectors?
Yes. Nested selectors are part of the normal style-definition model.
// pika() is available as a global function — no import needed
const btn = pika({
'color': 'black',
// Pseudo-class selector
'&:hover': {
color: 'blue',
},
// Media query
'@media (max-width: 768px)': {
fontSize: '14px',
},
})Should I keep zero-config forever?
Usually no. Zero-config is a fast starting point. Real projects should centralize selectors, variables, shortcuts, and plugin usage in config.
Should I edit pika.gen.ts or pika.gen.css?
No. Generated files are output artifacts. Fix config or source instead.
When should I use the ESLint integration?
As early as possible. It prevents invalid runtime-style habits from spreading through the codebase.