@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

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/skipProps.ts

@@ -1,6 +1,8 @@
 import { nativeOnlyProps } from './nativeOnlyProps'
 import { webPropsToSkip } from './webPropsToSkip'
 
+export const HOC_CLASSNAME_MARKER = 'data-tamagui-hoc-class'
+
 /**
  * These are props that dont pass down below Tamagui styled components
  */
@@ -8,15 +10,17 @@ export const skipProps = {
   untilMeasured: 1,
   transition: 1,
   space: 1,
-  animateOnly: 1,
   animatedBy: 1,
+  displayName: 1,
   disableClassName: 1,
   debug: 1,
-  componentName: 1,
   disableOptimization: 1,
+  disableNativeStyle: 1,
   render: 1,
-  style: 1, // handled after loop so pseudos set usedKeys and override it if necessary
+  style: 1, // handled after the prop loop to preserve authored order
+  [HOC_CLASSNAME_MARKER]: 1,
   group: 1,
+  container: 1,
   animatePresence: 1,
 }
 
@@ -24,6 +28,10 @@ if (process.env.NODE_ENV === 'test') {
   skipProps['data-test-renders'] = 1
 }
 
+if (process.env.NODE_ENV === 'development') {
+  skipProps['__tamaguiStyleDebugReceipt'] = 1
+}
+
 // Skip web-only props on native
 if (process.env.TAMAGUI_TARGET === 'native') {
   Object.assign(skipProps, webPropsToSkip)

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

@@ -0,0 +1,143 @@
+import type { GrammarSourceConfig } from '@tamagui/style-grammar/runtime'
+import type { FunctionComponent } from 'react'
+
+/**
+ * The configuration a style frontend reads. It is the shared grammar's own
+ * dependency-free projection, narrowed so `media` and `themes` are the name-keyed
+ * records a frontend classifies modifiers against. A real `TamaguiInternalConfig`
+ * satisfies it structurally, and declaring a frontend never pulls core's config or
+ * style-prop type graph in.
+ */
+export type StyleFrontendConfig = Omit<GrammarSourceConfig, 'media' | 'themes'> & {
+  media?: Readonly<Record<string, unknown>>
+  themes?: Readonly<Record<string, unknown>>
+}
+
+/**
+ * The parts of a component's static configuration a frontend authors or rewrites.
+ * Everything else on the real `StaticConfig` is the shared runtime's and passes
+ * through untouched, which is why `normalizeStaticConfig` is generic in the config
+ * it is handed.
+ */
+export type FrontendStaticConfig = {
+  /** frontend-specific static style input, e.g. a Tailwind class string base */
+  baseClassName?: string
+  baseStyle?: Record<string, any>
+  /**
+   * Classes from `baseClassName` that the frontend did not claim. They stay a raw
+   * class string so the app's own CSS still applies them, and they are kept out of
+   * `baseStyle` because that object holds styles only.
+   */
+  passthroughClassName?: string
+  variants?: Record<string, 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
+ * `TamaguiComponent`, so a frontend's declarations never gain the regular style prop
+ * graph. The frontend re-types it with its own public props.
+ */
+export type FrontendComponent = FunctionComponent<any> & {
+  staticConfig: FrontendStaticConfig
+}
+
+export type FrontendClassPlanEntry = readonly [
+  property: string,
+  value: unknown,
+  condition?: string,
+  modifiers?: readonly string[],
+]
+
+export type FrontendClassPlan =
+  | 'raw'
+  | null
+  | readonly FrontendClassPlanEntry[]
+  | {
+      entries: readonly FrontendClassPlanEntry[]
+      preserveRawClass: boolean
+    }
+
+export type FrontendClassSink = (entry: FrontendClassPlanEntry) => void
+
+/**
+ * Fold one contribution into whatever a frontend already collected for the same
+ * property. A value already present becomes the `default` arm, so
+ * `ring-2 hover:ring-4` reads as `{ default, hover }`, and a later unconditional
+ * `ring-8` restates that `default` without dropping the `hover` arm.
+ *
+ * Both class-walk sinks use this: the one in `getSplitStyles` and the one the
+ * Tailwind frontend runs when it composes a class string statically.
+ */
+export function mergeFrontendCondition(
+  previous: unknown,
+  value: unknown,
+  condition: string | undefined
+): unknown {
+  const merged =
+    previous !== null && typeof previous === 'object' && !Array.isArray(previous)
+  if (condition === undefined) {
+    return merged ? { ...(previous as Record<string, unknown>), default: value } : value
+  }
+  if (merged) {
+    return { ...(previous as Record<string, unknown>), [condition]: value }
+  }
+  return previous === undefined
+    ? { [condition]: value }
+    : { default: previous, [condition]: value }
+}
+
+/**
+ * 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:
+ * there is no global setting, no registry, and no runtime lookup.
+ *
+ * Regular `@tamagui/core` components carry no descriptor and use
+ * `regularStyleFrontend`. `@tamagui/tailwind` builds its components with its own
+ * descriptor, which owns class-string tokenization and candidate adaptation.
+ *
+ * The renderer below the descriptor is shared: property/value program parsing,
+ * contribution, merging, web lowering, and native evaluation all stay in core.
+ */
+export type StyleFrontend = {
+  /** 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) into ordinary style objects.
+   * Called once per (staticConfig, config revision) by the shared runtime cache.
+   */
+  normalizeStaticConfig?: <Config extends FrontendStaticConfig>(
+    staticConfig: Config,
+    config: StyleFrontendConfig
+  ) => FrontendStaticConfigNormalization
+
+  /**
+   * Composes the N-to-1 utilities a class walk collected under `__`-prefixed keys
+   * (ring width plus ring color into one `boxShadow`, gradient stops into one
+   * `backgroundImage`, filter parts into one `filter`) into ordinary styles.
+   *
+   * Called once per pass and only when the walk actually collected such a key, so
+   * a component with no className, or none carrying a composed utility, never runs
+   * it. The output contributes at the className's own authored position, which is
+   * why an unrelated `ring-2` cannot change which layer owns `backgroundColor`.
+   */
+  compose?: (collected: Record<string, any>) => Record<string, any> | null | undefined
+}
+
+/**
+ * The regular Tamagui frontend: props are already the renderer's input shape, so
+ * preprocessing is identity and costs one property read plus one call.
+ */
+export const regularStyleFrontend: StyleFrontend = {}

package/src/helpers/styleProvenance.ts

@@ -4,7 +4,7 @@
 //
 // this is a pure inspection side channel. it records, per resolved style key,
 // which token produced the value and the full theme name that resolved it
-// (e.g. { backgroundColor: { token: '$background', theme: 'light_accent' } }).
+// (e.g. { backgroundColor: { token: 'background', theme: 'light_accent' } }).
 // a literal value produces NO entry, which is how a literal that happens to
 // equal a token value stays distinguishable from the token.
 //
@@ -24,7 +24,7 @@ export const STYLE_TOKEN_PROVENANCE_KEY = 'tamagui.styleTokenProvenance'
 const provenanceSymbol = /* @__PURE__ */ Symbol.for(STYLE_TOKEN_PROVENANCE_KEY)
 
 export type StyleTokenBinding = {
-  /** original token string before resolution, e.g. '$background' or '$color9' */
+  /** original token string before resolution, e.g. 'background' or 'color9' */
   token: string
   /** full resolved theme name that produced the value, e.g. 'light_accent' */
   theme: string
@@ -32,6 +32,21 @@ export type StyleTokenBinding = {
 
 export type StyleTokenProvenance = Record<string, StyleTokenBinding>
 
+export type StyleDebugTier = 'lowered' | 'flattened' | 'styled' | 'bailed'
+
+export type StyleDebugReceipt = {
+  component: string
+  tiers: StyleDebugTier[]
+  why: string
+  styles: {
+    prop: string
+    tier: StyleDebugTier
+    why: string
+    dropped?: true
+    runtime?: true
+  }[]
+}
+
 export function setStyleTokenProvenance(style: object, provenance: StyleTokenProvenance) {
   Object.defineProperty(style, provenanceSymbol, {
     value: provenance,

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)
+}

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
+}

package/src/helpers/styleToCSS.native.ts

@@ -0,0 +1 @@
+export function styleToCSS(_style: Record<string, any>) {}

package/src/helpers/styleToCSS.ts

@@ -0,0 +1,43 @@
+import { defaultOffset } from './defaultOffset'
+import { normalizeColor } from './normalizeColor'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+
+export function styleToCSS(style: Record<string, any>) {
+  const { shadowOffset, shadowRadius, shadowColor, shadowOpacity } = style
+  if (
+    shadowRadius != null ||
+    shadowColor ||
+    shadowOffset != null ||
+    shadowOpacity != null
+  ) {
+    const offset = shadowOffset || defaultOffset
+    const width = normalizeValueWithProperty(offset.width)
+    const height = normalizeValueWithProperty(offset.height)
+    const radius = normalizeValueWithProperty(shadowRadius)
+    const color = normalizeColor(shadowColor, shadowOpacity)
+    if (color) {
+      const shadow = `${width} ${height} ${radius} ${color}`
+      style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow
+    }
+    delete style.shadowOffset
+    delete style.shadowRadius
+    delete style.shadowColor
+    delete style.shadowOpacity
+  }
+
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style
+  if (textShadowColor || textShadowOffset || textShadowRadius) {
+    const { height, width } = textShadowOffset || defaultOffset
+    const radius = textShadowRadius || 0
+    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')
+    if (color && (height !== 0 || width !== 0 || radius !== 0)) {
+      const blurRadius = normalizeValueWithProperty(radius)
+      const offsetX = normalizeValueWithProperty(width)
+      const offsetY = normalizeValueWithProperty(height)
+      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
+    }
+    delete style.textShadowColor
+    delete style.textShadowOffset
+    delete style.textShadowRadius
+  }
+}