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

package/src/transition.ts

@@ -0,0 +1,553 @@
+export type TransitionBehavior = 'normal' | 'allow-discrete'
+
+export interface CSSTransitionTiming {
+  type: 'css'
+  duration: string
+  timingFunction: string
+}
+
+export interface PresetTransitionTiming {
+  type: 'preset'
+  name: string
+  config?: Readonly<Record<string, unknown>>
+}
+
+export type TransitionTiming = CSSTransitionTiming | PresetTransitionTiming
+
+export interface TransitionEntry {
+  property: string
+  timing: TransitionTiming
+  delay: string
+  behavior: TransitionBehavior
+}
+
+export interface TransitionIR {
+  kind: 'transition'
+  entries: readonly TransitionEntry[]
+  enter?: TransitionEntry
+  exit?: TransitionEntry
+  config?: Readonly<Record<string, unknown>>
+}
+
+export interface TransitionGlobalIR {
+  kind: 'global'
+  value: 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset'
+}
+
+export type ParsedTransition = TransitionIR | TransitionGlobalIR
+
+export interface TransitionDiagnostic {
+  code:
+    | 'transition-empty-item'
+    | 'transition-invalid-token'
+    | 'transition-duplicate-component'
+    | 'transition-invalid-duration'
+    | 'transition-invalid-list'
+  message: string
+  item?: string
+  token?: string
+}
+
+export type TransitionParseResult =
+  | {
+      ok: true
+      value: ParsedTransition
+    }
+  | {
+      ok: false
+      diagnostics: readonly TransitionDiagnostic[]
+    }
+
+export interface TransitionLonghands {
+  transitionProperty?: string
+  transitionDuration?: string
+  transitionTimingFunction?: string
+  transitionDelay?: string
+  transitionBehavior?: string
+}
+
+const globalValues = new Set(['inherit', 'initial', 'revert', 'revert-layer', 'unset'])
+const timingKeywords = new Set([
+  'ease',
+  'linear',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'step-start',
+  'step-end',
+])
+const behaviorValues = new Set(['normal', 'allow-discrete'])
+const reservedPresetNames = new Set([
+  ...globalValues,
+  ...timingKeywords,
+  ...behaviorValues,
+  'all',
+  'none',
+])
+const noPresetNames: ReadonlySet<string> = new Set()
+const identifierPattern = /^-?(?:[_a-zA-Z]|[^\0-\x7f])(?:[-_a-zA-Z0-9]|[^\0-\x7f])*$/
+const timePattern = /^([+-]?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)$/
+
+function splitTopLevel(input: string, separator: ',' | ' '): string[] | null {
+  const values: string[] = []
+  let start = 0
+  let depth = 0
+  let quote = ''
+
+  for (let index = 0; index < input.length; index++) {
+    const character = input[index]
+    if (quote) {
+      if (character === '\\') index++
+      else if (character === quote) quote = ''
+      continue
+    }
+    if (character === '"' || character === "'") {
+      quote = character
+      continue
+    }
+    if (character === '(') {
+      depth++
+      continue
+    }
+    if (character === ')') {
+      depth--
+      if (depth < 0) return null
+      continue
+    }
+    if (depth !== 0) continue
+
+    const matches = separator === ',' ? character === ',' : /\s/.test(character)
+    if (!matches) continue
+
+    const value = input.slice(start, index).trim()
+    if (value) values.push(value)
+    else if (separator === ',') values.push('')
+    start = index + 1
+    if (separator === ' ') {
+      while (start < input.length && /\s/.test(input[start])) start++
+      index = start - 1
+    }
+  }
+
+  if (depth !== 0 || quote) return null
+  values.push(input.slice(start).trim())
+  return values
+}
+
+function isTime(value: string): boolean {
+  return timePattern.test(value)
+}
+
+function isTimingFunction(value: string): boolean {
+  if (timingKeywords.has(value)) return true
+  if (/^cubic-bezier\(\s*[^)]+\s*\)$/.test(value)) {
+    const values = value.slice(value.indexOf('(') + 1, -1).split(',')
+    if (values.length !== 4) return false
+    const numbers: number[] = []
+    for (let index = 0; index < values.length; index++) {
+      const number = Number(values[index].trim())
+      if (!Number.isFinite(number)) return false
+      numbers.push(number)
+    }
+    return numbers[0] >= 0 && numbers[0] <= 1 && numbers[2] >= 0 && numbers[2] <= 1
+  }
+  if (/^steps\(\s*[^)]+\s*\)$/.test(value)) {
+    const parts = value.slice(value.indexOf('(') + 1, -1).split(',')
+    if (parts.length > 2) return false
+    const count = Number(parts[0].trim())
+    if (!Number.isInteger(count) || count <= 0) return false
+    const position = parts[1]?.trim()
+    if (
+      position !== undefined &&
+      !/^(jump-start|jump-end|jump-none|jump-both|start|end)$/.test(position)
+    ) {
+      return false
+    }
+    return position !== 'jump-none' || count > 1
+  }
+  if (/^linear\(\s*[^)]+\s*\)$/.test(value)) return true
+  return false
+}
+
+function parseSingleTransition(item: string): TransitionEntry | TransitionDiagnostic {
+  const tokens = splitTopLevel(item, ' ')
+  if (tokens === null || tokens.length === 0) {
+    return {
+      code: 'transition-invalid-token',
+      item,
+      message: `"${item}" is not a balanced CSS transition`,
+    }
+  }
+  for (let index = 0; index < tokens.length; index++) {
+    if (!tokens[index]) {
+      return {
+        code: 'transition-invalid-token',
+        item,
+        message: `"${item}" is not a balanced CSS transition`,
+      }
+    }
+  }
+
+  let property: string | undefined
+  let duration: string | undefined
+  let delay: string | undefined
+  let timingFunction: string | undefined
+  let behavior: TransitionBehavior | undefined
+
+  for (const token of tokens) {
+    if (globalValues.has(token)) {
+      return {
+        code: 'transition-invalid-list',
+        item,
+        token,
+        message: `CSS-wide value "${token}" must be the whole transition`,
+      }
+    }
+    if (isTime(token)) {
+      if (duration === undefined) {
+        if (Number(token.match(timePattern)?.[1]) < 0) {
+          return {
+            code: 'transition-invalid-duration',
+            item,
+            token,
+            message: `transition duration "${token}" cannot be negative`,
+          }
+        }
+        duration = token
+      } else if (delay === undefined) {
+        delay = token
+      } else {
+        return {
+          code: 'transition-duplicate-component',
+          item,
+          token,
+          message: `"${item}" has more than two time values`,
+        }
+      }
+      continue
+    }
+
+    if (isTimingFunction(token)) {
+      if (timingFunction !== undefined) {
+        return {
+          code: 'transition-duplicate-component',
+          item,
+          token,
+          message: `"${item}" has more than one timing function`,
+        }
+      }
+      timingFunction = token
+      continue
+    }
+
+    if (behaviorValues.has(token)) {
+      if (behavior !== undefined) {
+        return {
+          code: 'transition-duplicate-component',
+          item,
+          token,
+          message: `"${item}" has more than one transition behavior`,
+        }
+      }
+      behavior = token as TransitionBehavior
+      continue
+    }
+
+    if (identifierPattern.test(token) || /^--[-_a-zA-Z0-9]+$/.test(token)) {
+      if (property !== undefined) {
+        return {
+          code: 'transition-duplicate-component',
+          item,
+          token,
+          message: `"${item}" has more than one transition property`,
+        }
+      }
+      property = token
+      continue
+    }
+
+    return {
+      code: 'transition-invalid-token',
+      item,
+      token,
+      message: `"${token}" is not valid in a CSS transition`,
+    }
+  }
+
+  if (
+    property === 'none' &&
+    (duration !== undefined ||
+      delay !== undefined ||
+      timingFunction !== undefined ||
+      behavior !== undefined)
+  ) {
+    return {
+      code: 'transition-invalid-list',
+      item,
+      message: '"none" cannot be combined with other transition components',
+    }
+  }
+
+  return {
+    property: property ?? 'all',
+    timing: {
+      type: 'css',
+      duration: duration ?? '0s',
+      timingFunction: timingFunction ?? 'ease',
+    },
+    delay: delay ?? '0s',
+    behavior: behavior ?? 'normal',
+  }
+}
+
+/**
+ * parses CSS transition shorthand or an exact configured preset name.
+ *
+ * duration-shaped values and css-reserved names always use css semantics.
+ * preset matching is exact and never infers aliases.
+ */
+export function parseTransition(
+  input: string,
+  presetNames: ReadonlySet<string> = noPresetNames
+): TransitionParseResult {
+  const value = input.trim()
+  if (!value) {
+    return {
+      ok: false,
+      diagnostics: [
+        {
+          code: 'transition-empty-item',
+          message: 'transition cannot be empty',
+        },
+      ],
+    }
+  }
+
+  if (globalValues.has(value)) {
+    return {
+      ok: true,
+      value: {
+        kind: 'global',
+        value: value as TransitionGlobalIR['value'],
+      },
+    }
+  }
+
+  if (
+    identifierPattern.test(value) &&
+    !reservedPresetNames.has(value) &&
+    presetNames.has(value)
+  ) {
+    return {
+      ok: true,
+      value: {
+        kind: 'transition',
+        entries: [
+          {
+            property: 'all',
+            timing: { type: 'preset', name: value },
+            delay: '0s',
+            behavior: 'normal',
+          },
+        ],
+      },
+    }
+  }
+
+  const items = splitTopLevel(value, ',')
+  if (items === null) {
+    return {
+      ok: false,
+      diagnostics: [
+        {
+          code: 'transition-invalid-token',
+          item: value,
+          message: `"${value}" is not a balanced CSS transition`,
+        },
+      ],
+    }
+  }
+
+  const entries: TransitionEntry[] = []
+  const diagnostics: TransitionDiagnostic[] = []
+  for (const item of items) {
+    if (!item) {
+      diagnostics.push({
+        code: 'transition-empty-item',
+        message: 'transition lists cannot contain an empty item',
+      })
+      continue
+    }
+    const parsed = parseSingleTransition(item)
+    if ('code' in parsed) diagnostics.push(parsed)
+    else entries.push(parsed)
+  }
+
+  let hasNone = false
+  for (let index = 0; index < entries.length; index++) {
+    if (entries[index].property === 'none') {
+      hasNone = true
+      break
+    }
+  }
+  if (hasNone && entries.length > 1) {
+    diagnostics.push({
+      code: 'transition-invalid-list',
+      message: '"none" cannot be combined with other transition items',
+    })
+  }
+
+  return diagnostics.length
+    ? { ok: false, diagnostics }
+    : { ok: true, value: { kind: 'transition', entries } }
+}
+
+function parseLonghandList(value: string | undefined, fallback: string): string[] | null {
+  if (value === undefined) return [fallback]
+  const values = splitTopLevel(value, ',')
+  if (!values?.length) return null
+  for (let index = 0; index < values.length; index++) {
+    if (!values[index]) return null
+  }
+  return values
+}
+
+/**
+ * lowers the five CSS transition longhands into the same IR as the shorthand.
+ * css list repetition is based on transition-property, as in the browser.
+ */
+export function parseTransitionLonghands(
+  input: TransitionLonghands
+): TransitionParseResult {
+  const properties = parseLonghandList(input.transitionProperty, 'all')
+  const durations = parseLonghandList(input.transitionDuration, '0s')
+  const timings = parseLonghandList(input.transitionTimingFunction, 'ease')
+  const delays = parseLonghandList(input.transitionDelay, '0s')
+  const behaviors = parseLonghandList(input.transitionBehavior, 'normal')
+
+  if (!properties || !durations || !timings || !delays || !behaviors) {
+    return {
+      ok: false,
+      diagnostics: [
+        {
+          code: 'transition-invalid-list',
+          message: 'transition longhands must be non-empty comma-separated lists',
+        },
+      ],
+    }
+  }
+
+  const entries: TransitionEntry[] = []
+  const diagnostics: TransitionDiagnostic[] = []
+  for (let index = 0; index < properties.length; index++) {
+    const property = properties[index]
+    const duration = durations[index % durations.length]
+    const timingFunction = timings[index % timings.length]
+    const delay = delays[index % delays.length]
+    const behavior = behaviors[index % behaviors.length]
+
+    if (
+      globalValues.has(property) ||
+      globalValues.has(duration) ||
+      globalValues.has(timingFunction) ||
+      globalValues.has(delay) ||
+      globalValues.has(behavior)
+    ) {
+      diagnostics.push({
+        code: 'transition-invalid-list',
+        message:
+          'CSS-wide values cannot be mixed into transition longhand lists; use the transition shorthand global value',
+      })
+      break
+    }
+    if (!(identifierPattern.test(property) || /^--[-_a-zA-Z0-9]+$/.test(property))) {
+      diagnostics.push({
+        code: 'transition-invalid-token',
+        token: property,
+        message: `"${property}" is not a transition property`,
+      })
+    }
+    if (!isTime(duration) || Number(duration.match(timePattern)?.[1]) < 0) {
+      diagnostics.push({
+        code: 'transition-invalid-duration',
+        token: duration,
+        message: `"${duration}" is not a non-negative transition duration`,
+      })
+    }
+    if (!isTimingFunction(timingFunction)) {
+      diagnostics.push({
+        code: 'transition-invalid-token',
+        token: timingFunction,
+        message: `"${timingFunction}" is not a transition timing function`,
+      })
+    }
+    if (!isTime(delay)) {
+      diagnostics.push({
+        code: 'transition-invalid-token',
+        token: delay,
+        message: `"${delay}" is not a transition delay`,
+      })
+    }
+    if (!behaviorValues.has(behavior)) {
+      diagnostics.push({
+        code: 'transition-invalid-token',
+        token: behavior,
+        message: `"${behavior}" is not a transition behavior`,
+      })
+    }
+
+    entries.push({
+      property,
+      timing: { type: 'css', duration, timingFunction },
+      delay,
+      behavior: behavior as TransitionBehavior,
+    })
+  }
+
+  let hasNone = false
+  for (let index = 0; index < properties.length; index++) {
+    if (properties[index] === 'none') {
+      hasNone = true
+      break
+    }
+  }
+  if (hasNone && properties.length > 1) {
+    diagnostics.push({
+      code: 'transition-invalid-list',
+      message: '"none" cannot be combined with other transition properties',
+    })
+  }
+
+  return diagnostics.length
+    ? { ok: false, diagnostics }
+    : { ok: true, value: { kind: 'transition', entries } }
+}
+
+export function serializeTransition(value: ParsedTransition): string | null {
+  if (value.kind === 'global') return value.value
+  if (value.enter || value.exit || value.config) return null
+  for (let index = 0; index < value.entries.length; index++) {
+    if (value.entries[index].timing.type === 'preset') return null
+  }
+
+  let serialized = ''
+  for (let index = 0; index < value.entries.length; index++) {
+    const entry = value.entries[index]
+    if (index) serialized += ', '
+    if (entry.timing.type !== 'css') return null
+    if (entry.property === 'none') {
+      if (
+        entry.timing.duration !== '0s' ||
+        entry.timing.timingFunction !== 'ease' ||
+        entry.delay !== '0s' ||
+        entry.behavior !== 'normal'
+      ) {
+        return null
+      }
+      serialized += 'none'
+      continue
+    }
+    serialized += `${entry.property} ${entry.timing.duration} ${entry.timing.timingFunction} ${entry.delay} ${entry.behavior}`
+  }
+  return serialized
+}

package/src/transitionAlign.ts

@@ -0,0 +1,165 @@
+// Phase 6 item 4: align transition shorthand and longhand behavior.
+//
+// Ruling (2026-07-31, design record "Web-aligned transitions"): transitions
+// follow the border-family precedent — last-wins per longhand in authored
+// order, the shorthand expands-and-resets — because the five transition
+// longhands are real independent CSS longhands whose composition CSS fully
+// defines. The merge SUBSTRATE is the five longhand LISTS, not the zipped
+// entries: `transition="opacity 200ms"` followed by `transitionDelay="50ms"`
+// must yield opacity/200ms/50ms, which only works when delay replaces the
+// delay list and the zip (property list drives, shorter lists cycle) happens
+// at the end. Zipping and validation have one owner: final assembly goes
+// through parseTransitionLonghands.
+//
+// The one preset exception, where the transform no-invented-composition rule
+// applies: a preset occupies the fused duration+timingFunction pair and is
+// not decomposable into CSS components, so a duration or timing-function
+// longhand AFTER a preset shorthand is a diagnostic naming the fix.
+// property/delay/behavior compose freely around a preset. A longhand after a
+// global-value shorthand (`transition="inherit"`) is a diagnostic for the
+// same reason: the global is whole-value and per-longhand override of it is
+// not representable without pretending to decompose it.
+//
+// Conditional transition clauses (`transition="200ms hover:400ms"`) are
+// EXPLICITLY DEFERRED, not unconsidered: the record does not promise them and
+// they would pull the program engine into the transition IR.
+
+import {
+  parseTransition,
+  parseTransitionLonghands,
+  type PresetTransitionTiming,
+  type TransitionEntry,
+  type TransitionLonghands,
+  type TransitionParseResult,
+} from './transition'
+
+export type TransitionLonghandName =
+  | 'transitionProperty'
+  | 'transitionDuration'
+  | 'transitionTimingFunction'
+  | 'transitionDelay'
+  | 'transitionBehavior'
+
+export interface TransitionContribution {
+  /** the authored prop, in authored order */
+  prop: 'transition' | TransitionLonghandName
+  value: string
+}
+
+interface MergeState {
+  global: string | null
+  preset: PresetTransitionTiming | null
+  /** each slot holds the LAST contribution's list text, or undefined = CSS default */
+  lists: Partial<Record<TransitionLonghandName, string>>
+}
+
+const timingLonghands: ReadonlySet<TransitionLonghandName> = new Set([
+  'transitionDuration',
+  'transitionTimingFunction',
+])
+
+function listText(values: readonly string[]): string {
+  return values.join(', ')
+}
+
+/**
+ * Merges any mix of `transition` shorthand and longhand contributions, in
+ * authored order, into one TransitionIR. Last-wins per longhand; the
+ * shorthand resets all five.
+ */
+export function alignTransitionContributions(
+  contributions: readonly TransitionContribution[],
+  presetNames?: ReadonlySet<string>
+): TransitionParseResult {
+  const state: MergeState = { global: null, preset: null, lists: {} }
+
+  for (const contribution of contributions) {
+    if (contribution.prop === 'transition') {
+      const parsed = parseTransition(contribution.value, presetNames)
+      if (!parsed.ok) return parsed
+
+      // a shorthand resets everything that came before it
+      state.global = null
+      state.preset = null
+      state.lists = {}
+
+      if (parsed.value.kind === 'global') {
+        state.global = parsed.value.value
+        continue
+      }
+      const entries = parsed.value.entries
+      const presetEntry = entries.find((entry) => entry.timing.type === 'preset')
+      if (presetEntry) {
+        state.preset = presetEntry.timing as PresetTransitionTiming
+        state.lists.transitionProperty = listText(entries.map((entry) => entry.property))
+        state.lists.transitionDelay = listText(entries.map((entry) => entry.delay))
+        state.lists.transitionBehavior = listText(entries.map((entry) => entry.behavior))
+        continue
+      }
+      state.lists.transitionProperty = listText(entries.map((entry) => entry.property))
+      state.lists.transitionDuration = listText(
+        entries.map((entry) => (entry.timing as { duration: string }).duration)
+      )
+      state.lists.transitionTimingFunction = listText(
+        entries.map(
+          (entry) => (entry.timing as { timingFunction: string }).timingFunction
+        )
+      )
+      state.lists.transitionDelay = listText(entries.map((entry) => entry.delay))
+      state.lists.transitionBehavior = listText(entries.map((entry) => entry.behavior))
+      continue
+    }
+
+    if (state.global) {
+      return {
+        ok: false,
+        diagnostics: [
+          {
+            code: 'transition-invalid-list',
+            token: contribution.prop,
+            message: `"${contribution.prop}" cannot override the CSS-wide transition "${state.global}" per longhand; restate the whole transition`,
+          },
+        ],
+      }
+    }
+    if (state.preset && timingLonghands.has(contribution.prop)) {
+      return {
+        ok: false,
+        diagnostics: [
+          {
+            code: 'transition-invalid-list',
+            token: contribution.prop,
+            message: `"${contribution.prop}" cannot partially override the "${state.preset.name}" preset — a preset's timing is not decomposable into CSS components; restate \`transition\` with CSS timing or change the preset`,
+          },
+        ],
+      }
+    }
+    state.lists[contribution.prop] = contribution.value
+  }
+
+  if (state.global) {
+    return {
+      ok: true,
+      value: { kind: 'global', value: state.global as any },
+    }
+  }
+
+  if (state.preset) {
+    // validate and zip the three CSS-shaped slots through the one owner, then
+    // transplant the preset timing onto every zipped entry
+    const zipped = parseTransitionLonghands({
+      transitionProperty: state.lists.transitionProperty,
+      transitionDelay: state.lists.transitionDelay,
+      transitionBehavior: state.lists.transitionBehavior,
+    })
+    if (!zipped.ok || zipped.value.kind !== 'transition') return zipped
+    const preset = state.preset
+    const entries: TransitionEntry[] = zipped.value.entries.map((entry) => ({
+      ...entry,
+      timing: preset,
+    }))
+    return { ok: true, value: { kind: 'transition', entries } }
+  }
+
+  return parseTransitionLonghands(state.lists as TransitionLonghands)
+}