Plumeria

Plumeria is a React styling library for reliable interfaces. The style on the right wins, not the one imported or loaded last: the compiler merges styles at build time, and an overridden property never reaches the element. What ships is class names and CSS. A value the compiler cannot resolve stops the build until it is fixed.

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 what it cannot detect — which spelling of a two-named property the project writes, what the styling prop is called, and whether to set up ESLint — 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	★★★★☆	Stable
@plumeria/codemod	★★★☆☆	Candidate
@plumeria/eslint-plugin	★★★★☆	Stable
@plumeria/headlessui	★★★★☆	Stable
@plumeria/inspector	★★★☆☆	Candidate
@plumeria/swc-jest	★★★★☆	Stable
@plumeria/wind	★★★★☆	Stable

@plumeria/wind provides design values as static tokens, not a utility atom vocabulary.

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
  • swc-jest
  • turbopack-loader
  • unplugin
  • utils
  • wind
• 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.