@tamagui/style-grammar 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/evaluateProgram.ts

@@ -0,0 +1,91 @@
+import { grammarPlatformGroups } from './config'
+import {
+  canonicalClauseModifier,
+  compareClausePrecedence,
+  createClausePrecedenceOrder,
+  getClausePrecedenceKeyFromKinds,
+  type ClausePrecedenceKey,
+  type ClausePrecedenceOrder,
+} from './clausePrecedence'
+import type { ModifierKind, ModifierRegistryView, ParsedValue } from './valueTypes'
+
+export interface ActiveConditions {
+  states: ReadonlySet<string>
+  themes: ReadonlySet<string>
+  media: ReadonlySet<string>
+  /** config declaration order; falls back to `media` insertion order in tests */
+  mediaOrder?: ClausePrecedenceOrder
+  platform: string
+  groups: (modifier: string) => boolean
+  /**
+   * whether a container query modifier (`@sm`, `@sm/card`) currently holds.
+   * Like groups, this is a callback because the answer lives with the component
+   * tree: resolving it needs the measured size of the nearest or named
+   * container, whose measurement timing is its own design item.
+   */
+  containers: (modifier: string) => boolean
+}
+
+/**
+ * Resolves a program to one payload using the shared fixed precedence key.
+ * Authored order only breaks exact-key ties, so a later restatement of the
+ * same normalized condition set wins while distinct condition sets are stable
+ * under reordering.
+ */
+export function evaluateProgram(
+  value: ParsedValue,
+  registry: ModifierRegistryView,
+  active: ActiveConditions
+): string | null {
+  let payload: string | null = null
+  let found = false
+  let best: ClausePrecedenceKey | undefined
+  const order = active.mediaOrder ?? createClausePrecedenceOrder(active.media)
+
+  for (let clauseIndex = 0; clauseIndex < value.clauses.length; clauseIndex++) {
+    const clause = value.clauses[clauseIndex]
+    let matches = true
+    const kinds: (ModifierKind | undefined)[] = []
+
+    for (
+      let modifierIndex = 0;
+      modifierIndex < clause.modifiers.length;
+      modifierIndex++
+    ) {
+      const modifier = canonicalClauseModifier(clause.modifiers[modifierIndex])
+      const kind = registry.get(modifier)
+      kinds.push(kind)
+
+      if (kind === 'state') {
+        matches = active.states.has(modifier)
+      } else if (kind === 'theme') {
+        matches = active.themes.has(modifier)
+      } else if (kind === 'media') {
+        matches = active.media.has(modifier)
+      } else if (kind === 'platform') {
+        matches =
+          modifier === active.platform ||
+          (grammarPlatformGroups.get(modifier)?.has(active.platform) ?? false)
+      } else if (kind === 'group') {
+        matches = active.groups(modifier)
+      } else if (kind === 'container') {
+        matches = active.containers(modifier)
+      } else {
+        matches = false
+      }
+
+      if (!matches) break
+    }
+
+    if (!matches) continue
+
+    const precedence = getClausePrecedenceKeyFromKinds(clause.modifiers, kinds, order)
+    if (best && compareClausePrecedence(precedence, best) < 0) continue
+
+    payload = clause.payload
+    best = precedence
+    found = true
+  }
+
+  return found ? payload : value.base
+}

package/src/fontShorthand.ts

@@ -0,0 +1,177 @@
+// The font shorthand: value-dependent splitting of the resetting CSS `font`
+// shorthand into per-longhand programs, completing the family model. The
+// micro-syntax is positional — optional style/weight components, then the
+// size (optionally `size/line-height`), then the family tail, which is joined
+// verbatim so comma lists and quoted names survive.
+//
+// Conservative by design: ambiguous or unsupported components (`normal`,
+// `small-caps`, stretch keywords, system font keywords, size keywords) error
+// so the whole value stays on the legacy path rather than converting into a
+// subtly different meaning.
+
+import { splitTopLevelComponents } from './backgroundFamily'
+import type { ParsedClause, ParsedValue } from './valueTypes'
+
+interface FontShorthandTargets {
+  style: readonly string[]
+  weight: readonly string[]
+  size: readonly string[]
+  lineHeight: readonly string[]
+  family: readonly string[]
+}
+
+/** authored prop -> the true longhands each component kind lands on */
+export const fontShorthandTargets: Readonly<Record<string, FontShorthandTargets>> = {
+  font: {
+    style: ['fontStyle'],
+    weight: ['fontWeight'],
+    size: ['fontSize'],
+    lineHeight: ['lineHeight'],
+    family: ['fontFamily'],
+  },
+}
+
+const styleKeywords = new Set(['italic', 'oblique'])
+const weightKeywords = new Set(['bold', 'bolder', 'lighter'])
+// `normal` is ambiguous (style, variant, or weight), and these have no
+// cross-platform longhand contribution
+const unsupportedKeywords = new Set([
+  'normal',
+  'small-caps',
+  'ultra-condensed',
+  'extra-condensed',
+  'condensed',
+  'semi-condensed',
+  'semi-expanded',
+  'expanded',
+  'extra-expanded',
+  'ultra-expanded',
+  // system font keywords have no longhand equivalent at all
+  'caption',
+  'icon',
+  'menu',
+  'message-box',
+  'small-caption',
+  'status-bar',
+])
+
+const sizePattern = /^-?(\d+\.?\d*|\.\d+)(?:[a-z%]+)?$/i
+const weightNumberPattern = /^[1-9]00$/
+
+export interface FontShorthandError {
+  code: 'unsupported-font-component'
+  component: string
+  where: 'base' | number
+}
+
+type FontKind = keyof FontShorthandTargets
+
+interface MutableProgram {
+  base: string | null
+  clauses: ParsedClause[]
+  present: boolean
+}
+
+export function splitFontValue(value: ParsedValue): {
+  entries: Array<{ property: string; value: ParsedValue }>
+  errors: FontShorthandError[]
+} {
+  const targets = fontShorthandTargets.font
+  const errors: FontShorthandError[] = []
+  const kinds: readonly FontKind[] = ['style', 'weight', 'size', 'lineHeight', 'family']
+  const programs: Record<FontKind, MutableProgram> = {
+    style: { base: null, clauses: [], present: false },
+    weight: { base: null, clauses: [], present: false },
+    size: { base: null, clauses: [], present: false },
+    lineHeight: { base: null, clauses: [], present: false },
+    family: { base: null, clauses: [], present: false },
+  }
+
+  for (let clauseIndex = -1; clauseIndex < value.clauses.length; clauseIndex++) {
+    const isBase = clauseIndex === -1
+    const payload = isBase ? value.base : value.clauses[clauseIndex].payload
+    if (payload === null) continue
+    const where = isBase ? ('base' as const) : clauseIndex
+
+    const components = splitTopLevelComponents(payload)
+    const found: Partial<Record<FontKind, string>> = {}
+    let sizeIndex = -1
+
+    for (let index = 0; index < components.length; index++) {
+      const component = components[index]
+      const lower = component.toLowerCase()
+      if (unsupportedKeywords.has(lower)) {
+        errors.push({ code: 'unsupported-font-component', component, where })
+        continue
+      }
+      if (styleKeywords.has(lower)) {
+        if (found.style !== undefined) {
+          errors.push({ code: 'unsupported-font-component', component, where })
+          continue
+        }
+        found.style = component
+        continue
+      }
+      if (weightKeywords.has(lower) || weightNumberPattern.test(component)) {
+        if (found.weight !== undefined) {
+          errors.push({ code: 'unsupported-font-component', component, where })
+          continue
+        }
+        found.weight = component
+        continue
+      }
+      const slash = component.indexOf('/')
+      const sizePart = slash === -1 ? component : component.slice(0, slash)
+      if (sizePattern.test(sizePart)) {
+        if (found.size !== undefined) {
+          errors.push({ code: 'unsupported-font-component', component, where })
+          continue
+        }
+        found.size = sizePart
+        if (slash !== -1) found.lineHeight = component.slice(slash + 1)
+        sizeIndex = index
+        // everything after the size is the family, joined verbatim
+        const family = components.slice(index + 1).join(' ')
+        if (family) found.family = family
+        break
+      }
+      // a component before the size that nothing classified
+      errors.push({ code: 'unsupported-font-component', component, where })
+    }
+
+    if (sizeIndex === -1) {
+      errors.push({
+        code: 'unsupported-font-component',
+        component: payload,
+        where,
+      })
+    }
+
+    for (const kind of kinds) {
+      const component = found[kind]
+      if (component === undefined) continue
+      const program = programs[kind]
+      program.present = true
+      if (isBase) {
+        program.base = component
+      } else {
+        program.clauses.push({
+          modifiers: value.clauses[clauseIndex].modifiers,
+          payload: component,
+        })
+      }
+    }
+  }
+
+  const entries: Array<{ property: string; value: ParsedValue }> = []
+  for (const kind of kinds) {
+    const program = programs[kind]
+    if (!program.present) continue
+    const shared: ParsedValue = { base: program.base, clauses: program.clauses }
+    for (const longhand of targets[kind]) {
+      entries.push({ property: longhand, value: shared })
+    }
+  }
+
+  return { entries, errors }
+}

package/src/geometricShorthand.ts

@@ -0,0 +1,105 @@
+// Geometric shorthand slot semantics for program values (design record,
+// "Bare numbers resolve config-first ... and per component value:
+// `p="4 8"` resolves both"). A multi-component payload on a geometric
+// shorthand distributes by the CSS slot pattern — sides alternate for two
+// values, three values mirror the second, four map directly — producing one
+// SINGLE-component program per longhand. Without this, every side received
+// the whole multi-value payload and the browser dropped the declaration
+// silently.
+//
+// Function values and slash syntax (`borderRadius="8px / 4px"`) do not
+// distribute faithfully and return an error, which keeps the value on the
+// single-program path where the payload-shape diagnostic reports it.
+
+import { splitTopLevelComponents } from './backgroundFamily'
+import { longhandExpansionTable } from './programs'
+import type { ParsedClause, ParsedValue } from './valueTypes'
+
+// identical index patterns for box sides (T/R/B/L) and radius corners
+// (TL/TR/BR/BL); two-slot pairs (horizontal/vertical, gap) take one or two
+const slotPatterns: Record<number, Record<number, readonly number[]>> = {
+  4: { 1: [0, 0, 0, 0], 2: [0, 1, 0, 1], 3: [0, 1, 2, 1], 4: [0, 1, 2, 3] },
+  2: { 1: [0, 0], 2: [0, 1] },
+}
+
+export interface GeometricShorthandError {
+  code: 'unsupported-geometric-payload'
+  payload: string
+  where: 'base' | number
+}
+
+/**
+ * Splits a geometric shorthand's parsed program into per-longhand programs by
+ * slot. Returns null when `prop` is not a geometric shorthand, or when every
+ * payload is single-component (nothing to distribute — the caller's ordinary
+ * expansion handles that identically and cheaper).
+ */
+export function splitGeometricShorthandValue(
+  prop: string,
+  value: ParsedValue
+): {
+  entries: Array<{ property: string; value: ParsedValue }>
+  errors: GeometricShorthandError[]
+} | null {
+  const longhands = longhandExpansionTable[prop]
+  if (!longhands) return null
+  const patterns = slotPatterns[longhands.length]
+  if (!patterns) return null
+
+  // fast path: nothing multi-component, nothing to do
+  let hasMulti = false
+  const payloadComponents: string[][] = []
+  for (let index = -1; index < value.clauses.length; index++) {
+    const payload = index === -1 ? value.base : value.clauses[index].payload
+    if (payload === null) {
+      payloadComponents.push([])
+      continue
+    }
+    if (payload.includes('/')) return null
+    const components = splitTopLevelComponents(payload)
+    payloadComponents.push(components)
+    if (components.length > 1) hasMulti = true
+  }
+  if (!hasMulti) return null
+
+  const errors: GeometricShorthandError[] = []
+  // per longhand: pick this slot's component from every payload
+  const perLonghand: Array<{ base: string | null; clauses: ParsedClause[] }> =
+    longhands.map(() => ({ base: null, clauses: [] }))
+
+  for (let index = -1; index < value.clauses.length; index++) {
+    const payload = index === -1 ? value.base : value.clauses[index].payload
+    if (payload === null) continue
+    const components = payloadComponents[index + 1]
+    const pattern = patterns[components.length]
+    if (!pattern) {
+      errors.push({
+        code: 'unsupported-geometric-payload',
+        payload,
+        where: index === -1 ? 'base' : index,
+      })
+      continue
+    }
+    for (let slot = 0; slot < longhands.length; slot++) {
+      const component = components[pattern[slot]]
+      if (index === -1) {
+        perLonghand[slot].base = component
+      } else {
+        perLonghand[slot].clauses.push({
+          modifiers: value.clauses[index].modifiers,
+          payload: component,
+        })
+      }
+    }
+  }
+
+  if (errors.length) return { entries: [], errors }
+
+  return {
+    entries: longhands.map((longhand, slot) => ({
+      property: longhand,
+      value: { base: perLonghand[slot].base, clauses: perLonghand[slot].clauses },
+    })),
+    errors,
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './runtime'