@plumeria/core

Plumeria is a JavaScript library for scalable and optimized styling.

Installation

To get started with Plumeria, install the core package:

npm install @plumeria/core

Compiler

Install the css command to extract styles at build time:

npm install --save-dev @plumeria/compiler

Stylesheet Import

In your app entry point, import the compiled CSS file:

import '@plumeria/core/stylesheet.css';

API

css.create()

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

const styles = css.create({
  text: {
    color: 'yellow',
  },
  box: {
    width: '100%',
    background: 'rgb(60,60,60)',
  },
});

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

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

Generated CSS:

.xxr7afjw {
  color: yellow;
}
.xq97ksf4 {
  width: 100%;
}
.xk450ff8 {
  background: rgb(60, 60, 60);
}

Resulting:

className: "xxr7afjw xq97ksf4 xk450ff8"

Documentation

Read the documentation for more details.

Integration

• Vite
• Next
• Webpack
• CLI
• ESLint

Acknowledgement

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

in alphabetical order

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

License

MIT License © 2023-PRESENT Refirst 11