A new take on CSS Plumeria's main strengths

#performance #tooling #css #javascript

Low runtime

Plumeria handles all styling at build time, with no runtime CSS injection.

@plumeria/compiler uses @swc/core to statically analyze your source code and extract css.create() calls. At build time, the postcss-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 64-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.

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.