Introduction

Welcome to the Plumeria documentation!

What is Plumeria?

Plumeria is a high-performance CSS-in-JS library designed for speed, scalability, and efficient styling in modern JavaScript and TypeScript projects.

Reusability and readability through abstraction of style definitions, Developers can focus on what to apply styles to, rather than how to apply them. It designed for Vite and Next.js and is optimized for React.

The CSS Module Problem

CSS Modules have many advantages - but lack type safety. Therefore making it difficult to detect class name errors and refactor styles safely.

[CSS Modules]
──────────────────────────────────────────────────────────
┌──────────────────────┐
│ Component            │  ← CSS Module is imported in a JSX file  
│ (JSX importing)      │     (e.g., `import styles from './button.module.css'`)  
└──────────────────────┘
            │
            │  CSS is written in an external file
            ▼
┌────────────────────────┐
│ CSS File (.module.css) │  ← Styles are statically defined  
└────────────────────────┘
            │
            │  ※ The bundler (e.g., Webpack) processes  
            │     and hashes class names at build time  
            ▼
┌─────────────────────────┐
│ Build Process (Webpack) │  ← Class names are determined during build  
└─────────────────────────┘
            │
            ▼
┌──────────────────────┐
│ Generated CSS Output │  ← Hashed class names are output  
│ (Only visible after  │     ※ The final result is unknown until build  
│ building)            │  
└──────────────────────┘

It has the characteristic that the final output result is not known until the build is completed.
The feedback loop needs to the shortest so developers can deliver high-quality code quickly.

The CSS in JS solution

A feature of Plumeria is that the compilation process is independent from the development flow.

[CSS in JS (Plumeria)]
──────────────────────────────────────────────────────────
┌──────────────────────┐       ┌─────────────────────────┐
│ Component            │───1──▶│ CLI Command Execution   │
│ (JSX with CSS in JS) │       │ (Precompilation)        │
└──────────────────────┘       └─────────────────────────┘
     ▲         ┌─────────────────────────┐           │
     │         │ Generated CSS File      │           │
   3 └─────────│ (Static CSS available)  │ ◀─────────┘ 2
               └─────────────────────────┘  ※ The final result is known at this time
                  │
                4 │
                  │  ※ The following process happens in production builds  
                  ▼
┌───────────────────────────────┐
│ Production Build Process      │  ← e.g., Webpack, Vite  
│ (Tree-shaking & Minification) │     ※ Removes used styles  
└───────────────────────────────┘

Plumeria solves the problem of debugging CSS through a CLI. By allowing you to quickly cycle through the feedback loop of write,compile,test,write,compile,test you can drastically reduce the time you spend debugging.

Introduction

What is Plumeria?

The CSS Module Problem

The CSS in JS solution

On this page