rnwind 0.0.1 → 0.0.3

package/src/core/parser/types.ts

@@ -0,0 +1,45 @@
+/**
+ * Dynamic style marker for values that depend on runtime insets.
+ * The parser emits one of these in place of a concrete number whenever
+ * a declaration uses `env(safe-area-inset-*)`, `max(env(...), n)`, or
+ * `calc(env(...) + n)`. The runtime (see `lookup-css.ts` slow path)
+ * reads the current insets from `useInsets()` and resolves to a
+ * concrete number per render.
+ *
+ * Marker shape is intentionally object-literal so `JSON.stringify` /
+ * style-builder emission roundtrip losslessly. The build-side
+ * `envelopeSafeMarkers` converts these markers into the
+ * `{__safeStyle: [[cssKey, sideTag, or, offset], ...]}` envelope the
+ * runtime checks via a single property read.
+ */
+export interface SafeAreaMarker {
+  readonly __safe: 't' | 'r' | 'b' | 'l' | 'screen-minus-y'
+  /** `max(env(...), or)` — fallback value in px. */
+  readonly or?: number
+  /** `calc(env(...) + offset)` — stacked additional value in px. */
+  readonly offset?: number
+}
+
+/**
+ * RN-compatible style scalar / compound. Covers everything we emit:
+ *  - primitives (`16`, `'#fff'`, `'flex-start'`)
+ *  - arrays (`['color', 'opacity']` for `transitionProperty`,
+ *    `[{rotate: '45deg'}, {scaleX: 2}]` for `transform`)
+ *  - object records (`{width, height}` for `shadowOffset`)
+ *  - safe-area markers (`{__safe: 't', or?: 16, offset?: 0}`) — resolved
+ *    against the active insets at render time.
+ */
+export type RNStyleValue =
+  | string
+  | number
+  | readonly string[]
+  | readonly number[]
+  | readonly Record<string, string | number>[]
+  | { readonly [key: string]: string | number }
+  | SafeAreaMarker
+
+/** Flat RN style object (what `StyleSheet.create` accepts). */
+export type RNStyle = Record<string, RNStyleValue>
+
+/** One `[key, value]` pair the converter emits from a single declaration. */
+export type RNEntry = readonly [string, RNStyleValue]

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

@@ -0,0 +1,97 @@
+import type { Declaration as LcDeclaration } from 'lightningcss'
+import { lineHeightToEntries } from './typography'
+import type { RNEntry } from './types'
+
+/**
+ * Build the RN `textDecorationLine` entry — string identity for the
+ * single-line cases, joined-string for the array shape.
+ * @param value Typed text-decoration-line.
+ * @returns Single-entry list with `textDecorationLine`.
+ */
+function textDecorationLineToEntries(value: LcDeclaration['value']): readonly RNEntry[] {
+  if (value === 'none') return [['textDecorationLine', 'none']]
+  if (typeof value === 'string') return [['textDecorationLine', value]]
+  if (Array.isArray(value)) return [['textDecorationLine', value.join(' ')]]
+  return []
+}
+
+/**
+ * Build the RN `aspectRatio` entry from lightningcss's typed value.
+ * Drops `auto` (no RN equivalent).
+ * @param value Typed aspect-ratio value.
+ * @param value.auto Whether the value resolved to `auto`.
+ * @param value.ratio Numeric `[width, height]` ratio (or null/undefined).
+ * @returns Single-entry list or empty.
+ */
+function aspectRatioToEntries(value: { auto?: boolean; ratio?: readonly [number, number] | null }): readonly RNEntry[] {
+  if (value.auto) return []
+  if (!value.ratio) return []
+  const [w, h] = value.ratio
+  if (h === 0) return []
+  return [['aspectRatio', w / h]]
+}
+
+/**
+ * Build the RN `letterSpacing` entry. RN expects pixel numbers; rem
+ * lengths are scaled to px (16-px base).
+ * @param value Typed letter-spacing value.
+ * @returns Single-entry list or empty.
+ */
+function letterSpacingToEntries(value: LcDeclaration['value']): readonly RNEntry[] {
+  if (typeof value !== 'object') return []
+  const tagged = value as { type?: string; value?: { type?: string; value?: { unit?: string; value?: number } } }
+  if (tagged.type === 'normal') return [['letterSpacing', 0]]
+  const inner = tagged.value
+  if (inner?.type !== 'value' || !inner.value) return []
+  const { unit, value: px } = inner.value
+  if (typeof px !== 'number') return []
+  return [['letterSpacing', unit === 'px' ? px : px * 16]]
+}
+
+/**
+ * Lower a CSS `text-align` keyword to one RN's `textAlign` accepts. RN
+ * has no logical `start`/`end`, so map them to physical sides (LTR
+ * default); every other keyword (left/right/center/justify/auto) is
+ * already valid and passes through.
+ * @param align CSS text-align keyword.
+ * @returns RN-valid textAlign keyword.
+ */
+function physicalTextAlign(align: string): string {
+  if (align === 'start') return 'left'
+  if (align === 'end') return 'right'
+  return align
+}
+
+/**
+ * Dispatch typography declarations rnwind cares about (text-align,
+ * text-transform, text-decoration-line, line-height, letter-spacing,
+ * aspect-ratio). Returns null when the property isn't one of these 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 dispatchTypographyDeclaration(decl: LcDeclaration): readonly RNEntry[] | null {
+  switch (decl.property) {
+    case 'text-align': {
+      return [['textAlign', physicalTextAlign(String(decl.value))]]
+    }
+    case 'text-transform': {
+      return [['textTransform', decl.value.case ?? 'none']]
+    }
+    case 'text-decoration-line': {
+      return textDecorationLineToEntries(decl.value)
+    }
+    case 'aspect-ratio': {
+      return aspectRatioToEntries(decl.value)
+    }
+    case 'line-height': {
+      return lineHeightToEntries(decl.value)
+    }
+    case 'letter-spacing': {
+      return letterSpacingToEntries(decl.value)
+    }
+    default: {
+      return null
+    }
+  }
+}

package/src/core/parser/typography.ts

@@ -0,0 +1,83 @@
+import type { Display, FontSize, FontWeight, LineHeight, ZIndex } from 'lightningcss'
+import { dimensionPercentageToNumber } from './length'
+import type { RNEntry } from './types'
+
+/**
+ * Expand lightningcss's `Display` typed value to an RN `{display}` entry.
+ *  - `keyword` variant (`none`, `flex`, `grid`, `inline`, …) passes through.
+ *  - `pair` variant (the modern CSS model — `{inside: {type}, outside,
+ *    isListItem}`) collapses to RN's `'flex'` / `'grid'` when the inside
+ *    type matches, otherwise skips.
+ * @param value Typed display value.
+ * @returns RN entries (zero or one).
+ */
+export function displayToEntries(value: Display): readonly RNEntry[] {
+  if (value.type === 'keyword') return [['display', value.value]]
+  if (value.type === 'pair') {
+    const inside = value.inside.type
+    // `flow` is the default inside mode — maps to `block` / `inline` /
+    // `inline-block` based on the outer; RN only distinguishes `block`-ish
+    // from `flex`, so collapse the `flow` family to the `outside` keyword.
+    if (inside === 'flow') return [['display', value.outside]]
+    if (inside === 'flex') return [['display', 'flex']]
+    if (inside === 'grid') return [['display', 'grid']]
+  }
+  return []
+}
+
+/**
+ * Convert `FontSize` to a pixel number. The `length` variant carries a
+ * `DimensionPercentage`; `absolute` / `relative` keyword variants have no
+ * RN numeric equivalent and get dropped.
+ * @param value Typed font-size value.
+ * @returns Pixel size, or `null` when not a pure length.
+ */
+export function fontSizeToPx(value: FontSize): number | null {
+  if (value.type !== 'length') return null
+  const length = dimensionPercentageToNumber(value.value)
+  if (typeof length !== 'number') return null
+  return length
+}
+
+/**
+ * Convert `FontWeight` to the form RN accepts — numbers for absolute
+ * weights, `'bolder'` / `'lighter'` keywords pass through as strings.
+ * @param value Typed font-weight value.
+ * @returns RN font weight.
+ */
+export function fontWeightToValue(value: FontWeight): number | string {
+  if (value.type === 'absolute') {
+    if (value.value.type === 'weight') return value.value.value
+    return value.value.type
+  }
+  return value.type
+}
+
+/**
+ * Coerce `z-index` to a number. `{type: 'auto'}` has no RN equivalent so
+ * it collapses to 0.
+ * @param value Typed z-index value.
+ * @returns Integer z-index.
+ */
+export function zIndexToNumber(value: ZIndex): number {
+  if (value.type === 'auto') return 0
+  return value.value
+}
+
+/**
+ * Convert lightningcss `LineHeight` into RN's `lineHeight` entry. RN
+ * accepts a single number (pixel value). For unitless multipliers we
+ * multiply by the default 16-px font size (RN's base); for px values we
+ * pass through; percentages are approximated the same way.
+ * @param value Typed line-height.
+ * @returns RN entry.
+ */
+export function lineHeightToEntries(value: LineHeight): readonly RNEntry[] {
+  if (value.type === 'normal') return [['lineHeight', 20]]
+  if (value.type === 'number') return [['lineHeight', Math.round(value.value * 16 * 10_000) / 10_000]]
+  if (value.type === 'length') {
+    const px = dimensionPercentageToNumber(value.value)
+    if (typeof px === 'number') return [['lineHeight', Math.round(px * 10_000) / 10_000]]
+  }
+  return []
+}