@tamagui/web 1.138.5 → 1.139.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.138.5",
+  "version": "1.139.0",
   "type": "module",
   "source": "src/index.ts",
   "main": "dist/cjs",
@@ -28,16 +28,16 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.138.5",
-    "@tamagui/constants": "1.138.5",
-    "@tamagui/helpers": "1.138.5",
-    "@tamagui/is-equal-shallow": "1.138.5",
-    "@tamagui/normalize-css-color": "1.138.5",
-    "@tamagui/timer": "1.138.5",
-    "@tamagui/types": "1.138.5",
-    "@tamagui/use-did-finish-ssr": "1.138.5",
-    "@tamagui/use-event": "1.138.5",
-    "@tamagui/use-force-update": "1.138.5"
+    "@tamagui/compose-refs": "1.139.0",
+    "@tamagui/constants": "1.139.0",
+    "@tamagui/helpers": "1.139.0",
+    "@tamagui/is-equal-shallow": "1.139.0",
+    "@tamagui/normalize-css-color": "1.139.0",
+    "@tamagui/timer": "1.139.0",
+    "@tamagui/types": "1.139.0",
+    "@tamagui/use-did-finish-ssr": "1.139.0",
+    "@tamagui/use-event": "1.139.0",
+    "@tamagui/use-force-update": "1.139.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -45,7 +45,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.138.5",
+    "@tamagui/build": "1.139.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "*",

package/src/helpers/getSplitStyles.tsx

@@ -78,6 +78,11 @@ export type SplitStyleResult = ReturnType<typeof getSplitStyles>
 
 let conf: TamaguiInternalConfig
 
+// WeakMap to track original token values for style objects
+// Used to preserve '$8' style tokens instead of resolved 'var(--t-space-8)'
+// for context prop propagation to children (issues #3670, #3676)
+export const styleOriginalValues = new WeakMap<object, Record<string, any>>()
+
 type StyleSplitter = (
   props: { [key: string]: any },
   staticConfig: StaticConfig,
@@ -619,7 +624,7 @@ export const getSplitStyles: StyleSplitter = (
 
     const disablePropMap = isMediaOrPseudo || !isStyleLikeKey
 
-    propMapper(keyInit, valInit, styleState, disablePropMap, (key, val) => {
+    propMapper(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal) => {
       const isStyledContextProp = styledContext && key in styledContext
 
       if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
@@ -646,7 +651,7 @@ export const getSplitStyles: StyleSplitter = (
         (!isHOC && isValidStyleKey(key, validStyles, accept)) ||
         (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
       ) {
-        mergeStyle(styleState, key, val, 1)
+        mergeStyle(styleState, key, val, 1, false, originalVal)
         return
       }
 
@@ -755,6 +760,7 @@ export const getSplitStyles: StyleSplitter = (
 
           const importance = descriptor.priority
 
+          const pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject)
           for (const pkey in pseudoStyleObject) {
             const val = pseudoStyleObject[pkey]
             // when disabled ensure the default value is set for future animations to align
@@ -771,7 +777,14 @@ export const getSplitStyles: StyleSplitter = (
                   pseudos[key] ||= {}
                   pseudos[key][pkey] = val
                 }
-                mergeStyle(styleState, pkey, val, importance)
+                mergeStyle(
+                  styleState,
+                  pkey,
+                  val,
+                  importance,
+                  false,
+                  pseudoOriginalValues?.[pkey]
+                )
               }
 
               if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -933,6 +946,7 @@ export const getSplitStyles: StyleSplitter = (
               styleState.style ||= {}
               const scheme = mediaKeyShort
               const oppositeScheme = getOppositeScheme(mediaKeyShort)
+              const themeOriginalValues = styleOriginalValues.get(mediaStyle)
 
               for (const subKey in mediaStyle) {
                 let val = extractValueFromDynamic(mediaStyle[subKey], scheme)
@@ -946,7 +960,14 @@ export const getSplitStyles: StyleSplitter = (
                   val,
                   oppositeVal,
                 })
-                mergeStyle(styleState, subKey, mediaStyle[subKey], priority)
+                mergeStyle(
+                  styleState,
+                  subKey,
+                  mediaStyle[subKey],
+                  priority,
+                  false,
+                  themeOriginalValues?.[subKey]
+                )
               }
             } else if (
               !(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))
@@ -1034,7 +1055,9 @@ export const getSplitStyles: StyleSplitter = (
             }
           }
 
-          function mergeMediaStyle(key: string, val: any) {
+          const mediaOriginalValues = styleOriginalValues.get(mediaStyle)
+
+          function mergeMediaStyle(key: string, val: any, originalVal?: any) {
             styleState.style ||= {}
             const didMerge = mergeMediaByImportance(
               styleState,
@@ -1043,7 +1066,8 @@ export const getSplitStyles: StyleSplitter = (
               val,
               mediaState[mediaKeyShort],
               importanceBump,
-              debug
+              debug,
+              originalVal
             )
             if (didMerge && key === 'fontFamily') {
               styleState.fontFamily = mediaStyle.fontFamily as string
@@ -1058,11 +1082,18 @@ export const getSplitStyles: StyleSplitter = (
             if (subKey[0] === '$') {
               if (!isActivePlatform(subKey)) continue
               if (!isActiveTheme(subKey, themeName)) continue
+              const subOriginalValues = styleOriginalValues.get(
+                mediaStyle[subKey] as object
+              )
               for (const subSubKey in mediaStyle[subKey]) {
-                mergeMediaStyle(subSubKey, mediaStyle[subKey][subSubKey])
+                mergeMediaStyle(
+                  subSubKey,
+                  mediaStyle[subKey][subSubKey],
+                  subOriginalValues?.[subSubKey]
+                )
               }
             } else {
-              mergeMediaStyle(subKey, mediaStyle[subKey])
+              mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey])
             }
           }
         }
@@ -1447,7 +1478,8 @@ function mergeStyle(
   key: string,
   val: any,
   importance: number,
-  disableNormalize = false
+  disableNormalize = false,
+  originalVal?: any
 ) {
   const { viewProps, styleProps, staticConfig, usedKeys } = styleState
 
@@ -1458,12 +1490,16 @@ function mergeStyle(
 
   // Track context overrides for pseudo/media styles (issues #3670, #3676)
   // When a style sets a key that's in context props, update overriddenContextProps
-  // so it propagates to children. This handles pressStyle, hoverStyle, media queries, etc.
+  // so it propagates to children. Use the original token value (like '$8')
+  // instead of the resolved CSS variable (like 'var(--t-space-8)')
+  // so children's functional variants can look up token values.
   const contextProps =
     staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props
   if (contextProps && key in contextProps) {
     styleState.overriddenContextProps ||= {}
-    styleState.overriddenContextProps[key] = val
+    // Priority: 1) originalVal from propMapper, 2) tracked original from variant resolution, 3) val
+    const originalFromState = styleState.originalContextPropValues?.[key]
+    styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val
   }
 
   if (key in stylePropsTransform) {
@@ -1498,6 +1534,7 @@ export const getSubStyle = (
 ): TextStyle => {
   const { staticConfig, conf, styleProps } = styleState
   const styleOut: TextStyle = {}
+  let originalValues: Record<string, any> | undefined
 
   for (let key in styleIn) {
     const val = styleIn[key]
@@ -1508,7 +1545,12 @@ export const getSubStyle = (
       continue
     }
 
-    propMapper(key, val, styleState, false, (skey, sval) => {
+    propMapper(key, val, styleState, false, (skey, sval, originalVal) => {
+      // Track original values for context prop propagation
+      if (originalVal !== undefined) {
+        originalValues ||= {}
+        originalValues[skey] = originalVal
+      }
       // pseudo inside media
       if (skey in validPseudoKeys) {
         sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)
@@ -1539,6 +1581,11 @@ export const getSubStyle = (
     fixStyles(styleOut)
   }
 
+  // Store original values in WeakMap instead of on the object itself
+  if (originalValues) {
+    styleOriginalValues.set(styleOut, originalValues)
+  }
+
   return styleOut
 }
 
@@ -1644,7 +1691,8 @@ function mergeMediaByImportance(
   value: any,
   isSizeMedia: boolean,
   importanceBump?: number,
-  debugProp?: DebugProp
+  debugProp?: DebugProp,
+  originalVal?: any
 ) {
   const usedKeys = styleState.usedKeys
   let importance = getMediaImportanceIfMoreImportant(
@@ -1671,11 +1719,20 @@ function mergeMediaByImportance(
     if (isDisabled) {
       return false
     }
+    // For pseudo inside media, value is an object with subkeys
+    const pseudoOriginalValues = styleOriginalValues.get(value as object)
     for (const subKey in value) {
-      mergeStyle(styleState, subKey, value[subKey], importance)
+      mergeStyle(
+        styleState,
+        subKey,
+        value[subKey],
+        importance,
+        false,
+        pseudoOriginalValues?.[subKey]
+      )
     }
   } else {
-    mergeStyle(styleState, key, value, importance)
+    mergeStyle(styleState, key, value, importance, false, originalVal)
   }
 
   return true

package/src/helpers/propMapper.ts

@@ -62,6 +62,9 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
     }
   }
 
+  // Capture original value before resolution (for context prop tracking)
+  const originalValue = value
+
   if (value != null) {
     if (value[0] === '$') {
       value = getTokenForKey(key, value, styleProps, styleState)
@@ -81,10 +84,10 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
       const max = expanded.length
       for (let i = 0; i < max; i++) {
         const [nkey, nvalue] = expanded[i]
-        map(nkey, nvalue)
+        map(nkey, nvalue, originalValue)
       }
     } else {
-      map(key, value)
+      map(key, value, originalValue)
     }
   }
 }
@@ -233,15 +236,17 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
     }
 
     // Track context overrides for any key that's in context props (issues #3670, #3676)
-    // This must run for ALL keys that match context props, not just variants
+    // Store the ORIGINAL token value (like '$8') before resolution so that
+    // children's functional variants can look up token values
     if (staticConfig) {
       const contextProps =
         staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props
       if (contextProps && subKey in contextProps) {
-        if (!styleState.overriddenContextProps) {
-          styleState.overriddenContextProps = {}
-        }
+        styleState.overriddenContextProps ||= {}
         styleState.overriddenContextProps[subKey] = val
+        // Also track the original token value separately
+        styleState.originalContextPropValues ||= {}
+        styleState.originalContextPropValues[subKey] = val
       }
     }
 

package/src/types.tsx

@@ -2504,6 +2504,9 @@ export type GetStyleState = {
   flatTransforms?: Record<string, any>
   // Track style values that override context props (for issues #3670, #3676)
   overriddenContextProps?: Record<string, any>
+  // Track original token values (like '$8') before they get resolved to CSS vars
+  // This is used to preserve token strings in overriddenContextProps
+  originalContextPropValues?: Record<string, any>
 }
 
 export type StyleResolver<Response = PropMappedValue> = (
@@ -2519,7 +2522,7 @@ export type PropMapper = (
   value: any,
   state: GetStyleState,
   disabled: boolean,
-  map: (key: string, val: any) => void
+  map: (key: string, val: any, originalVal?: any) => void
 ) => void
 
 export type GenericVariantDefinitions = {

package/types/helpers/getSplitStyles.d.ts

@@ -1,6 +1,7 @@
 import type { AllGroupContexts, ComponentContextI, DebugProp, GetStyleResult, GetStyleState, SplitStyleProps, StaticConfig, TamaguiComponentState, TextStyle, ThemeParsed } from '../types';
 export type SplitStyles = ReturnType<typeof getSplitStyles>;
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>;
+export declare const styleOriginalValues: WeakMap<object, Record<string, any>>;
 type StyleSplitter = (props: {
     [key: string]: any;
 }, staticConfig: StaticConfig, theme: ThemeParsed, themeName: string, componentState: TamaguiComponentState, styleProps: SplitStyleProps, parentSplitStyles?: GetStyleResult | null, context?: ComponentContextI, groupContext?: AllGroupContexts | null, elementType?: string, startedUnhydrated?: boolean, debug?: DebugProp) => null | GetStyleResult;

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EACV,gBAAgB,EAEhB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAIb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AAoBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAIhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,KACd,IAAI,GAAG,cAAc,CAAA;AAE1B,eAAO,MAAM,UAAU,MAAM,CAAA;AAoD7B,eAAO,MAAM,cAAc,EAAE,aAswC5B,CAAA;AA0DD,eAAO,MAAM,WAAW,GACtB,YAAY,aAAa,EACzB,QAAQ,MAAM,EACd,SAAS,MAAM,EACf,sBAAsB,OAAO,KAC5B,SA6CF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EACV,gBAAgB,EAEhB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAIb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AAoBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAOhE,eAAO,MAAM,mBAAmB,sCAA6C,CAAA;AAE7E,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,KACd,IAAI,GAAG,cAAc,CAAA;AAE1B,eAAO,MAAM,UAAU,MAAM,CAAA;AAoD7B,eAAO,MAAM,cAAc,EAAE,aAgyC5B,CAAA;AA+DD,eAAO,MAAM,WAAW,GACtB,YAAY,aAAa,EACzB,QAAQ,MAAM,EACd,SAAS,MAAM,EACf,sBAAsB,OAAO,KAC5B,SAwDF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAA"}

package/types/helpers/nativeOnlyProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeOnlyProps.d.ts","sourceRoot":"","sources":["../../src/helpers/nativeOnlyProps.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B3B,CAAA"}

package/types/helpers/propMapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EAEV,eAAe,EAEf,qBAAqB,EAGtB,MAAM,UAAU,CAAA;AAQjB,eAAO,MAAM,UAAU,EAAE,UAoExB,CAAA;AAoGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AA+JD,eAAO,MAAM,cAAc,GACzB,KAAK,MAAM,EACX,OAAO,MAAM,EACb,YAAY,eAAe,EAC3B,YAAY,OAAO,CAAC,aAAa,CAAC,QAsInC,CAAA"}
+{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EAEV,eAAe,EAEf,qBAAqB,EAGtB,MAAM,UAAU,CAAA;AAQjB,eAAO,MAAM,UAAU,EAAE,UAuExB,CAAA;AAoGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAiKD,eAAO,MAAM,cAAc,GACzB,KAAK,MAAM,EACX,OAAO,MAAM,EACb,YAAY,eAAe,EAC3B,YAAY,OAAO,CAAC,aAAa,CAAC,QAsInC,CAAA"}

package/types/interfaces/TamaguiComponentPropsBaseBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TamaguiComponentPropsBaseBase.d.ts","sourceRoot":"","sources":["../../src/interfaces/TamaguiComponentPropsBaseBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAEtE,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,GAAG,KAAK,CAAA;IAE/D,uBAAuB,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5C,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAA;IAEtB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,qBAAqB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAEjD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAE5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE/B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,aAAa,CAAA;IAEzE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;CACjC,CAAA;AAED,MAAM,WAAW,MAAM;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}

package/types/types.d.ts

@@ -1498,9 +1498,10 @@ export type GetStyleState = {
     debug?: DebugProp;
     flatTransforms?: Record<string, any>;
     overriddenContextProps?: Record<string, any>;
+    originalContextPropValues?: Record<string, any>;
 };
 export type StyleResolver<Response = PropMappedValue> = (key: string, value: any, props: SplitStyleProps, state: GetStyleState, parentVariantKey: string) => Response;
-export type PropMapper = (key: string, value: any, state: GetStyleState, disabled: boolean, map: (key: string, val: any) => void) => void;
+export type PropMapper = (key: string, value: any, state: GetStyleState, disabled: boolean, map: (key: string, val: any, originalVal?: any) => void) => void;
 export type GenericVariantDefinitions = {
     [key: string]: {
         [key: string]: ((a: any, b: any) => any) | {