rnwind 0.0.9 → 0.0.11

package/src/core/style-builder/build-style.ts

@@ -1,4 +1,5 @@
 import type { KeyframeBlock, RNStyle, SchemedStyle } from '../parser'
+import type { ThemeTables } from '../types'
 import { normalizeClassName } from '../normalize-classname'
 
 /** Match atom names like `border-hairline`, `h-hairline`, `border-t-hairline`, etc. */
@@ -300,6 +301,7 @@ function serializeBreakpoints(breakpoints: ReadonlyMap<string, number>): string
  * @param breakpoints Responsive breakpoint name → px-threshold map.
  * @param gradients Atom → gradient info for `registerGradients`.
  * @param haptics Atom → haptic request for `registerHaptics`.
+ * @param themeTokens
  * @returns JS source text.
  */
 function renderManifest(
@@ -307,15 +309,19 @@ function renderManifest(
   breakpoints: ReadonlyMap<string, number>,
   gradients: ReadonlyMap<string, unknown>,
   haptics: ReadonlyMap<string, unknown>,
+  themeTokens: ThemeTables,
 ): string {
+  const hasTokens = Object.keys(themeTokens).length > 0
   const imports = ['registerSchemeLoader', 'registerBreakpoints']
   if (gradients.size > 0) imports.push('registerGradients')
   if (haptics.size > 0) imports.push('registerHaptics')
+  if (hasTokens) imports.push('registerThemeTokens')
   const lines: string[] = [`import { ${imports.join(', ')} } from 'rnwind'`, `import './common.style'`]
   for (const variant of variants) lines.push(`import ${JSON.stringify(`./${variant}.style`)}`)
   lines.push(``, `registerBreakpoints(${serializeBreakpoints(breakpoints)})`)
   if (gradients.size > 0) lines.push(`registerGradients(${serializeFeatureMap(gradients)})`)
   if (haptics.size > 0) lines.push(`registerHaptics(${serializeFeatureMap(haptics)})`)
+  if (hasTokens) lines.push(`registerThemeTokens(${JSON.stringify(themeTokens)})`)
   lines.push(
     ``,
     `function ensureSchemeLoaded(_name) {}`,
@@ -679,6 +685,7 @@ const EMPTY_BREAKPOINTS: ReadonlyMap<string, number> = new Map()
  * @param literals Distinct literal className strings — pre-merged into
  *   per-scheme molecules so the runtime resolver's O(1) molecule-first
  *   path is populated. Empty for legacy/test callers (atom path only).
+ * @param themeTokens
  * @returns Per-scheme sources, manifest source, variant list.
  */
 export function buildSchemeSources(
@@ -690,6 +697,7 @@ export function buildSchemeSources(
   gradients: ReadonlyMap<string, unknown> = EMPTY_FEATURE_MAP,
   haptics: ReadonlyMap<string, unknown> = EMPTY_FEATURE_MAP,
   literals: readonly string[] = EMPTY_LITERALS,
+  themeTokens: ThemeTables = EMPTY_THEME_TOKENS,
 ): BuildSchemeSourcesOutput {
   const variants = collectVariantSchemes(resolved)
   const commonEntries: (readonly [string, string])[] = []
@@ -715,7 +723,7 @@ export function buildSchemeSources(
 
   return {
     schemeSources,
-    manifestSource: renderManifest(variants, breakpoints, gradients, haptics),
+    manifestSource: renderManifest(variants, breakpoints, gradients, haptics, themeTokens),
     variants,
     serializedMisses: misses,
   }
@@ -727,5 +735,8 @@ const EMPTY_FEATURE_MAP: ReadonlyMap<string, unknown> = new Map()
 /** Shared empty literal-list default (atom-only callers). */
 const EMPTY_LITERALS: readonly string[] = []
 
+/** Shared empty theme-token default (callers without theme tokens). */
+const EMPTY_THEME_TOKENS: ThemeTables = {}
+
 /** Registry key the runtime uses for the always-loaded fallback. */
 export const COMMON_SCHEME_NAME: string = COMMON_SCHEME

package/src/core/style-builder/union-builder.ts

@@ -2,6 +2,7 @@ import { createHash, randomBytes } from 'node:crypto'
 import { existsSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
 import path from 'node:path'
 import type { GradientAtomInfo, HapticRequest, KeyframeBlock, SchemedStyle, TailwindParser } from '../parser'
+import type { ThemeTables } from '../types'
 import { buildSchemeSources, type AtomSerializedCache } from './build-style'
 
 /** Manifest module basename — the file SchemeProvider imports via the resolver. */
@@ -110,6 +111,13 @@ class UnionBuilder {
    * snapshot is sufficient.
    */
   private breakpoints: ReadonlyMap<string, number> = new Map()
+  /**
+   * Per-scheme theme token tables captured from the parser. Refreshed on
+   * every `recordFile` / `ensureProjectScanned` so theme-token edits land in
+   * the manifest's `registerThemeTokens({...})` — the data source for
+   * `useColor` / `useToken` / `useSize`.
+   */
+  private themeTokens: ThemeTables = {}
   /** file → set of atom names this file currently contributes. */
   private readonly fileAtomSets = new Map<string, Set<string>>()
   /** atom name → how many files currently contribute it (refcount). */
@@ -172,6 +180,7 @@ class UnionBuilder {
       for (const [name, gradient] of parsed.gradientAtoms) this.unionGradients.set(name, gradient)
       for (const [name, haptic] of parsed.hapticAtoms) this.unionHaptics.set(name, haptic)
       this.breakpoints = parsed.breakpoints
+      this.themeTokens = parsed.themeTokens
       this.projectScanned = true
     })()
     try {
@@ -268,7 +277,7 @@ class UnionBuilder {
   public async writeSchemes(): Promise<{ changedSchemes: readonly string[] }> {
     await this.ensureProjectScanned()
     const sortedAtomNames = [...this.unionAtoms.keys()].toSorted((a, b) => a.localeCompare(b))
-    const result = buildSchemeSources(sortedAtomNames, this.unionAtoms, this.unionKeyframes, this.serializedCache, this.breakpoints, this.unionGradients, this.unionHaptics, [...this.unionLiterals])
+    const result = buildSchemeSources(sortedAtomNames, this.unionAtoms, this.unionKeyframes, this.serializedCache, this.breakpoints, this.unionGradients, this.unionHaptics, [...this.unionLiterals], this.themeTokens)
     this.serializedMissesCount += result.serializedMisses
     const { schemeSources, manifestSource } = result
 

package/src/runtime/hooks/use-scheme.ts

@@ -1,5 +1,6 @@
 import type { ThemeTable } from '../../core/types'
 import { useRnwind } from '../components/rnwind-provider'
+import { getThemeTokens } from '../lookup-css'
 
 /**
  * Synthetic scheme name applied when tokens aren't declared under any
@@ -20,10 +21,13 @@ const BASE_SCHEME = 'base'
  */
 export function useTheme(): ThemeTable {
   const { scheme, tables } = useRnwind()
-  const base = tables[BASE_SCHEME] ?? {}
-  const schemeTable = tables[scheme]
-  if (!schemeTable) return base
-  // Fast path: nothing to merge when the scheme table is empty.
+  // The build registers token tables on the manifest so `useColor` works out
+  // of the box; an explicit `tables` prop layers on top (the prop wins).
+  const registered = getThemeTokens()
+  const base = { ...registered[BASE_SCHEME], ...tables[BASE_SCHEME] }
+  const schemeTable = { ...registered[scheme], ...tables[scheme] }
+  // Base tokens apply everywhere (CSS `:root` cascade); the active scheme's
+  // own entries override on overlap.
   if (Object.keys(schemeTable).length === 0) return base
   return { ...base, ...schemeTable }
 }

package/src/runtime/index.ts

@@ -2,6 +2,7 @@ export {
   lookupCss,
   registerAtoms,
   registerBreakpoints,
+  registerThemeTokens,
   registerSchemeLoader,
   setWindowHeightProvider,
   getBreakpoints,

package/src/runtime/lookup-css.ts

@@ -16,6 +16,7 @@
  */
 
 import type { RnwindState } from './components/rnwind-provider'
+import type { ThemeTables } from '../core/types'
 
 /** Empty sentinel returned when the input is null / undefined / empty. */
 const EMPTY_STYLES: readonly unknown[] = []
@@ -62,6 +63,8 @@ const cache = {
   atoms: Object.create(null) as Partial<Record<string, SchemeAtomsRecord>>,
   breakpoints: Object.create(null) as Partial<Record<string, number>>,
   breakpointList: [] as readonly BreakpointEntry[],
+  /** Per-scheme theme token tables (`--color-*`, `--spacing-*`, …) the manifest registers for `useColor` / `useToken` / `useSize`. */
+  themeTokens: {} as ThemeTables,
 }
 
 /**
@@ -553,6 +556,30 @@ export function getBreakpoints(): readonly BreakpointEntry[] {
   return cache.breakpointList
 }
 
+/**
+ * Register the per-scheme theme token tables the manifest module emits at
+ * load time — the data source for `useColor` / `useToken` / `useSize`. The
+ * build lowers `--color-*` tokens to sRGB before registering them, so these
+ * are RN-safe. Replaces the prior tables; bumps `atomVersion` so a theme HMR
+ * cycle re-resolves. The build registers tokens here so the hooks work out of
+ * the box, without the user manually threading a `tables` prop on the provider.
+ * @param tables Scheme name → (token name → value) map.
+ */
+export function registerThemeTokens(tables: ThemeTables): void {
+  cache.themeTokens = tables
+  atomVersion += 1
+}
+
+/**
+ * The manifest-registered theme token tables. The provider merges these under
+ * any explicit `tables` prop (the prop wins), so `useColor` resolves from the
+ * build by default.
+ * @returns Registered per-scheme token tables.
+ */
+export function getThemeTokens(): ThemeTables {
+  return cache.themeTokens
+}
+
 /**
  * Sentinel name returned by {@link activeBreakpointFor} ONLY when no
  * breakpoints are registered at all (bundle without rnwind-transformed
@@ -635,6 +662,7 @@ export function __resetLookupCssState(): void {
   for (const key of Object.keys(cache.atoms)) delete cache.atoms[key]
   for (const key of Object.keys(cache.breakpoints)) delete cache.breakpoints[key]
   cache.breakpointList = []
+  cache.themeTokens = {}
   windowHeightProvider = null
   schemeLoader = null
   WARNED_MISSING_INSETS = false

package/src/testing/index.ts

@@ -17,6 +17,7 @@ import {
   __resetLookupCssState,
   registerAtoms,
   registerBreakpoints,
+  registerThemeTokens,
   registerSchemeLoader,
 } from '../runtime/lookup-css'
 import { __resetResolveState, registerGradients, registerHaptics, registerMolecules } from '../runtime/resolve'
@@ -159,6 +160,7 @@ function evaluateGeneratedFile(filePath: string): void {
     'registerBreakpoints',
     'registerGradients',
     'registerHaptics',
+    'registerThemeTokens',
     'registerSchemeLoader',
     'require',
     body,
@@ -169,6 +171,7 @@ function evaluateGeneratedFile(filePath: string): void {
     registerBreakpoints,
     registerGradients,
     registerHaptics,
+    registerThemeTokens,
     registerSchemeLoader,
     () => {},
   )