@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.881.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/splitStyleProps.ts

@@ -0,0 +1,166 @@
+import { stylePropsAll } from '@tamagui/helpers'
+
+import { getConfig } from '../config'
+import type { Shorthands } from '../types'
+
+type StringKey<Props> = Extract<keyof Props, string>
+type Simplify<Value> = { [Key in keyof Value]: Value[Key] }
+
+type ExpandedShorthandKey<
+  Key extends PropertyKey,
+  ShorthandMap extends object = Shorthands,
+> = Key extends keyof ShorthandMap
+  ? ShorthandMap[Key] extends PropertyKey
+    ? ShorthandMap[Key]
+    : Key
+  : Key
+
+type ShorthandKeysMatchingFilter<
+  Filter extends object,
+  ShorthandMap extends object = Shorthands,
+> = {
+  [Key in keyof ShorthandMap]-?: ShorthandMap[Key] extends keyof Filter ? Key : never
+}[keyof ShorthandMap]
+
+type KeysMatchingFilter<Filter extends object, ShorthandMap extends object = Shorthands> =
+  | keyof Filter
+  | ShorthandKeysMatchingFilter<Filter, ShorthandMap>
+
+type StyleKeys = KeysMatchingFilter<typeof stylePropsAll>
+
+type ExpandedProps<
+  Props extends object,
+  Keys extends keyof Props,
+  ShorthandMap extends object,
+> = Simplify<
+  {
+    [Key in Extract<Keys, keyof ShorthandMap> as ExpandedShorthandKey<
+      Key,
+      ShorthandMap
+    >]: Props[Key]
+  } & Omit<Pick<Props, Keys>, keyof ShorthandMap>
+>
+
+type SelectedProps<
+  Props extends object,
+  Keys extends keyof Props,
+  ExpandShorthands extends boolean,
+  ShorthandMap extends object = Shorthands,
+> = ExpandShorthands extends true
+  ? ExpandedProps<Props, Keys, ShorthandMap>
+  : Pick<Props, Keys>
+
+export type SplitStylePropsResult<
+  Props extends object,
+  Keys extends PropertyKey,
+  ExpandShorthands extends boolean = false,
+  ShorthandMap extends object = Shorthands,
+> = [
+  SelectedProps<Props, Extract<keyof Props, Keys>, ExpandShorthands, ShorthandMap>,
+  Omit<Props, Keys>,
+]
+
+export type SplitStylePropsFilterCallback<Props extends object> = (
+  key: string,
+  value: Props[StringKey<Props>],
+  originalKey: StringKey<Props>,
+  isStyleProp: boolean
+) => boolean
+
+export type SplitStylePropsFilter<Props extends object> =
+  | Readonly<Record<string, unknown>>
+  | SplitStylePropsFilterCallback<Props>
+
+export type SplitStylePropsOptions<Props extends object> = {
+  expandShorthands?: boolean
+  filter?: SplitStylePropsFilter<Props>
+}
+
+/** partitions authored props in one pass without resolving style values */
+export function splitStyleProps<
+  Props extends object,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options?: { expandShorthands?: ExpandShorthands }
+): SplitStylePropsResult<Props, StyleKeys, ExpandShorthands>
+
+export function splitStyleProps<
+  Props extends object,
+  const Filter extends Readonly<Record<string, unknown>>,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options: { expandShorthands?: ExpandShorthands; filter: Filter }
+): SplitStylePropsResult<Props, KeysMatchingFilter<Filter>, ExpandShorthands>
+
+export function splitStyleProps<
+  Props extends object,
+  SelectedKey extends StringKey<Props>,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options: {
+    expandShorthands?: ExpandShorthands
+    filter: (
+      key: string,
+      value: Props[StringKey<Props>],
+      originalKey: StringKey<Props>,
+      isStyleProp: boolean
+    ) => originalKey is SelectedKey
+  }
+): SplitStylePropsResult<Props, SelectedKey, ExpandShorthands>
+
+export function splitStyleProps<
+  Props extends object,
+  const ExpandShorthands extends boolean = false,
+>(
+  props: Props,
+  options: {
+    expandShorthands?: ExpandShorthands
+    filter: SplitStylePropsFilterCallback<Props>
+  }
+): [Partial<SelectedProps<Props, keyof Props, ExpandShorthands>>, Partial<Props>]
+
+export function splitStyleProps(
+  props: object,
+  options: {
+    expandShorthands?: boolean
+    filter?:
+      | Readonly<Record<string, unknown>>
+      | ((
+          key: string,
+          value: unknown,
+          originalKey: string,
+          isStyleProp: boolean
+        ) => boolean)
+  } = {}
+) {
+  const styleProps: Record<string, unknown> = {}
+  const regularProps: Record<string, unknown> = {}
+  const { expandShorthands = false, filter } = options
+  const shorthands = getConfig().shorthands
+  const filterIsFunction = typeof filter === 'function'
+  const propsRecord = props as Record<string, unknown>
+
+  for (const originalKey in props) {
+    if (!Object.hasOwn(props, originalKey)) continue
+
+    const value = propsRecord[originalKey]
+    const key = shorthands[originalKey] || originalKey
+    const isStyleProp = key in stylePropsAll
+    const selected = filter
+      ? filterIsFunction
+        ? filter(key, value, originalKey, isStyleProp)
+        : Object.hasOwn(filter, key)
+      : isStyleProp
+
+    if (selected) {
+      styleProps[expandShorthands ? key : originalKey] = value
+    } else {
+      regularProps[originalKey] = value
+    }
+  }
+
+  return [styleProps, regularProps]
+}

package/src/helpers/styleFrontend.ts

@@ -30,10 +30,14 @@ export type FrontendStaticConfig = {
    */
   passthroughClassName?: string
   variants?: Record<string, Record<string, any>>
-  compoundVariants?: readonly Record<string, any>[]
   styleFrontend?: StyleFrontend
 }
 
+export type FrontendStaticConfigNormalization = Pick<
+  FrontendStaticConfig,
+  'baseStyle' | 'passthroughClassName' | 'variants'
+>
+
 /**
  * What the internal View/Text factory and a frontend-bound `styled()` hand back: an
  * opaque component object carrying its static config. Deliberately not core's
@@ -60,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:
@@ -73,21 +79,22 @@ 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
-   * variant values, string compound-variant styles) into ordinary style objects.
-   * Called once per (staticConfig, config) pair; implementations memoize.
+   * variant values) into ordinary style objects.
+   * Called once per (staticConfig, config revision) by the shared runtime cache.
    */
   normalizeStaticConfig?: <Config extends FrontendStaticConfig>(
     staticConfig: Config,
     config: StyleFrontendConfig
-  ) => Config
+  ) => FrontendStaticConfigNormalization
 }
 
 /**

package/src/helpers/styleStaticConfig.ts

@@ -0,0 +1,21 @@
+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
+}
+
+export function getStyleStaticConfig(
+  staticConfig: StaticConfig,
+  conf: TamaguiInternalConfig
+): StyleStaticConfig {
+  return getConfigRevisionState(conf).styleStaticConfig(staticConfig, conf)
+}