How It Works

Lemon CSS uses JavaScript Proxy objects to intercept property accesses. When you access Lemon.backgroundColor("primary"), the proxy captures the "backgroundColor" property and the "primary" argument.

// Simplified internal logic
const Lemon = new Proxy({}, {
  get(target, prop) {
    return (value) => ({ [prop]: resolveValue(value) });
  }
});

The core philosophy of Lemon is Write Once, Style Everywhere. Because the output is a plain JavaScript object, it is compatible with both React's style prop (for Web) and React Native's style prop (for Mobile).

The engine checks your lemon.config.ts for predefined tokens. If a property access matches a config key (like "primary" for colors or "lg" for sizes), it automatically resolves to the configured value.

colors: {
  primary: "#007bff"
}

Lemon.color.primary
// -> { color: "#007bff" }

Unlike traditional CSS-in-JS libraries that inject style tags, Lemon generates plain JavaScript objects that are passed directly to the style attribute. This means zero style recalculations and no extra DOM elements.