Introduction

Type-only

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.

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

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" />

Type-only 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