Completely zero runtime
Plumeria handles all styling at build time, with no runtime CSS injection. This means that your JavaScript bundle contains 0 bytes of CSS-in-JS runtime code.
@plumeria/compiler uses @swc/core to statically analyze your source code and extract css.create() calls. At build time, the framework plugin converts css.create() calls to static class name strings, so the browser only performs simple class name concatenation.
Maximum reusability with atomic CSS
Each CSS property-value pair becomes a separate atomic class. For example, fontSize: 12 always generates .x1p2jzyu, and the same property-value pair reuses the same class name throughout the codebase.
Actual measurements show that the atomicization (v0.13.6) version reduces the file size to 2,004 bytes compared to 2,433 bytes for semantic styles (v0.12.0), a reduction of approximately 17.6%. CSS file size remains constant even when the number of components increases.
Deterministic hash generation
Uses the MurmurHash3 32-bit format and generates a fixed-length 8-character hash using base-36 encoding: The same style always generates the same class name, ensuring consistency between builds.
Predictable Style Application
All atomic classes have a uniform specificity of 1, meaning the last style applied always takes precedence. There are no specificity conflicts, simply because the style on the right side of css.props() wins.
Full Type Safety
Full TypeScript support with csstype integration allows type checking of CSS properties and values. Additionally, the @plumeria/eslint-plugin provides CSS value validation, property sorting, and unused style detection.
Framework Agnostic
Works with multiple frameworks, including React, Vue, Svelte, Solid, Preact, and Astro. Dedicated plugins are available for Vite, Next.js, and Webpack, allowing for seamless integration with each build system.
Optimized Build Pipeline
PostCSS combine-media-query unifies media queries, and LightningCSS performs two-stage optimizations: minification and vendor prefixing. The output is a single stylesheet.css file, minimizing HTTP requests and maximizing cache efficiency.
Notes
Documentation
These strengths come from Plumeria being designed as "atomic on-demand CSS-in-JS".
Top comments (0)