@plumeria/core

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);

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"

Documentation

Read the documentation for more details.

Installation

• Vite
• Next
• Webpack
• CLI
• ESLint

Acknowledgement

Plumeria is made possible thanks to the inspirations from the following projects:

• Linaria
• React Native
• React Native for Web
• StyleX
• Tailwind CSS
• Uno CSS

License

MIT License © 2023-PRESENT Refirst 11