rnwind 0.0.1 → 0.0.3

package/src/core/parser/haptics.ts

@@ -0,0 +1,88 @@
+/**
+ * Haptic-atom extractor.
+ *
+ * rnwind's haptic utilities are declared in preset.css as `@utility`
+ * rules that write a single `--rnwind-haptic: <kind>[-<value>]` custom
+ * property. Lightningcss surfaces those custom-property writes on the
+ * style rule's declaration list; this module converts the raw marker
+ * text into a structured {@link HapticRequest} the transformer can
+ * hoist into JSX.
+ *
+ * Marker vocabulary:
+ *
+ *   --rnwind-haptic: impact-Light | impact-Medium | impact-Heavy | impact-Soft | impact-Rigid;
+ *   --rnwind-haptic: notification-Success | notification-Warning | notification-Error;
+ *   --rnwind-haptic: selection;
+ *
+ * Everything else is returned as `null` so unknown markers don't leak
+ * into the transformer's map.
+ */
+
+import type { Declaration as LcDeclaration, TokenOrValue } from 'lightningcss'
+import { serializeTokens } from './tokens'
+
+/**
+ * Structured haptic request the `onHaptics` callback receives. Union
+ * members mirror `expo-haptics`'s three entry points 1:1 so consumers
+ * can index directly into the enum (`Haptics.ImpactFeedbackStyle[req.style]`).
+ */
+export type HapticRequest =
+  | { readonly kind: 'impact'; readonly style: 'Light' | 'Medium' | 'Heavy' | 'Soft' | 'Rigid' }
+  | { readonly kind: 'notification'; readonly type: 'Success' | 'Warning' | 'Error' }
+  | { readonly kind: 'selection' }
+
+/** When during a component's lifecycle the haptic was triggered. */
+export type HapticTrigger = 'mount' | 'pressIn' | 'pressOut' | 'focus' | 'hover'
+
+/** User-provided callback fired by rnwind when a haptic atom resolves. */
+export type OnHaptics = (request: HapticRequest, trigger: HapticTrigger) => void
+
+const IMPACT_STYLES = new Set(['Light', 'Medium', 'Heavy', 'Soft', 'Rigid'] as const)
+type ImpactStyle = 'Light' | 'Medium' | 'Heavy' | 'Soft' | 'Rigid'
+const NOTIFICATION_TYPES = new Set(['Success', 'Warning', 'Error'] as const)
+type NotificationType = 'Success' | 'Warning' | 'Error'
+
+/**
+ * Parse the raw marker text (post-serialization) into a
+ * {@link HapticRequest}, or `null` when the token is unrecognised.
+ * Shape: `impact-<Style>`, `notification-<Type>`, or bare `selection`.
+ * @param text Trimmed marker text.
+ * @returns Haptic request, or null.
+ */
+function parseMarker(text: string): HapticRequest | null {
+  if (text === 'selection') return { kind: 'selection' }
+  if (text.startsWith('impact-')) {
+    const style = text.slice('impact-'.length)
+    if (IMPACT_STYLES.has(style as ImpactStyle)) return { kind: 'impact', style: style as ImpactStyle }
+    return null
+  }
+  if (text.startsWith('notification-')) {
+    const typeText = text.slice('notification-'.length)
+    if (NOTIFICATION_TYPES.has(typeText as NotificationType)) {
+      return { kind: 'notification', type: typeText as NotificationType }
+    }
+    return null
+  }
+  return null
+}
+
+/**
+ * Inspect a rule's declaration list for a `--rnwind-haptic: <marker>`
+ * custom property and return the structured request. Returns `null`
+ * for rules that don't carry the marker.
+ * @param declarations Declarations from one lightningcss style rule.
+ * @returns Parsed haptic request, or null.
+ */
+function detectHapticAtom(declarations: readonly LcDeclaration[]): HapticRequest | null {
+  for (const decl of declarations) {
+    if (decl.property !== 'custom') continue
+    const custom = decl.value as { name: { name: string } | string; value?: readonly TokenOrValue[] }
+    const name = typeof custom.name === 'string' ? custom.name : custom.name.name
+    if (name !== '--rnwind-haptic') continue
+    const text = serializeTokens(custom.value ?? []).trim()
+    return parseMarker(text)
+  }
+  return null
+}
+
+export { detectHapticAtom }

package/src/core/parser/index.ts

@@ -0,0 +1,8 @@
+export { TailwindParser } from './tw-parser'
+export type { TailwindParserConfig, ParseOptions, ParsedOutput, SchemedStyle, KeyframeBlock, KeyframeStep } from './tw-parser'
+export type { SourceEntry } from '@tailwindcss/oxide'
+export type { RNStyle, RNStyleValue, RNEntry, SafeAreaMarker } from './types'
+export type { GradientAtomInfo, GradientDirection } from './gradient'
+export type { TextTruncateInfo } from './text-truncate'
+export type { HapticRequest, HapticTrigger, OnHaptics } from './haptics'
+export { BASE_SCHEME } from './theme-vars'

package/src/core/parser/keyframes.ts

@@ -0,0 +1,84 @@
+import type { Animation, Declaration as LcDeclaration, KeyframeSelector, KeyframesName } from 'lightningcss'
+
+/**
+ * Pull the first keyframe name out of a typed `animation` shorthand.
+ * @param animations Parsed animation shorthand entries.
+ * @returns First ident name, or `null`.
+ */
+function firstAnimationName(animations: readonly Animation[]): string | null {
+  for (const animation of animations) {
+    if (animation.name.type === 'ident' || animation.name.type === 'string') return animation.name.value
+  }
+  return null
+}
+
+/**
+ * Pull the first ident name from a typed `animation-name` longhand.
+ * @param names Animation-name list.
+ * @returns First name, or `null`.
+ */
+function firstNameFromAnimationNames(names: readonly { type: string; value?: string }[]): string | null {
+  for (const name of names) {
+    if ((name.type === 'ident' || name.type === 'string') && typeof name.value === 'string') return name.value
+  }
+  return null
+}
+
+/**
+ * Extract the animation name of an `@keyframes` rule. lightningcss models
+ * the name as a discriminated union (`ident` / `custom`); both variants
+ * carry the same downstream string.
+ * @param raw lightningcss `KeyframesName`.
+ * @returns Animation name, or `null` when empty.
+ */
+export function keyframesName(raw: KeyframesName): string | null {
+  if (typeof raw.value !== 'string' || raw.value.length === 0) return null
+  return raw.value
+}
+
+/**
+ * Render a keyframe step's selector list back to CSS-text (`'from'`,
+ * `'to'`, or `'50%'`). Timeline-range keyframe selectors (CSS Scroll /
+ * View Timelines) can't run in React Native — those steps are skipped.
+ * @param selectors Step selectors.
+ * @returns Step offset, or `null` when unrepresentable in RN.
+ */
+export function keyframeSelectorOffset(selectors: readonly KeyframeSelector[]): string | null {
+  const [head] = selectors
+  if (!head) return null
+  switch (head.type) {
+    case 'from': {
+      return 'from'
+    }
+    case 'to': {
+      return 'to'
+    }
+    case 'percentage': {
+      return `${head.value * 100}%`
+    }
+    default: {
+      return null
+    }
+  }
+}
+
+/**
+ * Extract the referenced `@keyframes` name from a declaration whose
+ * property is `animation-name` or a shorthand `animation` that names one.
+ * Returns the first ident found inside the value — Tailwind's animate-*
+ * utilities emit exactly one animation-name per rule.
+ * @param decl One declaration from a style rule.
+ * @returns Keyframe name, or `null` when the declaration doesn't reference one.
+ */
+export function pickAnimationName(decl: LcDeclaration): string | null {
+  if (decl.property === 'animation') return firstAnimationName(decl.value)
+  if (decl.property === 'animation-name') return firstNameFromAnimationNames(decl.value)
+  if (decl.property !== 'unparsed') return null
+  const targetProperty = decl.value.propertyId.property
+  if (targetProperty !== 'animation-name' && targetProperty !== 'animation') return null
+  for (const token of decl.value.value) {
+    if (token.type === 'token' && token.value.type === 'ident') return token.value.value
+    if (token.type === 'dashed-ident') return token.value
+  }
+  return null
+}

package/src/core/parser/layout-dispatcher.ts

@@ -0,0 +1,111 @@
+import type { Declaration as LcDeclaration } from 'lightningcss'
+import type { RNEntry } from './types'
+
+/**
+ * Lower CSS alignment keywords to the strings RN accepts. CSS uses
+ * `start`/`end` while RN sticks with the legacy `flex-start`/`flex-end`.
+ * Shared between `align-items`, `align-self`, `align-content`, and
+ * `justify-content` — the lowering rule is identical for all four.
+ * @param css CSS keyword (`center` / `start` / `end` / `baseline` / `stretch`).
+ * @returns RN-compatible keyword.
+ */
+function cssToRnAlignment(css: string): string {
+  if (css === 'start') return 'flex-start'
+  if (css === 'end') return 'flex-end'
+  return css
+}
+
+/** Alias kept for clarity at the call site. Identical lowering rule. */
+const cssToRnJustify = cssToRnAlignment
+
+/**
+ * Map lightningcss's `align-items` / `align-self` / `align-content`
+ * value (typed as `{type: 'self-position' | 'baseline-position', value: …}`)
+ * to the RN keyword RN expects.
+ * @param value Typed alignment value.
+ * @returns RN alignment string, or `null` when unmappable.
+ */
+function mapAlignKeyword(value: unknown): string | null {
+  if (typeof value === 'string') return cssToRnAlignment(value)
+  if (typeof value !== 'object' || value === null) return null
+  const tagged = value as { type?: string; value?: string }
+  if (tagged.type === 'baseline-position') return 'baseline'
+  if (typeof tagged.value === 'string') return cssToRnAlignment(tagged.value)
+  // Bare-keyword variants like `{type: 'stretch'}` carry the keyword
+  // in the `type` field with no separate `value`.
+  if (tagged.type === 'stretch' || tagged.type === 'normal') return cssToRnAlignment(tagged.type)
+  return null
+}
+
+/**
+ * Map lightningcss's `justify-content` value to the RN keyword.
+ * @param value Typed justify value.
+ * @returns RN justify string, or `null` when unmappable.
+ */
+function mapJustifyKeyword(value: unknown): string | null {
+  if (typeof value === 'string') return cssToRnJustify(value)
+  if (typeof value !== 'object' || value === null) return null
+  const tagged = value as { type?: string; value?: string }
+  if (typeof tagged.value === 'string') return cssToRnJustify(tagged.value)
+  return null
+}
+
+/**
+ * Dispatch flexbox-layout declarations (flex-direction, flex-wrap,
+ * align-items, align-self, align-content, justify-content). Returns
+ * `null` for any property the dispatcher doesn't handle so the caller
+ * can fall through to its main switch.
+ *
+ * RN expects keyword-mapped strings: `flex-start` / `flex-end` instead
+ * of CSS's `start` / `end`. We do the lowering here.
+ * @param decl One lightningcss declaration.
+ * @returns RN entries when the property matched, else `null`.
+ */
+export function dispatchLayoutDeclaration(decl: LcDeclaration): readonly RNEntry[] | null {
+  switch (decl.property) {
+    case 'flex-direction': {
+      return [['flexDirection', String(decl.value)]]
+    }
+    case 'flex-wrap': {
+      return [['flexWrap', String(decl.value)]]
+    }
+    case 'align-items': {
+      const v = mapAlignKeyword(decl.value)
+      return v === null ? [] : [['alignItems', v]]
+    }
+    case 'align-self': {
+      const v = mapAlignKeyword(decl.value)
+      return v === null ? [] : [['alignSelf', v]]
+    }
+    case 'align-content': {
+      const v = mapAlignKeyword(decl.value)
+      return v === null ? [] : [['alignContent', v]]
+    }
+    case 'justify-content': {
+      const v = mapJustifyKeyword(decl.value)
+      return v === null ? [] : [['justifyContent', v]]
+    }
+    case 'overflow': {
+      // Lightningcss splits CSS `overflow` into `{x, y}` axes; RN only
+      // supports a single `overflow` keyword (and only `'hidden' |
+      // 'visible' | 'scroll'` on iOS, `'hidden' | 'visible'` on
+      // Android — RN ignores unsupported keywords at runtime). Take
+      // the `x` axis when the user wrote shorthand; per-axis Tailwind
+      // utilities both emit shorthand here so axis splitting is rare.
+      const value = decl.value as { x?: unknown; y?: unknown }
+      if (typeof value.x !== 'string') return []
+      return [['overflow', value.x]]
+    }
+    case 'overflow-x':
+    case 'overflow-y': {
+      // Tailwind's `overflow-x-*` / `overflow-y-*` emit these longhands,
+      // not the `overflow` shorthand. RN has only a single `overflow`,
+      // so collapse both axes onto it (last one declared wins via the
+      // normal entry-merge order).
+      return typeof decl.value === 'string' ? [['overflow', decl.value]] : []
+    }
+    default: {
+      return null
+    }
+  }
+}

package/src/core/parser/length.ts

@@ -0,0 +1,114 @@
+import type {
+  DimensionPercentageFor_LengthValue as LcDimensionPercentage,
+  GapValue,
+  LengthPercentageOrAuto,
+  LengthValue,
+  MaxSize,
+  Size,
+} from 'lightningcss'
+import { REM_TO_PX } from './constants'
+
+/** Alias for lightningcss's snake_case dimension-or-percentage type. */
+type DimensionPercentage = LcDimensionPercentage
+
+/** RN-compatible length/percent result, or `null` when unrepresentable. */
+type LengthResult = number | string | null
+
+/**
+ * Round a percentage / length float to 4 decimal places so lightningcss's
+ * IEEE-754 noise (`0.237 → 0.23700000345…`) doesn't leak into RN style
+ * strings. 4 decimals is well below CSS subpixel precision.
+ * @param n Raw float.
+ * @returns Rounded float with trailing zeros trimmed.
+ */
+function roundFloat(n: number): number {
+  return Math.round(n * 10_000) / 10_000
+}
+
+/**
+ * "Fully rounded" sentinel — emitted for Tailwind's `rounded-full` (and
+ * any other utility expanding to `calc(infinity * 1px)`). RN can't
+ * render `Infinity` as a style value (the StyleSheet validator silently
+ * drops it), but it accepts a finite large pixel count and renders the
+ * same pill / circle shape. 9999 covers every realistic phone screen.
+ */
+const FULLY_ROUNDED_PX = 9999
+
+/**
+ * Convert a lightningcss `LengthValue` to a pixel number. Handles the
+ * units Tailwind emits: px, rem, em. Tailwind v4's "fully rounded"
+ * expansion (`calc(infinity * 1px)`) lands here as `value === Infinity`
+ * — we clamp to a finite sentinel so RN can render it. Other non-finite
+ * values (NaN from a malformed expression) are clamped to 0 rather
+ * than leaking through as `null` in the serialized RN style.
+ * @param length Typed length value.
+ * @returns Finite pixel number.
+ */
+export function lengthToPx(length: LengthValue): number {
+  const raw = length.value
+  if (!Number.isFinite(raw)) return raw === Number.POSITIVE_INFINITY ? FULLY_ROUNDED_PX : 0
+  switch (length.unit) {
+    case 'px': {
+      return raw
+    }
+    case 'rem':
+    case 'em': {
+      return raw * REM_TO_PX
+    }
+    default: {
+      return raw
+    }
+  }
+}
+
+/**
+ * Collapse a `DimensionPercentageFor_LengthValue` to a number (pixel) or
+ * `'N%'` string. `calc()` variants are not evaluated here — they fall
+ * through to `null` so the caller can skip or serialize via tokens.
+ * @param value Typed dimension-or-percentage.
+ * @returns Number, percent string, or `null` when unrepresentable.
+ */
+export function dimensionPercentageToNumber(value: DimensionPercentage): LengthResult {
+  if (value.type === 'dimension') return lengthToPx(value.value)
+  if (value.type === 'percentage') return `${roundFloat(value.value * 100)}%`
+  return null
+}
+
+/**
+ * Convert `LengthPercentageOrAuto` (per-side value type for padding /
+ * margin / inset) to an RN scalar. `auto` maps to the string `'auto'`,
+ * which RN's margin accepts for centering; non-margin callers can filter
+ * it out if they need a number.
+ * @param value Typed length-percentage-or-auto.
+ * @returns RN scalar or `null` for unrepresentable shapes.
+ */
+export function lengthPercentageOrAutoToValue(value: LengthPercentageOrAuto): LengthResult {
+  if (value.type === 'auto') return 'auto'
+  return dimensionPercentageToNumber(value.value)
+}
+
+/**
+ * Convert a lightningcss `Size` (used by width/height) or `MaxSize` (used
+ * by max-width/max-height) to an RN scalar. Sizing keywords with no RN
+ * analog (`min-content`, `fit-content`, `stretch`, …) fall through to
+ * `null` so the caller drops them.
+ * @param value Typed size value.
+ * @returns RN scalar or `null` when unrepresentable.
+ */
+export function sizeLikeToValue(value: Size | MaxSize): LengthResult {
+  if (value.type === 'auto' || value.type === 'none') return value.type === 'auto' ? 'auto' : null
+  if (value.type === 'length-percentage') return dimensionPercentageToNumber(value.value)
+  return null
+}
+
+/**
+ * Convert a lightningcss `GapValue` (per-axis gap, used by `row-gap` /
+ * `column-gap`) to an RN scalar. The `normal` keyword has no RN analog
+ * and falls through to `null`.
+ * @param value Typed gap value.
+ * @returns Number, percent string, or `null`.
+ */
+export function gapValueToValue(value: GapValue): LengthResult {
+  if (value.type === 'normal') return null
+  return dimensionPercentageToNumber(value.value)
+}

package/src/core/parser/motion-dispatcher.ts

@@ -0,0 +1,89 @@
+import type { Declaration as LcDeclaration } from 'lightningcss'
+import {
+  animationDelayEntries,
+  animationDirectionEntries,
+  animationDurationEntries,
+  animationFillModeEntries,
+  animationIterationCountEntries,
+  animationNameEntries,
+  animationPlayStateEntries,
+  animationShorthandToEntries,
+  animationTimingFunctionEntries,
+  transitionDelayEntries,
+  transitionDurationEntries,
+  transitionPropertyEntries,
+  transitionShorthandToEntries,
+  transitionTimingFunctionEntries,
+} from './animation'
+import { rotateToEntries, scaleToEntries, transformFunctionsToEntries, translateToEntries } from './transform'
+import type { RNEntry } from './types'
+
+/**
+ * Dispatch motion-adjacent declarations (animation/transition/transform)
+ * to their typed handlers. Returns `null` when the declaration isn't
+ * one this dispatcher handles, so the caller can fall through to its
+ * main switch.
+ * @param decl One lightningcss declaration.
+ * @returns RN entries when the property matched, else `null`.
+ */
+export function dispatchMotionDeclaration(decl: LcDeclaration): readonly RNEntry[] | null {
+  switch (decl.property) {
+    case 'animation': {
+      return animationShorthandToEntries(decl.value)
+    }
+    case 'animation-name': {
+      return animationNameEntries(decl.value)
+    }
+    case 'animation-duration': {
+      return animationDurationEntries(decl.value)
+    }
+    case 'animation-timing-function': {
+      return animationTimingFunctionEntries(decl.value)
+    }
+    case 'animation-iteration-count': {
+      return animationIterationCountEntries(decl.value)
+    }
+    case 'animation-delay': {
+      return animationDelayEntries(decl.value)
+    }
+    case 'animation-direction': {
+      return animationDirectionEntries(decl.value)
+    }
+    case 'animation-fill-mode': {
+      return animationFillModeEntries(decl.value)
+    }
+    case 'animation-play-state': {
+      return animationPlayStateEntries(decl.value)
+    }
+    case 'transition': {
+      return transitionShorthandToEntries(decl.value)
+    }
+    case 'transition-property': {
+      return transitionPropertyEntries(decl.value)
+    }
+    case 'transition-duration': {
+      return transitionDurationEntries(decl.value)
+    }
+    case 'transition-timing-function': {
+      return transitionTimingFunctionEntries(decl.value)
+    }
+    case 'transition-delay': {
+      return transitionDelayEntries(decl.value)
+    }
+    case 'transform': {
+      return transformFunctionsToEntries(decl.value)
+    }
+    case 'rotate': {
+      return rotateToEntries(decl.value)
+    }
+    case 'translate': {
+      return translateToEntries(decl.value)
+    }
+    case 'scale': {
+      return scaleToEntries(decl.value)
+    }
+    default: {
+      return null
+    }
+  }
+}

package/src/core/parser/property.ts

@@ -0,0 +1,15 @@
+import type { ParsedComponent } from 'lightningcss'
+
+/**
+ * Serialize an `@property --x { initial-value: … }` body to plain text —
+ * enough for the downstream var() resolver to use as a fallback.
+ * @param initial Parsed-component AST node (or null when absent).
+ * @returns CSS-value string, or `null` when missing / unsupported shape.
+ */
+export function serializeInitialValue(initial: ParsedComponent | null | undefined): string | null {
+  if (!initial) return null
+  if (initial.type === 'literal') return initial.value
+  if (initial.type === 'custom-ident') return initial.value
+  if (initial.type === 'string') return initial.value
+  return null
+}