LunarCSS

v0.3.0 — Hot-reload & Polish

Planned features for the v0.3.0 release.

Target

v0.3.0 focuses on developer experience improvements: hot-reload for lunar.config.ts on native, docs site polish, and ecosystem integrations.

Native hot-reload for lunar.config.ts — shipped

Editing lunar.config.ts no longer requires a Metro restart.

How it works:

  1. withLunarCSS registers an fs.watch on the config file's parent directory at Metro startup. Watching the dir (not the file) survives editor atomic-rename saves (Vim, etc.).
  2. On change, loadLunarConfig + flattenTokens re-run; emitVirtualTheme content-hashes the result and only rewrites .lunarcss/__theme__.js if the tokens actually differ.
  3. Metro's existing watchFolders includes the project root, so its bundler watcher detects the rewrite and Fast Refresh propagates the new module to clients.
  4. runtime/tw.ts's boot path uses replaceTokens(THEME_TOKENS) — wholesale swap, NOT additive merge — so deletions in the config surface at runtime instead of leaving stale entries. The theme hash bumps; the LRU cache entries become unreachable and get recomputed against the new map.
  5. Malformed-config edits (mid-typing) don't crash Metro — the watcher catches loadLunarConfig errors and logs a warning; the next save recovers.

The web path's hot-reload via PostCSS dependency messages was already in place; the Metro-side watcher mirrors it.

Docs site polish

  • Dark/light mode toggle
  • Copy-to-clipboard on all code blocks
  • Live preview playground (web-only) — paste a className string, see resolved styles
  • Search via Algolia or Fumadocs built-in search
  • Better mobile navigation

Ecosystem integrations

  • Storybook@storybook/react-native addon for LunarCSS className preview
  • Expo Router — verified compatibility with file-based routing and shared layouts
  • React Navigation — guide for applying lunarcss tokens to navigation theming
  • Tamagui interop — migration guide for Tamagui users

color-mix() on mobile

Currently unsupported on mobile. v0.3.0 plans to pre-compute color-mix() values via culori during token flatten, so tokens using color-mix() work cross-platform.

Tailwind v3 resolver parity (deferred)

The Tailwind v3 named color palette ships in v0.2.0 as a fallback inside the v4 resolver — bg-zinc-900, text-slate-500, bg-red-500/40 all work without any user config. A broader v3 resolver (modifier semantics, screen breakpoint defaults) remains deferred. Open an issue if your codebase needs it.

Status

Planned. Timelines and scope subject to change. Follow GitHub Releases or watch the repo.

On this page