Plumeria ·

The atomic on-demand CSS-in-JS.

import { css } from '@plumeria/core';

const styles = css.create({
  text: {
    fontSize: 12,
    color: 'navy',
  },
  size: {
    width: 120,
  },
});

const className = css.props(styles.text, styles.size);

Output:

Plumeria compiles each style property into a unique, atomic, and hashed class name. This prevents style collisions and maximizes reusability.

Generated CSS:

.x1p2jzyu:not(#\#) {
  font-size: 12px;
}
.xzie71ek {
  color: navy;
}
.xgpw2mmc {
  width: 120px;
}

Resulting:

className: "x1p2jzyu xzie71ek xgpw2mmc"

Structure

plumeria/
├── docs/               → Documentation website
├── examples/           → Example apps and integrations
└── packages/
    ├── compiler/       → CLI for Rust-based static extraction
    ├── core/           → API built on the zss-engine
    ├── eslint-plugin/  → Plugin for ESLint
    ├── next-plugin/    → Plugin for Integration with Next.js
    ├── vite-plugin/    → Plugin for integration with Vite
    └── webpack-plugin/ → Plugin for integration with Webpack

Contributing

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

Contributing Guide

Documentation

Read the documentation for more details.

Installation

• Vite
• Next
• Webpack
• CLI
• ESLint

Acknowledgement

• Linaria - for inspiring the Zero-Runtime architecture
• React Native - for inspiring the class API and inline styling
• React Native for Web - for inspiring the port of React Native to the web
• StyleX - for inspiring the optimization of atomic css
• Tailwind CSS - for inspiring the utility approach
• Uno CSS - for inspiring the engine concepts

License

MIT License © 2023-PRESENT Refirst 11