Plumeria ·

An atomic CSS types designed to disappear.

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

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

const className = style.use(styles.text, styles.size);

Compiled:

className="xhrr6ses xvbwmxqp xhk51flp"

Generated CSS:

.xhrr6ses:not(#\#) {
  font-size: 12px;
}
.xvbwmxqp {
  color: navy;
}
.xhk51flp {
  width: 120px;
}

Structure

plumeria/
├── docs/               → Documentation website
├── examples/           → Example apps and integrations
└── packages/
    ├── compiler/          → Compiler for programmable static extraction
    ├── core/              → Core zero-runtime implementation built on csstype
    ├── eslint-plugin/     → Plugin for ESLint plumeria rules
    ├── next-plugin/       → Plugin for Integration with Next.js
    ├── postcss-plugin/    → Plugin for PostCSS CSS static extraction
    ├── utils/             → Utils for Plugin parser and transformer
    ├── turbopack-loader/  → Loader for Integration with Turbopack
    ├── 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
• Turbopack
• Webpack
• PostCSS
• ESLint

Acknowledgements

• 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