Thinking in Plumeria

Type-Driven design

{
  "name": "@plumeria/core",
  "type": "module",
  "exports": {
    ".": {
      "types": "./lib/css.d.ts",
      "import": "./lib/css.js" // entry only empty export 0B by bundler
  },
  "files": [
    "lib/"
  ],
}

Typical CSS-in-JS solutions use several kilobytes in initial bundle size. This library completely replaces type calls and is complete with just type definitions and plugins. Developers simply extend the type definition arguments as schemas, so no JS parsing is required and there are no memory allocation costs.

How It Works

The pre-build code is actually written in types and transformed by build plugins.
Write styles with TypeScript autocomplete and type safety:

import * as css from "@plumeria/core";

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

<div className={css.props(styles.text, styles.size)} />

The build plugin transforms this into pure atomic CSS:

// All imports and style objects removed
<div className="xhrr6ses xvbwmxqp xhk51flp" />

The Type-Driven Advantage

By treating styles as type schemas instead of runtime objects:

• No JavaScript bundle
• No JavaScript runtime
• No JavaScript parsing overhead
• No memory allocation for style objects
• Tree-shaking removes all framework code
• Only atomic class names and optimized CSS remain in production