@tamagui/web 3.0.0-beta.831.1 → 3.0.0-beta.889.1

package/src/helpers/parseBorderShorthand.native.ts

@@ -1,18 +1,14 @@
 import type { PropMappedValue } from '../types'
+import { classifyBorderComponents } from './borderComponents'
 
-// border style keywords
-const borderStyles = new Set([
-  'solid',
-  'dashed',
-  'dotted',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-  'none',
-  'hidden',
-])
+// native width props want numbers: px and unitless become numbers, the CSS
+// width keywords map to their user-agent px values, anything else passes as-is
+export function toNativeBorderWidth(width: string): string | number {
+  if (width === 'thin') return 1
+  if (width === 'medium') return 3
+  if (width === 'thick') return 5
+  return width.endsWith('px') || !/[a-z%]/i.test(width) ? Number.parseFloat(width) : width
+}
 
 // parses CSS border shorthand: "<width> <style> <color>"
 // components can appear in any order, all are optional
@@ -28,46 +24,28 @@ export function parseBorderShorthand(value: string): PropMappedValue | undefined
     ]
   }
 
-  const parts = value.trim().split(/\s+/)
-  let borderWidth: string | number | undefined
-  let borderStyle: string | undefined
-  let borderColor: string | undefined
-
-  for (const part of parts) {
-    // check if it's a border style keyword
-    if (borderStyles.has(part)) {
-      borderStyle = part
-    }
-    // check if it's a length (number or ends with px/em/rem/etc)
-    else if (/^[\d.]+(?:px|em|rem|%|pt|vw|vh)?$/.test(part)) {
-      const num = parseFloat(part)
-      borderWidth = part.endsWith('px') || !part.match(/[a-z%]/i) ? num : part
-    }
-    // otherwise assume it's a color
-    else {
-      borderColor = part
-    }
-  }
+  const { width, style, color } = classifyBorderComponents(value)
 
   const result: PropMappedValue = []
 
   // expand to individual width props (RN doesn't support borderWidth shorthand)
-  if (borderWidth !== undefined) {
-    result.push(['borderTopWidth', borderWidth])
-    result.push(['borderRightWidth', borderWidth])
-    result.push(['borderBottomWidth', borderWidth])
-    result.push(['borderLeftWidth', borderWidth])
+  if (width !== undefined) {
+    const nativeWidth = toNativeBorderWidth(width)
+    result.push(['borderTopWidth', nativeWidth])
+    result.push(['borderRightWidth', nativeWidth])
+    result.push(['borderBottomWidth', nativeWidth])
+    result.push(['borderLeftWidth', nativeWidth])
   }
   // borderStyle is supported as-is on native
-  if (borderStyle !== undefined) {
-    result.push(['borderStyle', borderStyle])
+  if (style !== undefined) {
+    result.push(['borderStyle', style])
   }
   // expand to individual color props (RN doesn't support borderColor shorthand)
-  if (borderColor !== undefined) {
-    result.push(['borderTopColor', borderColor])
-    result.push(['borderRightColor', borderColor])
-    result.push(['borderBottomColor', borderColor])
-    result.push(['borderLeftColor', borderColor])
+  if (color !== undefined) {
+    result.push(['borderTopColor', color])
+    result.push(['borderRightColor', color])
+    result.push(['borderBottomColor', color])
+    result.push(['borderLeftColor', color])
   }
 
   return result.length > 0 ? result : undefined

package/src/helpers/parseOutlineShorthand.native.ts

@@ -1,18 +1,6 @@
 import type { PropMappedValue } from '../types'
-
-// outline style keywords
-const outlineStyles = new Set([
-  'solid',
-  'dashed',
-  'dotted',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-  'none',
-  'hidden',
-])
+import { classifyBorderComponents } from './borderComponents'
+import { toNativeBorderWidth } from './parseBorderShorthand.native'
 
 // parses CSS outline shorthand: "<width> <style> <color>"
 // components can appear in any order, all are optional
@@ -25,37 +13,18 @@ export function parseOutlineShorthand(value: string): PropMappedValue | undefine
     ]
   }
 
-  const parts = value.trim().split(/\s+/)
-  let outlineWidth: string | number | undefined
-  let outlineStyle: string | undefined
-  let outlineColor: string | undefined
-
-  for (const part of parts) {
-    // check if it's an outline style keyword
-    if (outlineStyles.has(part)) {
-      outlineStyle = part
-    }
-    // check if it's a length (number or ends with px/em/rem/etc)
-    else if (/^[\d.]+(?:px|em|rem|%|pt|vw|vh)?$/.test(part)) {
-      const num = parseFloat(part)
-      outlineWidth = part.endsWith('px') || !part.match(/[a-z%]/i) ? num : part
-    }
-    // otherwise assume it's a color
-    else {
-      outlineColor = part
-    }
-  }
+  const { width, style, color } = classifyBorderComponents(value, true)
 
   const result: PropMappedValue = []
 
-  if (outlineWidth !== undefined) {
-    result.push(['outlineWidth', outlineWidth])
+  if (width !== undefined) {
+    result.push(['outlineWidth', toNativeBorderWidth(width)])
   }
-  if (outlineStyle !== undefined) {
-    result.push(['outlineStyle', outlineStyle])
+  if (style !== undefined) {
+    result.push(['outlineStyle', style])
   }
-  if (outlineColor !== undefined) {
-    result.push(['outlineColor', outlineColor])
+  if (color !== undefined) {
+    result.push(['outlineColor', color])
   }
 
   return result.length > 0 ? result : undefined

package/src/helpers/resolveSafeArea.ts

@@ -5,112 +5,45 @@
 // insets on native (see resolveSafeArea.native.ts).
 //
 
-type Edge = 'top' | 'bottom' | 'left' | 'right'
-
-// map prop name -> which edge(s) it covers.
-// single-edge props map to one edge; multi-edge props (padding, inset, ...)
-// map to multiple edges and get expanded.
-//
-// keys here are AFTER shorthand expansion (pt -> paddingTop, etc).
-const propEdges: Record<string, Edge | Edge[]> = {
-  // padding
-  padding: ['top', 'right', 'bottom', 'left'],
-  paddingTop: 'top',
-  paddingBottom: 'bottom',
-  paddingLeft: 'left',
-  paddingRight: 'right',
-  paddingHorizontal: ['left', 'right'],
-  paddingVertical: ['top', 'bottom'],
-  paddingStart: 'left',
-  paddingEnd: 'right',
-  paddingBlock: ['top', 'bottom'],
-  paddingInline: ['left', 'right'],
-  paddingBlockStart: 'top',
-  paddingBlockEnd: 'bottom',
-  paddingInlineStart: 'left',
-  paddingInlineEnd: 'right',
-  // margin
-  margin: ['top', 'right', 'bottom', 'left'],
-  marginTop: 'top',
-  marginBottom: 'bottom',
-  marginLeft: 'left',
-  marginRight: 'right',
-  marginHorizontal: ['left', 'right'],
-  marginVertical: ['top', 'bottom'],
-  marginStart: 'left',
-  marginEnd: 'right',
-  marginBlock: ['top', 'bottom'],
-  marginInline: ['left', 'right'],
-  marginBlockStart: 'top',
-  marginBlockEnd: 'bottom',
-  marginInlineStart: 'left',
-  marginInlineEnd: 'right',
-  // inset
-  inset: ['top', 'right', 'bottom', 'left'],
-  top: 'top',
-  bottom: 'bottom',
-  left: 'left',
-  right: 'right',
-  start: 'left',
-  end: 'right',
+type Edge = 'top' | 'right' | 'bottom' | 'left'
+
+const allEdges: Edge[] = ['top', 'right', 'bottom', 'left']
+const suffixEdges: Record<string, Edge[]> = {
+  Horizontal: ['left', 'right'],
+  Inline: ['left', 'right'],
+  Vertical: ['top', 'bottom'],
+  Block: ['top', 'bottom'],
+  Start: ['left'],
+  InlineStart: ['left'],
+  End: ['right'],
+  InlineEnd: ['right'],
+  Top: ['top'],
+  BlockStart: ['top'],
+  Bottom: ['bottom'],
+  BlockEnd: ['bottom'],
+  Left: ['left'],
+  Right: ['right'],
 }
 
-const envForEdge: Record<Edge, string> = {
-  top: 'env(safe-area-inset-top)',
-  bottom: 'env(safe-area-inset-bottom)',
-  left: 'env(safe-area-inset-left)',
-  right: 'env(safe-area-inset-right)',
-}
-
-// is this prop key safe-area-aware?
-export function isSafeAreaKey(key: string): boolean {
-  return key in propEdges
+function safeAreaEdges(key: string): [string, Edge[]] | undefined {
+  if (key === 'inset') return ['', allEdges]
+  if (/^(top|right|bottom|left)$/.test(key)) return ['', [key as Edge]]
+  if (key === 'start') return ['', ['left']]
+  if (key === 'end') return ['', ['right']]
+  const match = /^(padding|margin)(.*)$/.exec(key)
+  if (!match) return
+  const edges = match[2] ? suffixEdges[match[2]] : allEdges
+  return edges && [match[1], edges]
 }
 
 // resolve key="safe" -> array of [edge-key, value] pairs.
 // returns undefined if key isn't safe-area-aware.
 export function expandSafeAreaValue(key: string): Array<[string, string]> | undefined {
-  const edges = propEdges[key]
-  if (!edges) return undefined
-  if (typeof edges === 'string') {
-    return [[key, envForEdge[edges]]]
-  }
-  // multi-edge: expand to per-side keys.
-  // for padding/margin: padding + edgePascal = paddingTop etc.
-  // for inset: emit bare top/right/bottom/left (the actual CSS sides).
-  const base = baseKeyForExpansion[key]
-  if (base === '') {
-    return edges.map((e) => [edgeToSideKey[e], envForEdge[e]])
-  }
-  return edges.map((e) => [`${base}${edgeToPascal[e]}`, envForEdge[e]])
-}
-
-const edgeToPascal: Record<Edge, string> = {
-  top: 'Top',
-  bottom: 'Bottom',
-  left: 'Left',
-  right: 'Right',
-}
-
-const edgeToSideKey: Record<Edge, string> = {
-  top: 'top',
-  bottom: 'bottom',
-  left: 'left',
-  right: 'right',
-}
-
-// for each multi-edge prop, what's the base name to prepend Top/Bottom/etc?
-// '' = no prefix (use bare edge names like 'top', 'left')
-const baseKeyForExpansion: Record<string, string> = {
-  padding: 'padding',
-  paddingHorizontal: 'padding',
-  paddingVertical: 'padding',
-  paddingBlock: 'padding',
-  paddingInline: 'padding',
-  margin: 'margin',
-  marginHorizontal: 'margin',
-  marginVertical: 'margin',
-  marginBlock: 'margin',
-  marginInline: 'margin',
-  inset: '',
+  const match = safeAreaEdges(key)
+  if (!match) return
+  const [base, edges] = match
+  return edges.map((edge) => [
+    base ? `${base}${edge[0].toUpperCase()}${edge.slice(1)}` : edge,
+    `env(safe-area-inset-${edge})`,
+  ])
 }

package/src/helpers/resolveVariantStyle.ts

@@ -0,0 +1,77 @@
+import type { GetStyleState } from '../types'
+import { emitVariantStyle, walkConditionalValue } from './getSplitStyles'
+import { isObj } from './isObj'
+import { skipProps } from './skipProps'
+import { styleOriginalValues } from './styleOriginalValues'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { getDynamicEnv, isStyledDynamic } from './styledDynamic'
+
+export function resolveVariantStyle(
+  state: GetStyleState,
+  variants: Record<string, any>,
+  key: string,
+  value: any,
+  parentKey = key,
+  parentCondition?: unknown
+) {
+  const definition = variants[key]
+  // bare styled.dynamic<T>(): the prop is typed and consumed here; its style
+  // comes from a component resolver reading it off props
+  if (typeof definition !== 'function' && isStyledDynamic(definition)) {
+    return
+  }
+  if (
+    !(
+      typeof value === 'string' &&
+      definition &&
+      typeof definition === 'object' &&
+      value in definition
+    ) &&
+    walkConditionalValue(state, key, value, parentCondition, (payload, condition) =>
+      resolveSelection(state, variants, key, payload, parentKey, condition || undefined)
+    )
+  ) {
+    return
+  }
+  resolveSelection(state, variants, key, value, parentKey, parentCondition)
+}
+
+function resolveSelection(
+  state: GetStyleState,
+  variants: Record<string, any>,
+  key: string,
+  value: any,
+  parentKey: string,
+  condition?: unknown
+) {
+  const definition = variants[key]
+  let output
+  if (isStyledDynamic(definition) && typeof definition === 'function') {
+    // styled.dynamic(fn): pure function of the (per-clause) value + env
+    output = definition(value, getDynamicEnv(state))
+  } else if (definition && typeof definition === 'object' && value !== undefined) {
+    output = definition[value]
+  }
+  if (!isObj(output)) return
+
+  const originals = styleOriginalValues.get(output)
+  for (const outputKey in output) {
+    if (!state.styleProps.noSkip && outputKey in skipProps) continue
+    const raw = output[outputKey]
+    // A dynamic's static shape is allowed to use undefined values for
+    // conditionals. They are absent, matching resolver output semantics, and
+    // must not normalize into an "undefined" atomic rule.
+    if (raw == null) continue
+    const value = state.styleProps.noNormalize
+      ? raw
+      : normalizeValueWithProperty(raw, state.conf.shorthands[outputKey] || outputKey)
+    emitVariantStyle(
+      state,
+      outputKey,
+      value,
+      originals?.[outputKey] ?? raw,
+      condition,
+      parentKey === key && outputKey === key
+    )
+  }
+}

package/src/helpers/styleFrontend.ts

@@ -64,6 +64,8 @@ export type FrontendClassPlan =
       preserveRawClass: boolean
     }
 
+export type FrontendClassSink = (entry: FrontendClassPlanEntry) => void
+
 /**
  * A component's authoring syntax. It is chosen by the package the component was
  * imported from and frozen onto its static config when the component is created:
@@ -77,11 +79,12 @@ export type FrontendClassPlan =
  * contribution, merging, web lowering, and native evaluation all stay in core.
  */
 export type StyleFrontend = {
-  /**
-   * Classifies one class candidate. The shared style cursor owns the className
-   * character walk and feeds every returned entry through its one property sink.
-   */
-  getClassPlan?: (candidate: string, config: StyleFrontendConfig) => FrontendClassPlan
+  /** resolves one class candidate and sends claimed entries to the shared cursor */
+  resolveClassName?: (
+    candidate: string,
+    config: StyleFrontendConfig,
+    sink: FrontendClassSink
+  ) => boolean | null
 
   /**
    * Resolves frontend-specific static style input (a class-string base, string

package/src/helpers/styleStaticConfig.ts

@@ -1,88 +1,21 @@
-import { stylePropsText, validStyles as validStylesView } from '@tamagui/helpers'
-import type { StaticConfig, TamaguiInternalConfig } from '../types'
+import type { StaticConfig, StylePiece, TamaguiInternalConfig } from '../types'
 import { getConfigRevisionState } from './grammarConfig'
 
 export type StyleStaticConfig = {
   baseStyle: Record<string, any> | undefined
   baseVariantProps: Record<string, any> | undefined
+  baseStylePiece: StylePiece | undefined
+  baseStylePieces: Record<string, StylePiece> | undefined
   defaultProps: Record<string, any> | undefined
   styledContextKeys: Set<string> | null
   variants: StaticConfig['variants']
+  variantStyleResolver: any
   passthroughClassName: string | undefined
 }
 
-const styleStaticConfigCache = new WeakMap<
-  StaticConfig,
-  WeakMap<TamaguiInternalConfig, { revision: number; value: StyleStaticConfig }>
->()
-
-/**
- * styled() takes styles and props in one options object. The styles belong to the
- * base layer the style pass writes before any prop, so call-site props and
- * variants always land on top of them; everything else stays a prop.
- *
- * Split lazily rather than in styled(), because classifying a key needs
- * `conf.shorthands` and styled() runs at module scope before createTamagui.
- */
 export function getStyleStaticConfig(
   staticConfig: StaticConfig,
   conf: TamaguiInternalConfig
 ): StyleStaticConfig {
-  let configCache = styleStaticConfigCache.get(staticConfig)
-  const revision = getConfigRevisionState(conf).revision
-  const cached = configCache?.get(conf)
-  if (cached?.revision === revision) return cached.value
-
-  const normalized = staticConfig.styleFrontend?.normalizeStaticConfig?.(
-    staticConfig,
-    conf
-  )
-  const variants = normalized ? normalized.variants : staticConfig.variants
-  const authoredBaseStyle = normalized ? normalized.baseStyle : staticConfig.baseStyle
-  const authoredDefaultProps = staticConfig.defaultProps
-  let baseStyle: Record<string, any> | undefined
-  let baseVariantProps: Record<string, any> | undefined
-  let defaultProps: Record<string, any> | undefined
-  if (authoredDefaultProps) {
-    const validStyles =
-      staticConfig.validStyles ||
-      (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView)
-    for (const key in authoredDefaultProps) {
-      const isVariant = Boolean(variants?.[key])
-      // transition selects an animation driver preset. It stays a prop even
-      // though the web style table recognizes the CSS property spelling.
-      const isStyle =
-        key !== 'transition' && (key in validStyles || key in conf.shorthands)
-      if (isVariant || isStyle) {
-        ;(baseStyle ||= authoredBaseStyle ? { ...authoredBaseStyle } : {})[key] =
-          authoredDefaultProps[key]
-      }
-      // variants also stay in the merged props for context and HOC forwarding,
-      // while their style contribution runs at its authored base position
-      if (isVariant || !isStyle) {
-        ;(defaultProps ||= {})[key] = authoredDefaultProps[key]
-      }
-      if (isVariant) {
-        ;(baseVariantProps ||= {})[key] = authoredDefaultProps[key]
-      }
-    }
-  }
-  const keys = staticConfig.contextProps || staticConfig.context?.propKeys
-  const value: StyleStaticConfig = {
-    baseStyle: baseStyle || authoredBaseStyle,
-    baseVariantProps,
-    defaultProps,
-    styledContextKeys: keys ? new Set(keys) : null,
-    variants,
-    passthroughClassName: normalized
-      ? normalized.passthroughClassName
-      : staticConfig.passthroughClassName,
-  }
-
-  if (!configCache) {
-    configCache = new WeakMap()
-    styleStaticConfigCache.set(staticConfig, configCache)
-  }
-  configCache.set(conf, { revision, value })
-  return value
+  return getConfigRevisionState(conf).styleStaticConfig(staticConfig, conf)
 }

package/src/helpers/styleStaticConfigCore.ts

@@ -0,0 +1,110 @@
+import {
+  stylePropsInput,
+  stylePropsText,
+  validStyles as validStylesView,
+} from '@tamagui/helpers'
+import type { StaticConfig, StylePiece, TamaguiInternalConfig } from '../types'
+import { createStylePiece } from '../style'
+import type { StyleStaticConfig } from './styleStaticConfig'
+
+const styleStaticConfigCache = new WeakMap<
+  StaticConfig,
+  WeakMap<TamaguiInternalConfig, { revision: number; value: StyleStaticConfig }>
+>()
+
+export function resolveStyleStaticConfig(
+  staticConfig: StaticConfig,
+  conf: TamaguiInternalConfig,
+  revision: number
+): StyleStaticConfig {
+  let configCache = styleStaticConfigCache.get(staticConfig)
+  const cached = configCache?.get(conf)
+  if (cached?.revision === revision) return cached.value
+
+  const normalized = staticConfig.styleFrontend?.normalizeStaticConfig?.(
+    staticConfig,
+    conf
+  )
+  const variants = normalized ? normalized.variants : staticConfig.variants
+  const authoredBaseStyle = normalized ? normalized.baseStyle : staticConfig.baseStyle
+  const authoredDefaultProps = staticConfig.defaultProps
+  let baseStyle: Record<string, any> | undefined
+  let baseVariantProps: Record<string, any> | undefined
+  let defaultProps: Record<string, any> | undefined
+  const validStyles =
+    staticConfig.validStyles ||
+    (staticConfig.isInput
+      ? stylePropsInput
+      : staticConfig.isText
+        ? stylePropsText
+        : validStylesView)
+  if (authoredDefaultProps) {
+    for (const key in authoredDefaultProps) {
+      const isVariant = Boolean(variants?.[key])
+      const isStyle =
+        key !== 'transition' && (key in validStyles || key in conf.shorthands)
+      if (isVariant || isStyle) {
+        ;(baseStyle ||= authoredBaseStyle ? { ...authoredBaseStyle } : {})[key] =
+          authoredDefaultProps[key]
+      }
+      if (isVariant || !isStyle) {
+        ;(defaultProps ||= {})[key] = authoredDefaultProps[key]
+      }
+      if (isVariant) {
+        ;(baseVariantProps ||= {})[key] = authoredDefaultProps[key]
+      }
+    }
+  }
+  const resolvedBaseStyle = baseStyle || authoredBaseStyle
+  let baseStylePiece
+  let baseStylePieces: Record<string, StylePiece> | undefined
+  if (resolvedBaseStyle && !(staticConfig as any).disableBaseStylePiece) {
+    let directBaseStyle: Record<string, any> | undefined
+    let directBaseKeys: string[] | undefined
+    const flushDirectBaseStyle = () => {
+      if (!directBaseStyle || !directBaseKeys) return
+      const piece = createStylePiece(directBaseStyle, 'base')
+      baseStylePiece ||= piece
+      baseStylePieces ||= {}
+      for (const key of directBaseKeys) {
+        baseStylePieces[key] = piece
+      }
+      directBaseStyle = undefined
+      directBaseKeys = undefined
+    }
+    for (const key in resolvedBaseStyle) {
+      const expanded = conf.shorthands[key] || key
+      if (key !== 'transition' && !variants?.[key] && expanded in validStyles) {
+        ;(directBaseStyle ||= {})[key] = resolvedBaseStyle[key]
+        ;(directBaseKeys ||= []).push(key)
+      } else {
+        // A default variant between direct declarations must run at that exact
+        // authored position. Keeping separate contiguous pieces preserves the
+        // base layer's ordinary last-write order while still precompiling it.
+        flushDirectBaseStyle()
+      }
+    }
+    flushDirectBaseStyle()
+  }
+  const keys = staticConfig.contextProps || staticConfig.context?.propKeys
+  const value: StyleStaticConfig = {
+    baseStyle: resolvedBaseStyle,
+    baseVariantProps,
+    baseStylePiece,
+    baseStylePieces,
+    defaultProps,
+    styledContextKeys: keys ? new Set(keys) : null,
+    variants,
+    variantStyleResolver: (staticConfig as any).variantStyleResolver,
+    passthroughClassName: normalized
+      ? normalized.passthroughClassName
+      : staticConfig.passthroughClassName,
+  }
+
+  if (!configCache) {
+    configCache = new WeakMap()
+    styleStaticConfigCache.set(staticConfig, configCache)
+  }
+  configCache.set(conf, { revision, value })
+  return value
+}