Core concept

Conflicts

Property conflicts occur when multiple classes target the same CSS property. All atomic CSS classes and selector classes have the same specificity, so later-declared properties take precedence. When multiple classes target the same CSS property, resolve conflicts by removing conflicting properties. The final CSS respects the declaration order inside your function, preserving source code structure.

Compiler

Plumeria uses an AOT (Ahead-Of-Time) compiler that compiles styles independently from your framework’s build system. This allows it to safely and deterministically emit CSS ahead of time,
with no runtime style generation and no interference with your app’s bundling pipeline.

Compilation Speed

Built on SWC, Plumeria’s compiler is extremely fast—0.0005s per file, compiling up to 2000 style files per second. It runs in parallel with your dev server (like Next.js), finishing before your app even starts. There’s zero delay in your development flow.

Debugging

All styles are resolved at compile time.
That means no runtime surprises, no dynamic logic, and no hidden fallbacks.
You’ll catch all styling issues statically, before they hit production.

Performance

Plumeria provides a create method with an atomic class as its main API. create() reduces the bundle size of unnecessary CSS in production by more than 15%. Short class hashes reduce CSS payload, and post-processing via lightningcss and PostCSS fully minifies and compresses production styles—without adding any initial cost.

Optimization

Style objects are automatically tree-shaken at build time.
Because styles are declared outside components, they never run at runtime.
Your production bundle contains only the final CSS, not style declarations.

Hashes

The create method generates an atomic class name as a 8 character hash of a set of propertie and value.
Same object → same hash → consistent class names across development and production.
This makes it easy to debug, reuse styles.
By extracting them into variables, you can even use them in advanced selectors like has(), is(), not(), where(), etc.