Plumeria

Plumeria is a React styling library for reliable interfaces. You write type-safe styles in TypeScript, and what ships is a class string — not a style object and a runtime merger. Style composition is a monoid whose operation is fully determined at compile time, which is where the predictability comes from: styles are composable by construction, and strict syntax and linting keep the cognitive overhead low.

The compiler is written in Rust with oxc, so builds are fast. The CSS types and the property list the linter checks against are generated from MDN data, so properties and keywords follow what MDN documents.

Example

Styles can be passed to the classStyle prop. That prop accepts static and dynamic styles as an array. At build time, the compiler resolves classStyle into a static className; dynamic values are passed as CSS variables through the style attribute — no runtime library is involved.

import * as css from '@plumeria/core';

const styles = css.create({
  text: {
    fontSize: 12
  },
  cond: {
    background: 'navy'
  },
  scale: (value) => ({
    scale: value
  })
});

export default function App({ cond }) {
  const scale = useScale(); // from your own hook
  return (
    <div
      classStyle={[
        styles.text,
        cond && styles.cond,
        styles.scale(scale)
      ]}
    />
  );
}

Compiled:

<div
  className={'xhrr6ses xhxthtyw' + ' ' + (cond ? 'xj00ajs1' : '')}
  style={{ '--xfuma1qq-value': scale }}
/>

Generated CSS:

.xhrr6ses:not(#\#) {
  font-size: 12px;
}
.xhxthtyw {
  scale: var(--xfuma1qq-value);
}
.xj00ajs1 {
  background: navy;
}

Getting started

npx @plumeria/init

It detects the bundler and the package manager, asks the two questions it cannot detect — which spelling of a two-named property the project writes, and what the styling prop is called — then installs the packages and writes the configs. It shows the plan before writing anything.

Benchmark

For how Plumeria compares with other libraries, see the side-by-side benchmark.

API Stability

Plumeria publishes frequently. To make that legible, every public API is rated for future change likelihood — not past churn. The rating is a commitment about what will happen next, not a description of what already has.

Rating	Label	Meaning
★★★★★	Frozen	Bug fixes ship continuously. The signature will not change.
★★★★☆	Stable	Additive only. Existing signatures will not move.
★★★☆☆	Candidate	Shape is settled. Details may still change.

Core API — @plumeria/core

API	Stability
css.create	★★★★★	Frozen
css.createTheme	★★★★★	Frozen
css.createStatic	★★★★★	Frozen
css.keyframes	★★★★★	Frozen
css.viewTransitionClass	★★★★★	Frozen
css.positionTry	★★★★☆	Stable
css.varType	★★★★☆	Stable
css.marker	★★★★☆	Stable
css.extended	★★★★☆	Stable
css.use/classStyle	★★★★★	Frozen

The classStyle can be renamed via configuration

Bundler Integrations

Package	Stability
@plumeria/next-plugin	★★★★☆	Stable
@plumeria/unplugin	★★★★☆	Stable
@plumeria/turbopack-loader	★★★★☆	Stable

Tooling

Package	Stability
@plumeria/init	★★★☆☆	Candidate
@plumeria/codemod	★★★☆☆	Candidate
@plumeria/eslint-plugin	★★★★☆	Stable
@plumeria/headlessui	★★★★☆	Stable
@plumeria/inspector	★★★☆☆	Candidate

Internal

Package	Stability
@plumeria/compiler	★★★★☆	Stable
@plumeria/utils	★★★★☆	Stable

Not planned — a predefined utility atom vocabulary, a runtime style merger, or fallback chains. None can be reconciled with the closed-world static resolution performed by scanAll(). For one-off styles, give them a local name in css.create — the naming requirement is deliberate.

Structure

Versioning: All versions are standardized for consistency.

• .github
  • Contains workflows used by GitHub Actions.
  • Contains other templates.
• examples
  • Example applications using Plumeria.
• packages
  • Contains the individual packages managed in the monorepo.
  • codemod
  • compiler
  • core
  • eslint-plugin
  • headlessui
  • init
  • inspector
  • next-plugin
  • turbopack-loader
  • unplugin
  • utils
• test-e2e
  • Contains e2e tests built with Playwright and Next.js for final quality assurance.

Contributing

We welcome contributions of all kinds — bug reports, feature ideas, pull requests.

Contributing Guide

Acknowledgements

• Linaria - for inspiring the Zero-Runtime architecture
• React Native - for inspiring the StyleSheet.create
• React Native for Web - for inspiring the generation of atomic CSS from CSS-in-JS
• StyleX - It inherits the design philosophy.
• Tailwind CSS - for inspiring the brilliance of its approach

License

Plumeria is MIT licensed.