rnwind 0.0.8 → 0.0.9

package/src/metro/transformer.ts

@@ -17,14 +17,6 @@ interface UpstreamTransformer {
 /** Env var that points at the upstream `babelTransformerPath` we override. */
 const UPSTREAM_ENV = 'RNWIND_UPSTREAM_TRANSFORMER'
 
-/**
- * Matches a `useCss(` call. Files that resolve classes via the `useCss`
- * hook (no JSX `className=`) must still be scanned so the classes inside
- * `useCss("…")` get registered — common for theme/accent hooks living in a
- * shared package the project scan may not reach.
- */
-const USE_CSS_CALL = /\buseCss\s*\(/
-
 /** Cached upstream module — required once, reused across every transform call. */
 let cachedUpstream: UpstreamTransformer | null = null
 
@@ -145,44 +137,53 @@ function isThemeCssEntry(filename: string): boolean {
  * @returns Rewritten source text.
  */
 async function rewriteSource(args: BabelTransformerArgs): Promise<string> {
-  const ast = parseUserSource(args.src)
-  if (!ast) return args.src
+  // SCAN FIRST — exactly like Tailwind: oxide extracts class candidates from
+  // the WHOLE file content (className, cva/clsx, plain strings, anywhere),
+  // and the compiler is the only filter. No babel parse needed to scan, so
+  // the common "file with no classes" case stays cheap and the source is
+  // returned untouched. This is what makes adding a class ANYWHERE register
+  // on hot-reload, not just inside a `className=` or a known helper call.
+  const state = getRnwindState(projectRootOf(args))
+  const extension = extensionOf(args.filename)
+  const parsed = await state.parser.parseAtoms({ content: args.src, extension })
+  const hasAtoms = parsed.atoms.size > 0
 
   const hasClassName = /classname=/i.test(args.src)
-  const hasUseCss = USE_CSS_CALL.test(args.src)
   const hasSpread = /\{\s*\.\.\./.test(args.src)
 
-  // Wrap host component imports ONLY when className arrives through a
-  // component — written (`hasClassName`) or forwarded (`hasSpread`). A
-  // `useCss("…")`-only file resolves manually, so we must NOT wrap its
-  // imports: a non-RN drawing lib (e.g. skia's `LinearGradient` nested in
-  // `SkiaText`) breaks if its primitives are replaced by a wrapper.
-  const wrapped = hasClassName || hasSpread ? rewriteWrapImports(ast, getWrapModules()) : false
-
-  if (!hasClassName && !hasUseCss) {
-    // Import-only file: nothing to compile. Drop any stale atom
-    // contribution (className may have just been removed) and emit the
-    // wrapped imports — or the untouched source when nothing wrapped.
-    dropFileSafely(args.filename, projectRootOf(args))
-    return wrapped ? generateModule(ast).code : args.src
+  // Nothing for rnwind to do: no Tailwind class compiled AND no host
+  // wrapping needed. Drop any stale contribution and emit the file as-is.
+  if (!hasAtoms && !hasClassName && !hasSpread) {
+    state.builder.dropFile(args.filename)
+    return args.src
   }
 
-  // Scan path — runs for `className=` literals AND/OR `useCss("…")` strings.
-  // oxide reads class candidates from the whole file content, so classes
-  // that only ever appear inside a `useCss("…")` call still register.
-  const state = getRnwindState(projectRootOf(args))
-  const extension = extensionOf(args.filename)
-  const parsed = await state.parser.parseAtoms({ content: args.src, extension })
+  const ast = parseUserSource(args.src)
+  if (!ast) {
+    // Can't parse to wrap/inject, but we DID scan — still record the atoms so
+    // they register (a malformed-but-recoverable file shouldn't lose styles).
+    if (hasAtoms) {
+      await state.builder.recordFile(args.filename, parsed.atoms, parsed.keyframes, [])
+      await state.builder.writeSchemes()
+    } else {
+      state.builder.dropFile(args.filename)
+    }
+    return args.src
+  }
 
-  warnUnknownClasses(args.src, parsed.candidates, parsed.atoms, args.filename, [parsed.gradientAtoms, parsed.hapticAtoms])
+  // Wrap host imports ONLY when className flows through a component — written
+  // (`hasClassName`) or forwarded (`{...rest}`). A `useCss`/`cva`-only file
+  // resolves manually, so its imports (e.g. skia drawing primitives) are
+  // left untouched.
+  const wrapped = hasClassName || hasSpread ? rewriteWrapImports(ast, getWrapModules()) : false
 
-  if (parsed.atoms.size === 0) {
+  if (!hasAtoms) {
+    // Wrap-only forwarder — no classes to record/register.
     state.builder.dropFile(args.filename)
-    await state.builder.writeSchemes()
-    injectThemeSignatureImport(ast)
-    return generateModule(ast).code
+    return wrapped ? generateModule(ast).code : args.src
   }
 
+  warnUnknownClasses(args.src, parsed.candidates, parsed.atoms, args.filename, [parsed.gradientAtoms, parsed.hapticAtoms])
   const literals = collectClassNameLiterals(ast)
   const { changed } = await state.builder.recordFile(args.filename, parsed.atoms, parsed.keyframes, literals)
   if (changed) await state.builder.writeSchemes()
@@ -192,21 +193,6 @@ async function rewriteSource(args: BabelTransformerArgs): Promise<string> {
   return generateModule(ast).code
 }
 
-/**
- * Drop a file's union contribution, swallowing the "state not configured"
- * error unit tests hit when they call the transformer without
- * `configureRnwindState`.
- * @param filename Absolute source path.
- * @param projectRoot Project root for state lookup.
- */
-function dropFileSafely(filename: string, projectRoot: string): void {
-  try {
-    getRnwindState(projectRoot).builder.dropFile(filename)
-  } catch {
-    // State not configured (standalone/unit test). Nothing to drop.
-  }
-}
-
 /**
  * Whether a JSX attribute names a className-style prop (`className` or
  * any `<prefix>ClassName`).
@@ -404,19 +390,12 @@ function loadUpstream(): UpstreamTransformer | null {
  */
 function isRewriteCandidate(args: BabelTransformerArgs): boolean {
   if (!/\.(?:tsx|ts|jsx|js)$/i.test(args.filename)) return false
-  // Process the file when it either:
-  //  - carries a `className=` / `<prefix>ClassName=` literal (case-
-  //    insensitive — `contentContainerClassName=` has a capital C), or
-  //  - calls `useCss("…")` (classes that only ever appear in the hook must
-  //    still be scanned + registered — common for theme/accent hooks), or
-  //  - spreads props (`{...rest}`) onto a host from a wrap-module, where a
-  //    forwarded className must still get its import wrapped (no literal
-  //    appears in this file). A style-less `<View/>` with none is left
-  //    alone so it never pays for an unused wrapper.
-  const hasClassName = /classname=/i.test(args.src)
-  const hasUseCss = USE_CSS_CALL.test(args.src)
-  const isForwarder = /\{\s*\.\.\./.test(args.src) && mentionsWrapModule(args.src)
-  if (!hasClassName && !hasUseCss && !isForwarder) return false
+  // EVERY user source file is scanned — exactly like Tailwind walks its
+  // whole content set. The compiler is the only filter (see rewriteSource);
+  // no className/helper pre-filter, because that "filter magic" missed
+  // classes living in cva/clsx/plain-string files and broke their hot-reload.
+  // (Cheap when the file has no classes: oxide finds nothing, no babel parse,
+  // source returned untouched.)
   if (!args.filename.includes('/node_modules/')) return true
   // node_modules in path → could be a workspace symlink; resolve it.
   try {
@@ -427,21 +406,6 @@ function isRewriteCandidate(args: BabelTransformerArgs): boolean {
   }
 }
 
-/**
- * Cheap pre-parse check: does the source import from any configured
- * wrap-module? A quoted specifier match is enough — `rewriteWrapImports`
- * re-verifies precisely on the AST, so a false positive only costs a
- * no-op parse.
- * @param source Source text.
- * @returns True when a wrap-module specifier appears in the source.
- */
-function mentionsWrapModule(source: string): boolean {
-  for (const moduleName of getWrapModules().keys()) {
-    if (source.includes(`'${moduleName}'`) || source.includes(`"${moduleName}"`)) return true
-  }
-  return false
-}
-
 /**
  * Fallback parse when no upstream is configured AND Metro didn't hand
  * us an AST. Used by unit tests and standalone setups.

package/src/metro/with-config.ts

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, utimesSync, watch as watchFile } from 'node:fs'
+import { existsSync, mkdirSync, watch as watchFile } from 'node:fs'
 import path from 'node:path'
 import { writeDtsFile } from './dts'
 import { createRnwindResolver, type ResolveRequestFn } from './resolver'
@@ -15,14 +15,15 @@ const DEFAULT_CACHE_DIR = '.rnwind'
 let activeCssWatcher: { cssPath: string; close: () => void } | null = null
 
 /**
- * Watch the theme CSS for edits. On change, rewrite the per-scheme
- * files with the fresh theme AND bump `mtime` on every source file
- * rnwind has transformed so far — Metro's own watcher sees those
- * mtime changes, invalidates the modules, and re-transforms them
- * against the new CSS on the next request. `getCacheKey()` alone is
- * NOT enough: Metro samples the cache key once per worker lifetime,
- * so edits during an already-running dev server don't propagate
- * without this explicit nudge.
+ * Watch the theme CSS for edits. On change, rebuild state against the fresh
+ * CSS and rewrite the per-scheme files (`onThemeChange` → full rescan →
+ * `writeSchemes`). That's the entire HMR signal: every transformed source
+ * imports `rnwind/__generated/schemes`, which eager-imports
+ * `common.style.js`; the rewrite changes its bytes, Metro's content-SHA1
+ * dedup notices, and every importer is invalidated + re-bundled with the new
+ * style values. The rewritten JSX references atoms by NAME (theme-independent),
+ * so no source-file re-transform / mtime nudge is needed — the dep graph
+ * carries the signal.
  * @param cssPath Absolute path to the theme CSS to watch.
  * @param projectRoot Metro's project root (for `getRnwindState`).
  */
@@ -40,7 +41,6 @@ function watchThemeCss(cssPath: string, projectRoot: string): void {
       pending = false
       try {
         await onThemeChange(projectRoot)
-        touchRecordedFiles(projectRoot)
       } catch {
         // Invalidation is best-effort — never crash the dev server.
       }
@@ -49,25 +49,6 @@ function watchThemeCss(cssPath: string, projectRoot: string): void {
   activeCssWatcher = { cssPath, close: () => watcher.close() }
 }
 
-/**
- * Bump the mtime on every file the builder has transformed. Metro's
- * file watcher keys on `mtime`, so this is what makes it invalidate
- * those modules and re-transform them.
- * @param projectRoot Metro's project root.
- */
-function touchRecordedFiles(projectRoot: string): void {
-  const state = getRnwindState(projectRoot)
-  const files = state.builder.recordedFiles()
-  const now = new Date()
-  for (const file of files) {
-    try {
-      if (existsSync(file)) utimesSync(file, now, now)
-    } catch {
-      // One file's stat failure shouldn't stop the others.
-    }
-  }
-}
-
 /**
  * Where the rnwind babel transformer lives — resolved relative to this
  * module so the path works from both the `src/` tree (tests) and the

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

@@ -42,22 +42,25 @@ export function useToken(cssVariable: string): string | number | undefined {
 
 /**
  * Read a color token by shorthand name — `useColor('primary')` resolves
- * `--color-primary` for the active scheme.
- * @param name Token suffix after `--color-`.
+ * `--color-primary` for the active scheme. A fully-qualified name
+ * (`--color-primary`) is accepted as-is, so the call doesn't silently miss by
+ * double-prefixing into `--color---color-primary`.
+ * @param name Token suffix after `--color-`, or the full `--color-*` name.
  * @returns Resolved color string, or undefined when the token is missing
  *   or its value isn't a string.
  */
 export function useColor(name: string): string | undefined {
-  const value = useToken(`--color-${name}`)
+  const value = useToken(name.startsWith('--') ? name : `--color-${name}`)
   return typeof value === 'string' ? value : undefined
 }
 
 /**
  * Read a spacing token by shorthand name — `useSize('4')` resolves
- * `--spacing-4` for the active scheme.
- * @param name Token suffix after `--spacing-`.
+ * `--spacing-4` for the active scheme. A fully-qualified `--spacing-*` name is
+ * accepted as-is (no double-prefix miss).
+ * @param name Token suffix after `--spacing-`, or the full `--spacing-*` name.
  * @returns Resolved spacing value, or undefined when the token is missing.
  */
 export function useSize(name: string): number | string | undefined {
-  return useToken(`--spacing-${name}`)
+  return useToken(name.startsWith('--') ? name : `--spacing-${name}`)
 }

package/src/runtime/index.ts

@@ -28,4 +28,4 @@ export type { Scheme, RnwindConfig } from './types'
  * string when integrating with build tooling that may see multiple rnwind
  * copies (e.g. workspace overrides).
  */
-export const VERSION = '0.0.1' as const
+export const VERSION = '0.0.8' as const

package/src/runtime/lookup-css.ts

@@ -280,6 +280,20 @@ function tierFor(windowWidth: number): number {
   return tier
 }
 
+/**
+ * Public breakpoint-tier for a width — the count of registered breakpoints
+ * whose threshold is reached. Used by the runtime resolver as its width
+ * cache dimension: the numeric tier is bounded AND exact, unlike the
+ * clamped `activeBreakpoint` NAME (which collapses tier-0 into the smallest
+ * breakpoint, so widths straddling that threshold would share a cache key
+ * and serve a stale style).
+ * @param windowWidth Live window width in px.
+ * @returns Tier 0..N.
+ */
+export function breakpointTier(windowWidth: number): number {
+  return tierFor(windowWidth)
+}
+
 /**
  * Build the style array for a (hoist, scheme, state, width) tuple.
  * Walks the atom list, applies the interact-state and breakpoint

package/src/runtime/resolve.ts

@@ -1,4 +1,4 @@
-import { getStyleVersion, lookupCss, type InteractState } from './lookup-css'
+import { breakpointTier, getStyleVersion, lookupCss, type InteractState } from './lookup-css'
 import type { RnwindState } from './components/rnwind-provider'
 import { normalizeClassName } from '../core/normalize-classname'
 import type { GradientAtomInfo, GradientDirection } from '../core/parser/gradient'
@@ -148,17 +148,19 @@ const stateSignatureCache = new WeakMap<RnwindState, string>()
 
 /**
  * Cache key dimension for the reactive context — everything that can
- * change a resolved style. Uses the breakpoint TIER (`activeBreakpoint`),
- * NOT the raw `windowWidth`: two widths in the same tier gate `md:*` atoms
- * identically, so they resolve the same. This collapses the window axis
- * from "every pixel" to ~6 values, bounding the cache on resizable
- * surfaces (web / desktop) without changing any result.
+ * change a resolved style. Uses the numeric breakpoint TIER (count of
+ * thresholds reached) from `breakpointTier(windowWidth)`, NOT the
+ * `activeBreakpoint` NAME: the name clamps tier-0 into the smallest
+ * breakpoint, so widths straddling that threshold (e.g. 320 vs 700 with
+ * `sm=640`) would collide on one cache key and serve a stale style. The
+ * tier is exact AND bounded — two widths in the same tier gate every
+ * `sm:`/`md:`/… atom identically, so they resolve the same.
  * @param state Rnwind context.
  * @returns Compact signature string.
  */
 function stateSignature(state: RnwindState): string {
   const { insets } = state
-  return `${state.scheme}|${insets.top},${insets.right},${insets.bottom},${insets.left}|${state.fontScale}|${state.activeBreakpoint}`
+  return `${state.scheme}|${insets.top},${insets.right},${insets.bottom},${insets.left}|${state.fontScale}|${breakpointTier(state.windowWidth)}`
 }
 
 /**

package/src/runtime/wrap.tsx

@@ -3,6 +3,7 @@ import { chainFocus, chainPress } from './chain-handlers'
 import { useInteract } from './hooks/use-interact'
 import { useRnwind } from './components/rnwind-provider'
 import type { RnwindState } from './components/rnwind-provider'
+import type { InteractState } from './lookup-css'
 import { resolve, type ResolvedCss } from './resolve'
 import type { OnHaptics } from '../core/parser/haptics'
 
@@ -79,14 +80,20 @@ const CLASSNAME_SUFFIX = 'ClassName'
  * handled separately by the leaf and never reaches here.
  * @param props Mutable prop object being assembled for the host.
  * @param state Rnwind context for resolution.
+ * @param interactState Live press/focus state so `active:`/`focus:` variants
+ *   on a secondary class prop resolve too (undefined for non-interactive).
  */
-function applyContainerClassNames(props: Record<string, unknown>, state: RnwindState): void {
+function applyContainerClassNames(
+  props: Record<string, unknown>,
+  state: RnwindState,
+  interactState?: InteractState,
+): void {
   for (const key of Object.keys(props)) {
     if (!key.endsWith(CLASSNAME_SUFFIX)) continue
     const value = props[key]
     if (typeof value !== 'string') continue
     const styleKey = `${key.slice(0, -CLASSNAME_SUFFIX.length)}Style`
-    props[styleKey] = resolve(value, state, props[styleKey]).style
+    props[styleKey] = resolve(value, state, props[styleKey], interactState).style
     delete props[key]
   }
 }
@@ -102,6 +109,7 @@ function applyContainerClassNames(props: Record<string, unknown>, state: RnwindS
  * @param state Rnwind context — used to resolve secondary class props.
  * @param onHaptics Dispatcher from context.
  * @param userOnPressIn Caller-supplied onPressIn to chain after the haptic.
+ * @param interactState Live press/focus state for secondary class props.
  * @returns The merged prop object for `createElement`.
  */
 function buildProps(
@@ -110,10 +118,11 @@ function buildProps(
   state: RnwindState,
   onHaptics: OnHaptics | undefined,
   userOnPressIn?: unknown,
+  interactState?: InteractState,
 ): Record<string, unknown> {
   warnIfHapticsUnwired(onHaptics, resolved.haptics)
   const props: Record<string, unknown> = { ...rest, style: resolved.style }
-  applyContainerClassNames(props, state)
+  applyContainerClassNames(props, state, interactState)
   if (resolved.colors) {
     props.colors = resolved.colors
     props.start = resolved.start
@@ -136,66 +145,31 @@ function buildProps(
   return props
 }
 
-/** Props a leaf receives — the wrapped `as` tag plus forwarded props. */
-interface LeafProps {
-  readonly as: ComponentType<Record<string, unknown>>
+/** Props the wrapped renderer accepts — `className` plus forwarded props. */
+interface WrappedProps {
   readonly className?: string
   readonly style?: unknown
+  readonly onPressIn?: unknown
+  readonly onPressOut?: unknown
+  readonly onFocus?: unknown
+  readonly onBlur?: unknown
   readonly [key: string]: unknown
 }
 
-/**
- * Non-interactive leaf: resolve className → style (+ features) and
- * forward. One context read, one molecule/atom resolve.
- * @param props Leaf props.
- * @param props.as
- * @param props.className
- * @param props.style
- * @param props.onPressIn
- * @returns The rendered `as` element.
- */
-function PlainLeaf({ as: As, className, style, onPressIn, ...rest }: LeafProps): ReactElement {
-  const state = useRnwind()
-  const resolved = resolve(className, state, style)
-  useMountHaptics(resolved, state.onHaptics)
-  return createElement(As, buildProps(rest, resolved, state, state.onHaptics, onPressIn))
-}
-
-/**
- * Interactive leaf: tracks press/focus via `useInteract()`, feeds it into
- * `resolve` so `active:`/`focus:` atoms apply, and chains the
- * press/focus handlers.
- * @param props Leaf props.
- * @param props.as
- * @param props.className
- * @param props.style
- * @param props.onPressIn
- * @param props.onPressOut
- * @param props.onFocus
- * @param props.onBlur
- * @returns The rendered `as` element with interactive wiring.
- */
-function InteractiveLeaf({ as: As, className, style, onPressIn, onPressOut, onFocus, onBlur, ...rest }: LeafProps): ReactElement {
-  const state = useRnwind()
-  const interact = useInteract()
-  const resolved = resolve(className, state, style, interact.state)
-  useMountHaptics(resolved, state.onHaptics)
-  const props = buildProps(rest, resolved, state, state.onHaptics, onPressIn)
-  props.onPressIn = chainPress(props.onPressIn as Parameters<typeof chainPress>[0], interact.onPressIn)
-  props.onPressOut = chainPress(onPressOut as Parameters<typeof chainPress>[0], interact.onPressOut)
-  props.onFocus = chainFocus(onFocus as Parameters<typeof chainFocus>[0], interact.onFocus)
-  props.onBlur = chainFocus(onBlur as Parameters<typeof chainFocus>[0], interact.onBlur)
-  return createElement(As, props)
-}
-
 /**
  * Wrap a component so its `className` prop resolves to RN `style` (plus
  * gradient / truncate props and haptic dispatch) at render — no matter
  * how className arrived: written directly, spread through `{...rest}`, or
- * forwarded down custom wrappers. The returned component is hook-free; it
- * dispatches to a plain or interactive leaf so non-interactive elements
- * never pay for press/focus state. `ref` (a normal prop in React 19) and
- * all other props forward untouched.
+ * forwarded down custom wrappers. `ref` (a normal prop in React 19) and all
+ * other props forward untouched.
+ *
+ * A SINGLE stable component does the work and always calls `useInteract()`,
+ * so its identity never changes when `className` flips between interactive
+ * (`active:`/`focus:`) and not — swapping the rendered component type would
+ * unmount + remount the whole host subtree (lost state, effect re-runs,
+ * visual flash). `useInteract` is cheap and shares one idle-state ref, so the
+ * always-on cost is a couple of `useState` cells; the press/focus handlers
+ * and live state only wire in when the className actually needs them.
  * @example
  * ```tsx
  * const Pressable = wrap(RNPressable)
@@ -207,16 +181,38 @@ function InteractiveLeaf({ as: As, className, style, onPressIn, onPressOut, onFo
 export function wrap<P>(Component: ComponentType<P>): ComponentType<P & { className?: string }> {
   const as = Component as unknown as ComponentType<Record<string, unknown>>
   /**
-   * The wrapped component — hook-free dispatcher to a leaf.
+   * The wrapped component. Stable identity + unconditional hooks; branches
+   * internally on whether the className carries an interactive variant.
    * @param props Forwarded props with `className` intercepted.
-   * @param props.className
-   * @returns The rendered leaf.
+   * @param props.className Raw className string.
+   * @param props.style Caller-supplied style, merged under the resolved style.
+   * @param props.onPressIn Caller onPressIn — chained after haptics / interact.
+   * @param props.onPressOut Caller onPressOut — chained with interact when active.
+   * @param props.onFocus Caller onFocus — chained with interact when active.
+   * @param props.onBlur Caller onBlur — chained with interact when active.
+   * @returns The rendered `as` element.
    */
-  function RnwindWrapped({ className, ...rest }: { className?: string; [key: string]: unknown }): ReactElement {
-    if (className !== undefined && hasInteractiveVariant(className)) {
-      return createElement(InteractiveLeaf, { as, className, ...rest })
+  function RnwindWrapped({ className, style, onPressIn, onPressOut, onFocus, onBlur, ...rest }: WrappedProps): ReactElement {
+    const state = useRnwind()
+    const interact = useInteract()
+    const isInteractive = className !== undefined && hasInteractiveVariant(className)
+    const interactState = isInteractive ? interact.state : undefined
+    const resolved = resolve(className, state, style, interactState)
+    useMountHaptics(resolved, state.onHaptics)
+    const props = buildProps(rest, resolved, state, state.onHaptics, onPressIn, interactState)
+    if (isInteractive) {
+      props.onPressIn = chainPress(props.onPressIn as Parameters<typeof chainPress>[0], interact.onPressIn)
+      props.onPressOut = chainPress(onPressOut as Parameters<typeof chainPress>[0], interact.onPressOut)
+      props.onFocus = chainFocus(onFocus as Parameters<typeof chainFocus>[0], interact.onFocus)
+      props.onBlur = chainFocus(onBlur as Parameters<typeof chainFocus>[0], interact.onBlur)
+    } else {
+      // Forward the caller's press/focus handlers untouched (onPressIn is
+      // already set by buildProps, possibly haptic-chained).
+      if (onPressOut !== undefined) props.onPressOut = onPressOut
+      if (onFocus !== undefined) props.onFocus = onFocus
+      if (onBlur !== undefined) props.onBlur = onBlur
     }
-    return createElement(PlainLeaf, { as, className, ...rest })
+    return createElement(as, props)
   }
   RnwindWrapped.displayName = `wrap(${displayNameOf(Component)})`
   return RnwindWrapped as unknown as ComponentType<P & { className?: string }>