Core concept
Learn more about Plumeria's CSS-in-JS design principles
Plumeria’s compiler behaves like CSS: selectors declared later always take precedence.
The final CSS respects the declaration order inside your function, preserving source code structure.
AOT (Ahead-Of-Time) Compiler
Plumeria 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 avoids unnecessary DOM pollution by promoting semantic styling.
Short class hashes reduce CSS payload, and post-processing via lightningcss and PostCSS ensures
that production styles are fully minified and compressed—without adding any initial cost.
Optimization
Unused 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 class names by appending a 6-character hash to your defined key.
Same object → same hash → consistent class names across development and production.
This makes it easy to debug, reuse styles, and even reference them in advanced selectors (:has
, :not
, :is
, etc.).