rnwind 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnwind",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Tailwind for React Native",
   "author": "https://github.com/sagltd",
   "license": "MIT",
@@ -56,6 +56,7 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
+    "bench": "bun run bench/resolve.bench.ts",
     "test": "bun test ./__tests__",
     "test:coverage": "bun test ./__tests__ --coverage",
     "typecheck": "tsc --noEmit",

package/src/core/normalize-classname.ts

@@ -0,0 +1,19 @@
+/**
+ * Normalize a className for molecule keying: trim, collapse runs of
+ * whitespace, and drop exact-duplicate tokens — but PRESERVE ORDER.
+ * Tailwind is last-wins for conflicting utilities (`p-4 p-2` ≠ `p-2 p-4`),
+ * so sorting would corrupt the merge. Build-time (molecule keys) and
+ * runtime (lookup) call the identical function so their keys always match.
+ * @param className Raw className string.
+ * @returns Normalized, order-preserving className.
+ */
+export function normalizeClassName(className: string): string {
+  const seen = new Set<string>()
+  const out: string[] = []
+  for (const token of className.trim().split(/\s+/)) {
+    if (token.length === 0 || seen.has(token)) continue
+    seen.add(token)
+    out.push(token)
+  }
+  return out.join(' ')
+}

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

@@ -1,4 +1,5 @@
 import type { KeyframeBlock, RNStyle, SchemedStyle } from '../parser'
+import { normalizeClassName } from '../normalize-classname'
 
 /** Match atom names like `border-hairline`, `h-hairline`, `border-t-hairline`, etc. */
 const HAIRLINE_ATOM = /-hairline$/
@@ -179,61 +180,96 @@ function prepareAtomValue(atomName: string, style: RNStyle, keyframes: ReadonlyM
 }
 
 /**
- * Per-file value deduplicator — interns each unique serialized atom
- * value once and emits `const _s<N> = <value>` at module scope. Scheme
- * entries reference the const instead of inlining the literal.
- *
- * Wins: (1) smaller bundle bytes for themes with many atoms sharing a
- * style shape; (2) stable `===` inside one scheme so two atoms
- * resolving to the same value yield the same object reference.
+ * Decide which serialized atom values get hoisted to a shared `const`.
+ * A value is hoisted ONLY when ≥2 atoms share it — then one
+ * `const _s<N> = <value>` saves the repeated bytes AND gives those atoms
+ * one shared object (reference identity). A value used once is inlined
+ * directly at its atom (`"-m-2": {"margin":-8}`) — hoisting a singleton
+ * would only add bytes. First-seen order keeps the const indices stable
+ * across workers.
+ * @param entries `[atomName, serializedValue]` pairs (atom-sorted).
+ * @returns `{ constFor }` value→const-name map + `decls` source lines.
  */
-class ValueDeduper {
-  private readonly byText = new Map<string, string>()
-  private readonly decls: string[] = []
-
-  intern(serialized: string): string {
-    const existing = this.byText.get(serialized)
-    if (existing) return existing
-    const name = `_s${this.decls.length}`
-    this.decls.push(`const ${name} = ${serialized}`)
-    this.byText.set(serialized, name)
-    return name
+function planValueConsts(entries: readonly (readonly [string, string])[]): {
+  constFor: ReadonlyMap<string, string>
+  decls: readonly string[]
+} {
+  const counts = new Map<string, number>()
+  for (const [, value] of entries) counts.set(value, (counts.get(value) ?? 0) + 1)
+  const constFor = new Map<string, string>()
+  const decls: string[] = []
+  for (const [value, count] of counts) {
+    if (count < 2) continue
+    const name = `_s${decls.length}`
+    constFor.set(value, name)
+    decls.push(`const ${name} = ${value}`)
   }
+  return { constFor, decls }
+}
 
-  get declarations(): readonly string[] {
-    return this.decls
-  }
+/**
+ * Serialize a scheme's molecule map into a `registerMolecules(...)` object
+ * literal, sorted by className for byte-deterministic output.
+ * @param molecules normalized className → pre-merged style object.
+ * @returns Object-literal source (`null` when empty).
+ */
+function serializeMolecules(molecules: Record<string, RNStyle> | undefined): string | null {
+  if (!molecules) return null
+  const keys = Object.keys(molecules).toSorted((a, b) => a.localeCompare(b))
+  if (keys.length === 0) return null
+  const body = keys.map((cn) => `  ${JSON.stringify(cn)}: ${JSON.stringify(molecules[cn])},`)
+  return ['{', ...body, '}'].join('\n')
 }
 
 /**
  * Render one scheme file's source. `entries` is the list of atoms this
  * scheme contributes — for `common` every atom's canonical value; for
  * a variant only atoms whose value differs from canonical. Hairline
- * atoms in this file trigger the `StyleSheet` import.
+ * atoms in this file trigger the `StyleSheet` import. Pre-merged
+ * molecules (when present) are registered alongside the atoms so the
+ * runtime resolver's molecule-first path is populated.
  * @param schemeName Registry key (`'common'` or the variant name).
  * @param entries `[atomName, serializedValue]` pairs to emit.
+ * @param molecules Pre-merged className → style map for this scheme.
  * @returns JS source text.
  */
-function renderSchemeFile(schemeName: string, entries: readonly (readonly [string, string])[]): string {
+function renderSchemeFile(
+  schemeName: string,
+  entries: readonly (readonly [string, string])[],
+  molecules?: Record<string, RNStyle>,
+): string {
   const needsStyleSheet = entries.some(([atom]) => isHairlineAtom(atom))
-  const deduper = new ValueDeduper()
-  const recordLines: string[] = []
-  for (const [atom, value] of entries) {
-    const ref = deduper.intern(value)
-    recordLines.push(`  ${JSON.stringify(atom)}: ${ref},`)
-  }
+  const { constFor, decls } = planValueConsts(entries)
+  const recordLines = entries.map(([atom, value]) => `  ${JSON.stringify(atom)}: ${constFor.get(value) ?? value},`)
+  const moleculeLiteral = serializeMolecules(molecules)
 
+  const imports = ['registerAtoms']
+  if (moleculeLiteral) imports.push('registerMolecules')
   const lines: string[] = []
   if (needsStyleSheet) lines.push(`import { StyleSheet } from 'react-native'`)
-  lines.push(`import { registerAtoms } from 'rnwind'`, ``)
-  if (deduper.declarations.length > 0) {
-    for (const decl of deduper.declarations) lines.push(decl)
+  lines.push(`import { ${imports.join(', ')} } from 'rnwind'`, ``)
+  if (decls.length > 0) {
+    for (const decl of decls) lines.push(decl)
     lines.push(``)
   }
   lines.push(`registerAtoms(${JSON.stringify(schemeName)}, {`, ...recordLines, `})`, ``)
+  if (moleculeLiteral) lines.push(`registerMolecules(${JSON.stringify(schemeName)}, ${moleculeLiteral})`, ``)
   return lines.join('\n')
 }
 
+/**
+ * Serialize a feature map (atom name → JSON-able value: gradient info or
+ * haptic request) into a stable JS object literal for the manifest.
+ * Sorted by key so the output is byte-deterministic across workers.
+ * @param map Atom name → feature value.
+ * @returns Object-literal source.
+ */
+function serializeFeatureMap(map: ReadonlyMap<string, unknown>): string {
+  const entries = [...map.entries()].toSorted((a, b) => a[0].localeCompare(b[0]))
+  const body = entries.map(([key, value]) => `${JSON.stringify(key)}: ${JSON.stringify(value)}`).join(', ')
+  return `{ ${body} }`
+}
+
 /**
  * Render the JS-object literal for the responsive-breakpoint table the
  * runtime registers at manifest-load time. Sorted by ascending px
@@ -250,35 +286,215 @@ function serializeBreakpoints(breakpoints: ReadonlyMap<string, number>): string
 }
 
 /**
- * Render the manifest module. Eager-imports `common.style.js` (every
- * rewritten source file pulls this via a transitive side-effect
- * import), registers the responsive-breakpoint table once, and lazy-
- * requires every variant scheme's file through an inline require —
- * first call in `ensureSchemeLoaded(name)` triggers the scheme
- * module's evaluation; Metro's module cache makes subsequent calls
- * no-ops.
+ * Render the manifest module. EAGER-imports `common.style.js` AND every
+ * variant scheme file so every scheme's atoms register the moment the
+ * manifest evaluates — no lazy `require`. Lazy loading raced the cold
+ * start: `RnwindProvider` calls `loadScheme(scheme)` on its first render,
+ * but on a cold boot the manifest (hence `registerSchemeLoader`) may not
+ * have evaluated yet, so that call no-ops and the active variant's atoms
+ * never load — scheme-dependent styles fall back to `common` (the light
+ * default) until a reload. Eager imports remove the race entirely; the
+ * variant files are small diffs, so the upfront cost is negligible.
+ * `ensureSchemeLoaded` stays exported as a no-op for API compatibility.
  * @param variants Variant scheme names (no `base`, no `common`).
  * @param breakpoints Responsive breakpoint name → px-threshold map.
+ * @param gradients Atom → gradient info for `registerGradients`.
+ * @param haptics Atom → haptic request for `registerHaptics`.
  * @returns JS source text.
  */
-function renderManifest(variants: readonly string[], breakpoints: ReadonlyMap<string, number>): string {
-  const lines: string[] = [
-    `import { registerSchemeLoader, registerBreakpoints } from 'rnwind'`,
-    `import './common.style'`,
+function renderManifest(
+  variants: readonly string[],
+  breakpoints: ReadonlyMap<string, number>,
+  gradients: ReadonlyMap<string, unknown>,
+  haptics: ReadonlyMap<string, unknown>,
+): string {
+  const imports = ['registerSchemeLoader', 'registerBreakpoints']
+  if (gradients.size > 0) imports.push('registerGradients')
+  if (haptics.size > 0) imports.push('registerHaptics')
+  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)})`)
+  lines.push(
+    ``,
+    `function ensureSchemeLoaded(_name) {}`,
     ``,
-    `registerBreakpoints(${serializeBreakpoints(breakpoints)})`,
+    `registerSchemeLoader(ensureSchemeLoaded)`,
     ``,
-  ]
-  if (variants.length === 0) {
-    lines.push(`function ensureSchemeLoaded(_name) {}`, ``, `registerSchemeLoader(ensureSchemeLoaded)`, ``, `export { ensureSchemeLoaded }`, ``)
-    return lines.join('\n')
+    `export { ensureSchemeLoaded }`,
+    ``,
+  )
+  return lines.join('\n')
+}
+
+/**
+ * Whether a resolved style carries a nested safe-area marker — molecules
+ * can't pre-bake these because the inset value is per-render.
+ * @param style Raw resolved RN style (pre-envelope).
+ * @returns True when any value is a `{__safe: ...}` marker.
+ */
+function hasSafeMarker(style: RNStyle): boolean {
+  for (const key of Object.keys(style)) {
+    const value = style[key]
+    if (typeof value !== 'object' || !value) continue
+    if ('__safe' in value) return true
   }
-  lines.push(`const LOADERS = {`)
+  return false
+}
+
+/**
+ * Whether a resolved style has font-scale-sensitive props. Molecules
+ * can't pre-bake these because `fontSize`/`lineHeight` scale per-render
+ * with `useWindowDimensions().fontScale`.
+ * @param style Resolved RN style.
+ * @returns True when `fontSize` or `lineHeight` is present.
+ */
+function hasFontScaleProperty(style: RNStyle): boolean {
+  return 'fontSize' in style || 'lineHeight' in style
+}
+
+/**
+ * Whether a token is a feature-only utility (gradient stop/direction,
+ * haptic, or text-truncate) that contributes NO RN `style` — the runtime
+ * resolver folds these in via `attachFeatures`, so they don't disqualify
+ * a molecule, they just merge nothing.
+ * @param token Atom name.
+ * @param gradients Gradient feature map.
+ * @param haptics Haptic feature map.
+ * @returns True when the token is a non-style feature.
+ */
+function isFeatureToken(token: string, gradients: ReadonlyMap<string, unknown>, haptics: ReadonlyMap<string, unknown>): boolean {
+  if (gradients.has(token) || haptics.has(token)) return true
+  return token === 'truncate' || token === 'text-ellipsis' || token === 'text-clip' || token.startsWith('line-clamp-')
+}
+
+/**
+ * Resolve one atom's value under a scheme: the scheme's own non-empty
+ * bucket, falling back to canonical. `common` always reads canonical.
+ * @param schemed Parser-produced per-scheme bucket.
+ * @param scheme Scheme key (`'common'` or a variant name).
+ * @returns The atom's RN style for that scheme, or undefined.
+ */
+function schemeValueOf(schemed: SchemedStyle, scheme: string): RNStyle | undefined {
+  if (scheme === COMMON_SCHEME) return canonicalValue(schemed)
+  const own = (schemed as Readonly<Record<string, RNStyle>>)[scheme]
+  return isNonEmptyStyle(own) ? own : canonicalValue(schemed)
+}
+
+/**
+ * Pre-merge a normalized className's atoms into ONE RN style object for a
+ * scheme, or null when the className is NOT molecule-eligible. A
+ * className is eligible only when every token is context-independent:
+ *  - no variant prefix (`active:` / `focus:` / `md:` / `dark:` — anything
+ *    with a `:`), so scheme/state/breakpoint gating never applies,
+ *  - no `*-hairline`, `*-safe`, or font-scale (`fontSize`/`lineHeight`)
+ *    atom, whose value is resolved per-render.
+ * Feature-only tokens (gradient / haptic / truncate) are skipped, not
+ * disqualifying — the runtime folds them in via `attachFeatures`. Unknown
+ * tokens disqualify so the atom path still surfaces the dev warning.
+ * @param tokens Normalized className tokens (order preserved).
+ * @param scheme Scheme key to resolve each atom under.
+ * @param resolved Per-atom schemed styles.
+ * @param keyframes Keyframes to inline into `animationName`.
+ * @param gradients Gradient feature map.
+ * @param haptics Haptic feature map.
+ * @returns Merged style object, or null when not eligible.
+ */
+function mergeMolecule(
+  tokens: readonly string[],
+  scheme: string,
+  resolved: ReadonlyMap<string, SchemedStyle>,
+  keyframes: ReadonlyMap<string, KeyframeBlock>,
+  gradients: ReadonlyMap<string, unknown>,
+  haptics: ReadonlyMap<string, unknown>,
+): RNStyle | null {
+  const merged: RNStyle = {}
+  for (const token of tokens) {
+    if (token.includes(':')) return null
+    if (isFeatureToken(token, gradients, haptics)) continue
+    if (isHairlineAtom(token)) return null
+    const schemed = resolved.get(token)
+    if (!schemed) return null
+    const raw = schemeValueOf(schemed, scheme)
+    if (!raw) continue
+    if (hasSafeMarker(raw) || hasFontScaleProperty(raw)) return null
+    Object.assign(merged, inlineAnimationName(raw, keyframes))
+  }
+  return merged
+}
+
+/**
+ * Emit each variant's molecule for one className — but only when the
+ * variant's merge DIFFERS from common (runtime falls back to common).
+ * @param normalized Normalized className key.
+ * @param tokens Normalized className tokens.
+ * @param commonText Serialized common-scheme merge for the diff check.
+ * @param variants Variant scheme names.
+ * @param variantMaps Mutable per-variant molecule collectors.
+ * @param resolved Per-atom schemed styles.
+ * @param keyframes Keyframes to inline.
+ * @param gradients Gradient feature map.
+ * @param haptics Haptic feature map.
+ */
+function addVariantMolecules(
+  normalized: string,
+  tokens: readonly string[],
+  commonText: string,
+  variants: readonly string[],
+  variantMaps: Record<string, Record<string, RNStyle>>,
+  resolved: ReadonlyMap<string, SchemedStyle>,
+  keyframes: ReadonlyMap<string, KeyframeBlock>,
+  gradients: ReadonlyMap<string, unknown>,
+  haptics: ReadonlyMap<string, unknown>,
+): void {
   for (const variant of variants) {
-    lines.push(`  ${JSON.stringify(variant)}: () => require(${JSON.stringify(`./${variant}.style`)}),`)
+    const variantMerged = mergeMolecule(tokens, variant, resolved, keyframes, gradients, haptics)
+    if (variantMerged === null) continue
+    if (JSON.stringify(variantMerged) !== commonText) variantMaps[variant][normalized] = variantMerged
   }
-  lines.push(`}`, ``, `function ensureSchemeLoaded(name) {`, `  const loader = LOADERS[name]`, `  if (loader) loader()`, `}`, ``, `registerSchemeLoader(ensureSchemeLoaded)`, ``, `export { ensureSchemeLoaded }`, ``)
-  return lines.join('\n')
+}
+
+/**
+ * Build per-scheme molecules for every literal className the project
+ * uses. Each eligible className gets a pre-merged style object under
+ * `common`; a variant only carries an entry when its merge DIFFERS from
+ * common (runtime falls back `molecules[scheme] ?? molecules.common`).
+ * @param literals Distinct literal className strings (raw).
+ * @param resolved Per-atom schemed styles.
+ * @param keyframes Keyframes to inline.
+ * @param variants Variant scheme names.
+ * @param gradients Gradient feature map.
+ * @param haptics Haptic feature map.
+ * @returns scheme → (normalized className → merged style).
+ */
+function buildMolecules(
+  literals: readonly string[],
+  resolved: ReadonlyMap<string, SchemedStyle>,
+  keyframes: ReadonlyMap<string, KeyframeBlock>,
+  variants: readonly string[],
+  gradients: ReadonlyMap<string, unknown>,
+  haptics: ReadonlyMap<string, unknown>,
+): Record<string, Record<string, RNStyle>> {
+  const common: Record<string, RNStyle> = {}
+  const variantMaps: Record<string, Record<string, RNStyle>> = {}
+  for (const variant of variants) variantMaps[variant] = {}
+
+  for (const literal of literals) {
+    const normalized = normalizeClassName(literal)
+    if (normalized.length === 0) continue
+    const tokens = normalized.split(' ')
+    const commonMerged = mergeMolecule(tokens, COMMON_SCHEME, resolved, keyframes, gradients, haptics)
+    if (commonMerged === null) continue
+    common[normalized] = commonMerged
+    addVariantMolecules(normalized, tokens, JSON.stringify(commonMerged), variants, variantMaps, resolved, keyframes, gradients, haptics)
+  }
+
+  const out: Record<string, Record<string, RNStyle>> = { [COMMON_SCHEME]: common }
+  for (const variant of variants) {
+    if (Object.keys(variantMaps[variant]).length > 0) out[variant] = variantMaps[variant]
+  }
+  return out
 }
 
 /** Output of one build pass — one source per scheme plus the manifest. */
@@ -458,6 +674,11 @@ const EMPTY_BREAKPOINTS: ReadonlyMap<string, number> = new Map()
  *   manifest emits `registerBreakpoints({...})` so the runtime can gate
  *   `md:*` / `lg:*` atoms on `windowWidth`. Optional — empty when the
  *   theme declares no breakpoints (legacy/test callers).
+ * @param gradients Gradient feature map (atom → role/colour) for the manifest + molecule eligibility.
+ * @param haptics Haptic feature map (atom → request) for the manifest + molecule eligibility.
+ * @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).
  * @returns Per-scheme sources, manifest source, variant list.
  */
 export function buildSchemeSources(
@@ -466,6 +687,9 @@ export function buildSchemeSources(
   keyframes: ReadonlyMap<string, KeyframeBlock>,
   cache?: AtomSerializedCache,
   breakpoints: ReadonlyMap<string, number> = EMPTY_BREAKPOINTS,
+  gradients: ReadonlyMap<string, unknown> = EMPTY_FEATURE_MAP,
+  haptics: ReadonlyMap<string, unknown> = EMPTY_FEATURE_MAP,
+  literals: readonly string[] = EMPTY_LITERALS,
 ): BuildSchemeSourcesOutput {
   const variants = collectVariantSchemes(resolved)
   const commonEntries: (readonly [string, string])[] = []
@@ -481,20 +705,27 @@ export function buildSchemeSources(
     misses += collectAtomEntries(atom, schemed, canonical, variants, keyframes, commonEntries, variantEntries, cache)
   }
 
+  const molecules = buildMolecules(literals, resolved, keyframes, variants, gradients, haptics)
   const schemeSources: Record<string, string> = {
-    [COMMON_SCHEME]: renderSchemeFile(COMMON_SCHEME, commonEntries),
+    [COMMON_SCHEME]: renderSchemeFile(COMMON_SCHEME, commonEntries, molecules[COMMON_SCHEME]),
   }
   for (const variant of variants) {
-    schemeSources[variant] = renderSchemeFile(variant, variantEntries[variant])
+    schemeSources[variant] = renderSchemeFile(variant, variantEntries[variant], molecules[variant])
   }
 
   return {
     schemeSources,
-    manifestSource: renderManifest(variants, breakpoints),
+    manifestSource: renderManifest(variants, breakpoints, gradients, haptics),
     variants,
     serializedMisses: misses,
   }
 }
 
+/** Shared empty feature map default. */
+const EMPTY_FEATURE_MAP: ReadonlyMap<string, unknown> = new Map()
+
+/** Shared empty literal-list default (atom-only callers). */
+const EMPTY_LITERALS: readonly string[] = []
+
 /** 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

@@ -1,7 +1,7 @@
 import { createHash, randomBytes } from 'node:crypto'
 import { existsSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
 import path from 'node:path'
-import type { KeyframeBlock, SchemedStyle, TailwindParser } from '../parser'
+import type { GradientAtomInfo, HapticRequest, KeyframeBlock, SchemedStyle, TailwindParser } from '../parser'
 import { buildSchemeSources, type AtomSerializedCache } from './build-style'
 
 /** Manifest module basename — the file SchemeProvider imports via the resolver. */
@@ -90,6 +90,17 @@ class UnionBuilder {
   private readonly parser: TailwindParser
   private readonly unionAtoms = new Map<string, SchemedStyle>()
   private readonly unionKeyframes = new Map<string, KeyframeBlock>()
+  /** atom name → gradient role/colour, surfaced into the manifest's `registerGradients`. */
+  private readonly unionGradients = new Map<string, GradientAtomInfo>()
+  /** atom name → haptic request, surfaced into the manifest's `registerHaptics`. */
+  private readonly unionHaptics = new Map<string, HapticRequest>()
+  /**
+   * Distinct literal className strings seen across all files, pre-merged
+   * into per-scheme molecules at write time. Accumulate-only (like
+   * `unionAtoms`): orphaned literals just yield unused molecules and get
+   * reaped on the next cold start, so no refcount is needed.
+   */
+  private readonly unionLiterals = new Set<string>()
   /**
    * Responsive breakpoints captured from the parser. Refreshed on every
    * `recordFile` / `ensureProjectScanned` so user-defined
@@ -169,6 +180,8 @@ class UnionBuilder {
       const parsed = await this.parser.parseProject()
       for (const [name, style] of parsed.atoms) this.unionAtoms.set(name, style)
       for (const [name, kf] of parsed.keyframes) this.unionKeyframes.set(name, kf)
+      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.projectScanned = true
     })()
@@ -187,6 +200,7 @@ class UnionBuilder {
    * @param file Absolute source file path.
    * @param atoms Per-atom resolved schemed styles from this transform.
    * @param keyframes Keyframe blocks referenced by this file's atoms.
+   * @param literals
    * @returns `{ changed: true }` when the union shifted (new atom name,
    *   removed atom name, or new keyframe) — the transformer uses this
    *   to skip the serializer + `writeSchemes` when nothing changed.
@@ -195,8 +209,10 @@ class UnionBuilder {
     file: string,
     atoms: ReadonlyMap<string, SchemedStyle>,
     keyframes: ReadonlyMap<string, KeyframeBlock>,
+    literals: readonly string[] = [],
   ): Promise<{ changed: boolean }> {
     await this.ensureProjectScanned()
+    const literalAdded = this.recordLiterals(literals)
     const newAtomNames = new Set(atoms.keys())
     const previous = this.fileAtomSets.get(file)
     if (previous && setsEqual(previous, newAtomNames)) {
@@ -211,12 +227,29 @@ class UnionBuilder {
         if (!this.unionKeyframes.has(name)) keyframeAdded = true
         this.unionKeyframes.set(name, kf)
       }
-      return { changed: keyframeAdded }
+      return { changed: keyframeAdded || literalAdded }
     }
     this.applyDiff(file, newAtomNames, atoms, keyframes)
     return { changed: true }
   }
 
+  /**
+   * Merge a file's literal classNames into the union. A literal the
+   * union hasn't seen flips `changed` so `writeSchemes` re-emits the
+   * scheme files with the new molecule.
+   * @param literals Distinct literal className strings.
+   * @returns Whether any literal was new to the union.
+   */
+  private recordLiterals(literals: readonly string[]): boolean {
+    let added = false
+    for (const literal of literals) {
+      if (this.unionLiterals.has(literal)) continue
+      this.unionLiterals.add(literal)
+      added = true
+    }
+    return added
+  }
+
   /**
    * Forget one source file's contribution. Idempotent — repeated calls
    * for a file that's already dropped are no-ops. Does NOT remove the
@@ -246,7 +279,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)
+    const result = buildSchemeSources(sortedAtomNames, this.unionAtoms, this.unionKeyframes, this.serializedCache, this.breakpoints, this.unionGradients, this.unionHaptics, [...this.unionLiterals])
     this.serializedMissesCount += result.serializedMisses
     const { schemeSources, manifestSource } = result
 

package/src/metro/dts.ts

@@ -56,21 +56,15 @@ const CONTENT_CONTAINER_INTERFACES: ReadonlySet<string> = new Set([
 
 /**
  * Build the body of one interface augmentation: `className?: string`
- * plus `<prefix>ClassName?: string` for every prefix that applies to
- * THIS interface. Emits a single-line body so the file stays easy to
- * scan and diff.
+ * plus `contentContainerClassName?: string` for the scroll interfaces
+ * that natively expose `contentContainerStyle`. Emits a single-line
+ * body so the file stays easy to scan and diff.
  * @param interfaceName Bare interface name (generic parameters stripped).
- * @param userPrefixes Extra prefixes from the Metro config — applied to
- *   every interface the same way `className` is.
  * @returns Space-separated property declarations.
  */
-function buildInterfaceBody(interfaceName: string, userPrefixes: readonly string[]): string {
+function buildInterfaceBody(interfaceName: string): string {
   const props = ['className?: string']
   if (CONTENT_CONTAINER_INTERFACES.has(interfaceName)) props.push(`${BUILTIN_PREFIX}ClassName?: string`)
-  for (const prefix of userPrefixes) {
-    if (prefix === BUILTIN_PREFIX) continue
-    props.push(`${prefix}ClassName?: string`)
-  }
   return props.join('; ')
 }
 
@@ -83,17 +77,11 @@ function buildInterfaceBody(interfaceName: string, userPrefixes: readonly string
  * `Scheme` union so `useScheme()` returns the actual names.
  *
  * Called once at Metro-config time — overwrite-on-rewrite so the file
- * stays in sync with the user's current theme CSS + prefix config.
+ * stays in sync with the user's current theme CSS.
  * @param targetPath Absolute path to write (typically `rnwind-types.d.ts` at project root).
  * @param schemes Scheme names from the user's `@variant` blocks (empty when none declared).
- * @param classNamePrefixes Extra prefixes from the Metro config — merged
- *   on top of the built-in `'contentContainer'`. Defaults to empty.
  */
-export function writeDtsFile(
-  targetPath: string,
-  schemes: readonly string[],
-  classNamePrefixes: readonly string[] = [],
-): void {
+export function writeDtsFile(targetPath: string, schemes: readonly string[]): void {
   const lines: string[] = [
     '// Auto-generated by rnwind — do not edit by hand.',
     '// Overwritten on Metro start / theme CSS change.',
@@ -102,7 +90,7 @@ export function writeDtsFile(
   ]
   for (const entry of INTERFACES) {
     const name = typeof entry === 'string' ? entry : entry.name
-    const body = buildInterfaceBody(name, classNamePrefixes)
+    const body = buildInterfaceBody(name)
     if (typeof entry === 'string') {
       lines.push(`  interface ${entry} { ${body} }`)
       continue