@tamagui/web 2.0.0-1768427228811 → 2.0.0-1768530912818

package/src/helpers/getSplitStyles.tsx

@@ -37,7 +37,6 @@ import type {
   GetStyleState,
   PseudoStyles,
   RulesToInsert,
-  SpaceTokens,
   SplitStyleProps,
   StaticConfig,
   StyleObject,
@@ -54,6 +53,7 @@ import {
   extractValueFromDynamic,
   getDynamicVal,
   getOppositeScheme,
+  isColorStyleKey,
 } from './getDynamicVal'
 import { getGroupPropParts } from './getGroupPropParts'
 import { insertStyleRules, shouldInsertStyleRules, updateRules } from './insertStyleRule'
@@ -204,7 +204,6 @@ export const getSplitStyles: StyleSplitter = (
   const classNames: ClassNamesObject = {}
 
   let pseudos: PseudoStyles | null = null
-  let space: SpaceTokens | null = props.space
   let hasMedia: boolean | Set<string> = false
   let dynamicThemeAccess: boolean | undefined
   let pseudoGroups: Set<string> | undefined
@@ -896,24 +895,44 @@ export const getSplitStyles: StyleSplitter = (
           let importanceBump = 0
 
           if (isThemeMedia) {
-            // needed to get updates when theme changes
-            dynamicThemeAccess = true
-
-            if (isIos && getSetting('fastSchemeChange')) {
+            if (
+              process.env.TAMAGUI_TARGET === 'native' &&
+              isIos &&
+              getSetting('fastSchemeChange')
+            ) {
               // iOS will use https://reactnative.dev/docs/dynamiccolorios
-              // So need to predefine the dynamic color before merging the styles
-              // For example: <StyledYStack $theme-dark={{borderColor: '$red10'}} $theme-light={{borderColor: '$green10'}}> => {borderColor: {dynamic: {dark: '$red10', light: '$green10'}}}
+              // so need to predefine the dynamic color before merging the styles
+              // for example: <StyledYStack $theme-dark={{borderColor: '$red10'}} $theme-light={{borderColor: '$green10'}}> => {borderColor: {dynamic: {dark: '$red10', light: '$green10'}}}
 
               styleState.style ||= {}
               const scheme = mediaKeyShort
               const oppositeScheme = getOppositeScheme(mediaKeyShort)
               const themeOriginalValues = styleOriginalValues.get(mediaStyle)
+              const isCurrentScheme = themeName === scheme || themeName.startsWith(scheme)
 
               for (const subKey in mediaStyle) {
                 const val = extractValueFromDynamic(mediaStyle[subKey], scheme)
                 const existing = styleState.style[subKey]
 
-                // If there's already a dynamic object from the other theme pseudo prop,
+                // Only color properties support DynamicColorIOS - non-color properties
+                // like opacity, dimensions, etc. will crash if wrapped with {dynamic: {...}}
+                // See: https://github.com/tamagui/tamagui/issues/3096
+                // See: https://github.com/tamagui/tamagui/issues/2980
+                if (!isColorStyleKey(subKey)) {
+                  // non-color properties require re-render to update
+                  dynamicThemeAccess = true
+                  // only apply if this is the current theme
+                  if (isCurrentScheme) {
+                    // update mediastyle so the later merge loop uses correct value
+                    mediaStyle[subKey] = val
+                  } else {
+                    // Remove from mediaStyle so it doesn't get merged with wrong theme's value
+                    delete mediaStyle[subKey]
+                  }
+                  continue
+                }
+
+                // if there's already a dynamic object from the other theme pseudo prop,
                 // merge directly to avoid importance conflicts between $theme-dark and $theme-light
                 if (existing?.dynamic) {
                   existing.dynamic[scheme] = val
@@ -935,10 +954,12 @@ export const getSplitStyles: StyleSplitter = (
                   )
                 }
               }
-            } else if (
-              !(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))
-            ) {
-              return
+            } else {
+              // non-ios or no fastschemechange - need re-renders for theme changes
+              dynamicThemeAccess = true
+              if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) {
+                return
+              }
             }
           } else if (isGroupMedia) {
             const groupInfo = getGroupPropParts(mediaKeyShort)

package/types/_withStableStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_withStableStyle.d.ts","sourceRoot":"","sources":["../src/_withStableStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,4DAA4D;AAE5D,eAAO,MAAM,gBAAgB,GAC3B,WAAW,GAAG,EACd,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,MAAM,qFAMvD,CAAA"}
+{"version":3,"file":"_withStableStyle.d.ts","sourceRoot":"","sources":["../src/_withStableStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,4DAA4D;AAE5D,eAAO,MAAM,gBAAgB,GAC3B,WAAW,GAAG,EACd,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,MAAM,qFAkBvD,CAAA"}

package/types/helpers/getDynamicVal.d.ts

@@ -1,4 +1,8 @@
 export declare function getOppositeScheme(scheme: string): "light" | "dark";
+/**
+ * Check if a style key is a color property that supports DynamicColorIOS.
+ */
+export declare function isColorStyleKey(key: string): boolean;
 export declare function getDynamicVal({ scheme, val, oppositeVal, }: {
     scheme: string;
     val: string;

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

@@ -1 +1 @@
-{"version":3,"file":"getDynamicVal.d.ts","sourceRoot":"","sources":["../../src/helpers/getDynamicVal.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,oBAE/C;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,EACH,WAAW,GACZ,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE;;;;EAQtD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAK/D"}
+{"version":3,"file":"getDynamicVal.d.ts","sourceRoot":"","sources":["../../src/helpers/getDynamicVal.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,oBAE/C;AA8BD;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,EACH,WAAW,GACZ,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE;;;;EAQtD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAK/D"}

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

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA8BA,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;AAyBjB,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,aA4sC5B,CAAA;AA+DD,eAAO,MAAM,WAAW,GACtB,YAAY,aAAa,EACzB,QAAQ,MAAM,EACd,SAAS,MAAM,EACf,sBAAsB,OAAO,KAC5B,SAyFF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EACV,gBAAgB,EAEhB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAGb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AA0BjB,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,aAiuC5B,CAAA;AA+DD,eAAO,MAAM,WAAW,GACtB,YAAY,aAAa,EACzB,QAAQ,MAAM,EACd,SAAS,MAAM,EACf,sBAAsB,OAAO,KAC5B,SAyFF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAA"}