@tamagui/web 1.36.6 → 1.37.0

package/src/helpers/getSplitStyles.tsx

@@ -7,7 +7,6 @@ import {
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
 import {
-  stylePropsFont,
   stylePropsText,
   stylePropsTransform,
   validPseudoKeys,
@@ -103,6 +102,7 @@ type StyleSplitter = (
 ) => GetStyleResult
 
 export const PROP_SPLIT = '-'
+let defaultFontVariable = ''
 
 // loop props backwards
 //   track used keys:
@@ -128,10 +128,10 @@ export const getSplitStyles: StyleSplitter = (
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const viewProps: GetStyleResult['viewProps'] = {}
   let pseudos: PseudoStyles | null = null
-  let psuedosUsed: Record<string, number> | null = null
   const mediaState = state.mediaState || globalMediaState
   const usedKeys: Record<string, number> = {}
   const propKeys = Object.keys(props)
+  const numProps = propKeys.length
   let space: SpaceTokens | null = props.space
   let hasMedia: boolean | string[] = false
 
@@ -140,14 +140,13 @@ export const getSplitStyles: StyleSplitter = (
 
   let style: ViewStyleWithPseudos = {}
   const flatTransforms: FlatTransforms = {}
-
-  const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
   let className = '' // existing classNames
   // we need to gather these specific to each media query / pseudo
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
   const transforms: Record<TransformNamespaceKey, [string, string]> = {}
+
   // fontFamily is our special baby, ensure we grab the latest set one always
   let fontFamily: string | undefined
 
@@ -167,15 +166,17 @@ export const getSplitStyles: StyleSplitter = (
     languageContext,
   }
 
-  if (process.env.NODE_ENV === 'development' && debug) {
-    console.groupCollapsed('getSplitStyles (looping backwards)')
+  if (process.env.NODE_ENV === 'development' && debug && isClient) {
+    console.groupCollapsed('getSplitStyles (collapsed)')
     // prettier-ignore
     // rome-ignore lint/nursery/noConsoleLog: ok
     console.log({ props, staticConfig, shouldDoClasses, state, IS_STATIC, propKeys, styleState, theme: { ...theme } })
     console.groupEnd()
   }
 
-  if (props.className) {
+  // handle before the loop so we can mark usedKeys in className
+  // since the compiler will optimize to className we just treat className as the more powerful
+  if (typeof props.className === 'string') {
     for (const cn of props.className.split(' ')) {
       if (cn[0] === '_') {
         // tamagui, merge it expanded on key, eventually this will go away with better compiler
@@ -202,59 +203,60 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  function passDownProp(
-    key: string,
-    val: any,
-    shouldMergeObject = key in pseudoDescriptors
-  ) {
-    if (shouldMergeObject) {
-      viewProps[key] ||= {}
-      // we are going backwards to apply in front
-      viewProps[key] = {
-        ...val,
-        ...viewProps[key],
-      }
-    } else {
-      usedKeys[key] = 1
-      viewProps[key] = val
-    }
-  }
-
-  /**
-   * Need to process these after done with flattening the rest of the props + variants/mediam when we have the final font family.
-   *
-   * We use this because fonts are grouped together and cannot be processed correctly without the correct font family.
-   */
-  const specialProps: [string, any][] = []
-
-  function processProp(
-    keyInit: string,
-    valInit: any,
-    special = false,
-    fontFamilyOverride: any = null
-  ) {
-    if (keyInit === 'className') return // handled above
+  for (let i = 0; i < numProps; i++) {
+    let keyInit = propKeys[i]
+    let valInit = props[keyInit]
 
     // normalize shorthands up front
     if (keyInit in shorthands) {
       keyInit = shorthands[keyInit]
     }
 
-    // edge-case: given we have `role="A"`, without this check, `accessibilityRole="B"` doesn't overwrite `role` and the value remains "A"
-    if (keyInit === 'accessibilityRole') {
-      usedKeys['role'] = 1
+    if (keyInit === 'className') continue // handled above
+    if (keyInit in usedKeys) continue
+    if (keyInit in skipProps) continue
+
+    if (process.env.TAMAGUI_TARGET === 'web') {
+      if (typeof valInit === 'string' && valInit[0] === '_') {
+        if (keyInit in validStyleProps || keyInit.includes('-')) {
+          if (process.env.NODE_ENV === 'development' && debug) {
+            // rome-ignore lint/nursery/noConsoleLog: <explanation>
+            console.log(`Adding compiled style ${keyInit}: ${valInit}`)
+          }
+
+          if (shouldDoClasses) {
+            classNames[keyInit] = valInit
+            delete style[keyInit]
+          } else {
+            style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
+            delete className[keyInit]
+          }
+          continue
+        }
+      }
     }
 
     if (process.env.TAMAGUI_TARGET === 'native') {
       if (!isAndroid) {
         // only works in android
-        if (keyInit === 'elevationAndroid') return
+        if (keyInit === 'elevationAndroid') continue
       }
+
       // map userSelect to native prop
       if (keyInit === 'userSelect') {
         keyInit = 'selectable'
         valInit = valInit === 'none' ? false : true
-      } else if (keyInit.startsWith('aria-') || keyInit === 'role') {
+      } else if (keyInit === 'role') {
+        if (valInit === 'list') {
+          // role = "list"
+          viewProps[keyInit] = valInit
+        } else if (accessibilityWebRoleToNativeRole[valInit]) {
+          viewProps['accessibilityRole'] = accessibilityWebRoleToNativeRole[
+            valInit
+          ] as GetStyleResult['viewProps']['AccessibilityRole']
+        }
+        continue
+      } else if (keyInit.startsWith('aria-')) {
         if (webToNativeAccessibilityDirectMap[keyInit]) {
           const nativeA11yProp = webToNativeAccessibilityDirectMap[keyInit]
           if (keyInit === 'aria-hidden') {
@@ -262,8 +264,7 @@ export const getSplitStyles: StyleSplitter = (
             viewProps['aria-hidden'] = valInit
           }
           viewProps[nativeA11yProp] = valInit
-          usedKeys[keyInit] = 1
-          return
+          continue
         } else if (nativeAccessibilityValue[keyInit]) {
           let field = nativeAccessibilityValue[keyInit]
           if (viewProps['accessibilityValue']) {
@@ -273,7 +274,6 @@ export const getSplitStyles: StyleSplitter = (
               [field]: valInit,
             }
           }
-          usedKeys[keyInit] = 1
         } else if (nativeAccessibilityState[keyInit]) {
           let field = nativeAccessibilityState[keyInit]
           if (viewProps['accessibilityState']) {
@@ -283,64 +283,33 @@ export const getSplitStyles: StyleSplitter = (
               [field]: valInit,
             }
           }
-          usedKeys[keyInit] = 1
-        } else if (keyInit === 'role') {
-          if (valInit === 'list') {
-            // role = "list"
-            viewProps[keyInit] = valInit
-          } else if (accessibilityWebRoleToNativeRole[valInit]) {
-            viewProps['accessibilityRole'] = accessibilityWebRoleToNativeRole[
-              valInit
-            ] as GetStyleResult['viewProps']['AccessibilityRole']
-          }
-          return
         }
-        return
+        continue
       } else if (keyInit.startsWith('data-')) {
-        return
+        continue
       }
     }
 
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      if (keyInit === 'elevationAndroid') return
-    }
-
     if (!staticConfig.isHOC) {
       if (keyInit in skipProps) {
         if (process.env.NODE_ENV === 'development' && debug && keyInit === 'debug') {
-          // pass throuhg debug
-        } else {
-          return
-        }
-      }
-    }
-
-    if (keyInit in usedKeys) {
-      return
-    }
-
-    if (typeof valInit === 'string' && valInit[0] === '_') {
-      if (keyInit in validStyleProps || keyInit.includes('-')) {
-        if (shouldDoClasses) {
-          classNames[keyInit] = valInit
+          // pass through debug
         } else {
-          style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
+          continue
         }
-        usedKeys[keyInit] = 1
-        return
       }
     }
 
     if (keyInit === 'dataSet') {
-      for (const key in valInit) {
-        viewProps[`data-${hyphenate(key)}`] = valInit[key]
+      for (const keyInit in valInit) {
+        viewProps[`data-${hyphenate(keyInit)}`] = valInit[keyInit]
       }
-      return
+      continue
     }
 
     const isMainStyle = keyInit === 'style'
     if (isMainStyle || keyInit.startsWith('_style')) {
-      if (!valInit) return
+      if (!valInit) continue
       const styles = [].concat(valInit).flat()
       const styleLen = styles.length
       for (let j = styleLen; j >= 0; j--) {
@@ -354,7 +323,7 @@ export const getSplitStyles: StyleSplitter = (
           style[key] = cur[key]
         }
       }
-      return
+      continue
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -364,7 +333,6 @@ export const getSplitStyles: StyleSplitter = (
        */
 
       if (keyInit === 'disabled' && valInit === true) {
-        usedKeys[keyInit] = 1
         viewProps['aria-disabled'] = true
         // Enhance with native semantics
         if (
@@ -377,40 +345,38 @@ export const getSplitStyles: StyleSplitter = (
           viewProps.disabled = true
         }
         if (!variants?.disabled) {
-          return
+          continue
         }
       }
 
       if (keyInit === 'testID') {
-        usedKeys[keyInit] = 1
         viewProps[isReactNative ? 'testId' : 'data-testid'] = valInit
-        return
+        continue
       }
 
       if (keyInit === 'id' || keyInit === 'nativeID') {
-        usedKeys[keyInit] = 1
         if (isReactNative) {
           viewProps.nativeID = valInit
         } else {
           viewProps.id = valInit
         }
-        return
+        continue
       }
 
       let didUseKeyInit = false
 
       if (isReactNative) {
         // pass along to react-native-web
-        if (accessibilityDirectMap[keyInit] || keyInit.startsWith('accessibility')) {
+        if (keyInit in accessibilityDirectMap || keyInit.startsWith('accessibility')) {
           viewProps[keyInit] = valInit
-          usedKeys[keyInit] = 1
-          return
+          continue
         }
       } else {
         didUseKeyInit = true
 
         if (keyInit in accessibilityDirectMap) {
           viewProps[accessibilityDirectMap[keyInit]] = valInit
+          continue
         } else {
           switch (keyInit) {
             case 'accessibilityRole': {
@@ -419,7 +385,7 @@ export const getSplitStyles: StyleSplitter = (
               } else {
                 viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
               }
-              return
+              continue
             }
             case 'accessibilityLabelledBy':
             case 'accessibilityFlowTo':
@@ -427,17 +393,17 @@ export const getSplitStyles: StyleSplitter = (
             case 'accessibilityDescribedBy': {
               viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
                 processIDRefList(valInit)
-              return
+              continue
             }
             case 'accessibilityKeyShortcuts': {
               if (Array.isArray(valInit)) {
                 viewProps['aria-keyshortcuts'] = valInit.join(' ')
               }
-              return
+              continue
             }
             case 'accessibilityLiveRegion': {
               viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
-              return
+              continue
             }
             case 'accessibilityReadOnly': {
               viewProps['aria-readonly'] = valInit
@@ -449,7 +415,7 @@ export const getSplitStyles: StyleSplitter = (
               ) {
                 viewProps.readOnly = true
               }
-              return
+              continue
             }
             case 'accessibilityRequired': {
               viewProps['aria-required'] = valInit
@@ -461,7 +427,7 @@ export const getSplitStyles: StyleSplitter = (
               ) {
                 viewProps.required = valInit
               }
-              return
+              continue
             }
             default: {
               didUseKeyInit = false
@@ -471,8 +437,7 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (didUseKeyInit) {
-        usedKeys[keyInit] = 1
-        return
+        continue
       }
 
       if (valInit && valInit[0] === '_') {
@@ -485,13 +450,12 @@ export const getSplitStyles: StyleSplitter = (
           validStyles[keyInit.split(PROP_SPLIT)[0]]
 
         if (isValidClassName || isMediaOrPseudo) {
-          usedKeys[keyInit] = 1
           if (process.env.NODE_ENV === 'development' && debug) {
             // rome-ignore lint/nursery/noConsoleLog: ok
             console.log('tamagui classname props', keyInit, valInit)
           }
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
-          return
+          continue
         }
       }
     }
@@ -507,72 +471,76 @@ export const getSplitStyles: StyleSplitter = (
     let isPseudo = keyInit in validPseudoKeys
     let isMediaOrPseudo = isMedia || isPseudo
 
-    const isVariant = variants && keyInit in variants
+    let isVariant = variants && keyInit in variants
     const isStyleProp =
       isMediaOrPseudo || isVariant || keyInit in validStyleProps || keyInit in shorthands
 
     if (isStyleProp && props.asChild === 'except-style') {
-      return
+      continue
     }
 
-    const shouldPassProp = !isStyleProp
+    const shouldPassProp = !isStyleProp && !(keyInit in handledProps)
 
-    const isHOCShouldPassThrough =
+    const isHOCShouldPassThrough = Boolean(
       staticConfig.isHOC &&
-      (isMediaOrPseudo || staticConfig.parentStaticConfig?.variants?.[keyInit])
+        (isMediaOrPseudo || staticConfig.parentStaticConfig?.variants?.[keyInit])
+    )
+
     const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
 
     if (shouldPassThrough) {
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
         console.groupCollapsed(`  🔹 pass through ${keyInit}`)
+        // prettier-ignore
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log({
-          valInit,
-          variants,
-          variant: variants?.[keyInit],
-          isVariant,
-          shouldPassProp,
-          isHOCShouldPassThrough,
-        })
+        console.log({ valInit, variants, variant: variants?.[keyInit], isVariant, shouldPassProp, isHOCShouldPassThrough })
         console.groupEnd()
       }
 
-      if (isPseudo) {
-        // this is a lot... but we need to track sub-keys so we don't override them in future things that aren't passed down
-        // like our own variants that aren't in parent
-        const pseudoStyleObject = getSubStyle(
-          styleState,
-          keyInit,
-          valInit,
-          true,
-          state.noClassNames
-        )
-        const descriptor = pseudoDescriptors[keyInit]
-        for (const key in pseudoStyleObject) {
-          const fullKey = `${key}${PROP_SPLIT}${descriptor.name}`
-          usedKeys[fullKey] = 1
-        }
-      }
-
-      passDownProp(keyInit, valInit, isMediaOrPseudo)
+      // // TODO bring this back but probably improve it?
+      // if (isPseudo) {
+      //   // this is a lot... but we need to track sub-keys so we don't override them in future things that aren't passed down
+      //   // like our own variants that aren't in parent
+      //   const pseudoStyleObject = getSubStyle(
+      //     styleState,
+      //     keyInit,
+      //     valInit,
+      //     fontFamily,
+      //     true,
+      //     state.noClassNames
+      //   )
+      //   const descriptor = pseudoDescriptors[keyInit]
+      //   for (const key in pseudoStyleObject) {
+      //     debugger
+      //   }
+      // }
+
+      passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo)
 
       // if it's a variant here, we have a two layer variant...
       // aka styled(Input, { unstyled: true, variants: { unstyled: {} } })
       // which now has it's own unstyled + the child unstyled...
       // so *don't* skip applying the styles, but also pass `unstyled` to children
       if (!isVariant) {
-        return
+        continue
       }
     }
 
+    // default font family
+    // is this great? no, but backwards compat until we add tests and make better
+    defaultFontVariable ||= `$${conf.defaultFont}`
+    fontFamily ||=
+      props[conf.inverseShorthands.fontFamily] || props.fontFamily || defaultFontVariable
+
     const expanded = isMediaOrPseudo
       ? [[keyInit, valInit]]
       : propMapper(
           keyInit,
           valInit,
           theme,
-          special ? { ...props, fontFamily: fontFamilyOverride } : props,
+          props,
           state,
+          fontFamily,
           languageContext,
           undefined,
           debug
@@ -582,18 +550,11 @@ export const getSplitStyles: StyleSplitter = (
       fontFamily = getPropMappedFontFamily(expanded)
     }
 
-    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+    if (process.env.NODE_ENV === 'development' && debug === 'verbose' && isClient) {
       console.groupCollapsed('  🔹 styles', keyInit, valInit)
+      // prettier-ignore
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
-      console.log({
-        expanded,
-        state,
-        isVariant,
-        variant: variants?.[keyInit],
-        shouldPassProp,
-        isHOCShouldPassThrough,
-        theme,
-      })
+      console.log({ expanded, state: { ...state }, isVariant, variant: variants?.[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys } })
       if (!isServer && isDevTools) {
         // rome-ignore lint/nursery/noConsoleLog: ok
         console.log('expanded', expanded, '\nusedKeys', { ...usedKeys }, '\ncurrent', {
@@ -603,30 +564,18 @@ export const getSplitStyles: StyleSplitter = (
       console.groupEnd()
     }
 
-    if (!expanded) return
+    if (!expanded) continue
 
     for (const [key, val] of expanded) {
-      if (val === undefined) continue
+      if (val == null) continue
 
-      if (key in stylePropsFont && !special && key !== 'fontFamily') {
-        specialProps.push([key, val])
-        continue
-      }
+      if (key in usedKeys) continue
 
       isMedia = isMediaKey(key)
       isPseudo = key in validPseudoKeys
       isMediaOrPseudo = isMedia || isPseudo
 
-      if (!isMediaOrPseudo && key in usedKeys) {
-        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-          // rome-ignore lint/nursery/noConsoleLog: <explanation>
-          console.log(`Used media/pseudo ${key}`)
-        }
-        continue
-      }
-
       if (inlineProps?.has(key) || inlineWhenUnflattened?.has(key)) {
-        usedKeys[key] = 1
         viewProps[key] = props[key] ?? val
       }
 
@@ -636,7 +585,14 @@ export const getSplitStyles: StyleSplitter = (
         (isMediaOrPseudo || staticConfig.parentStaticConfig?.variants?.[keyInit])
 
       if (isHOCShouldPassThrough) {
-        passDownProp(key, val)
+        isVariant = variants && key in variants
+        passDownProp(viewProps, key, val, isMediaOrPseudo)
+        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+          console.groupCollapsed(` - passing down prop ${key}`)
+          // rome-ignore lint/nursery/noConsoleLog: <explanation>
+          console.log({ val, after: { ...viewProps[key] } })
+          console.groupEnd()
+        }
         // if its also a variant here, pass down but also keep it
         if (!isVariant) {
           continue
@@ -652,6 +608,7 @@ export const getSplitStyles: StyleSplitter = (
           styleState,
           key,
           val,
+          fontFamily,
           true,
           state.noClassNames
         )
@@ -662,38 +619,42 @@ export const getSplitStyles: StyleSplitter = (
 
         // don't continue here on isEnter && !state.unmounted because we need to merge defaults
         if (!descriptor || (isExit && !state.isExiting)) {
+          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+            // prettier-ignore
+            // rome-ignore lint/nursery/noConsoleLog: <explanation>
+            console.log('skip exit')
+          }
+
           continue
         }
 
         if (!shouldDoClasses || IS_STATIC) {
           pseudos ||= {}
           pseudos[key] ||= {}
-          Object.assign(pseudos[key], pseudoStyleObject)
         }
 
         if (shouldDoClasses && !isEnter && !isExit) {
           const pseudoStyles = generateAtomicStyles(pseudoStyleObject, descriptor)
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
-
-            if (!(fullKey in usedKeys)) {
-              usedKeys[fullKey] = 1
-              addStyleToInsertRules(rulesToInsert, psuedoStyle)
-              mergeClassName(
-                transforms,
-                classNames,
-                fullKey,
-                psuedoStyle.identifier,
-                isMediaOrPseudo
-              )
-            }
+            addStyleToInsertRules(rulesToInsert, psuedoStyle)
+            mergeClassName(
+              transforms,
+              classNames,
+              fullKey,
+              psuedoStyle.identifier,
+              isMediaOrPseudo
+            )
           }
         } else {
-          if (key in usedKeys) {
-            continue
-          }
+          // we don't skip this if disabled because we need to animate to default states that aren't even set:
+          // so if we have <Stack enterStyle={{ opacity: 0 }} />
+          // we need to animate from 0 => 1 once enter is finished
+          // see the if (isDisabled) block below which loops through animatableDefaults
 
-          let isDisabled = !state[descriptor.stateKey || descriptor.name]
+          const descriptorKey = descriptor.stateKey || descriptor.name
+          const pseudoState = state[descriptorKey]
+          let isDisabled = !pseudoState
 
           // we never animate in on server side just show the full thing
           // on client side we use CSS to hide the fully in SSR items, then
@@ -702,51 +663,62 @@ export const getSplitStyles: StyleSplitter = (
             isDisabled = false
           }
 
-          if (!isDisabled) {
-            if (valInit === staticConfig.defaultProps[keyInit]) {
-              // ignore:
-              // if it's a default property given by styled(), we don't mark it as used, so
-              // that props given inline can override:
-            } else {
-              usedKeys[key] ||= 1
-              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                // rome-ignore lint/nursery/noConsoleLog: <explanation>
-                console.log(`Setting used ${key}`)
-              }
-            }
+          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+            // prettier-ignore
+            console.groupCollapsed('pseudo', keyInit, !isDisabled)
+            // prettier-ignore
+            // rome-ignore lint/nursery/noConsoleLog: <explanation>
+            console.log(pseudoStyleObject, { isDisabled, descriptorKey, descriptor, pseudoState, state: { ...state } })
+            console.groupEnd()
           }
 
-          psuedosUsed ||= {}
+          // if (!isDisabled) {
+          //   if (valInit === staticConfig.defaultProps[keyInit]) {
+          //     // ignore:
+          //     // if it's a default property given by styled(), we don't mark it as used, so
+          //     // that props given inline can override:
+          //   }
+          // }
 
           const importance = descriptor.priority
 
+          if (!isDisabled) {
+            // mark usedKeys based not on pseudoStyleObject
+            for (const key in val) {
+              const k = shorthands[key] || key
+              usedKeys[k] = Math.max(importance, usedKeys[k] || 0)
+            }
+          }
+
           for (const pkey in pseudoStyleObject) {
             const val = pseudoStyleObject[pkey]
             // when disabled ensure the default value is set for future animations to align
+
             if (isDisabled) {
-              if (!(pkey in usedKeys) && pkey in animatableDefaults) {
+              if (pkey in animatableDefaults && !(pkey in usedKeys)) {
                 const defaultVal = animatableDefaults[pkey]
-                mergeStyle(styleState, flatTransforms, pkey, defaultVal, true)
+                mergeStyle(styleState, flatTransforms, pkey, defaultVal)
+              }
+            } else {
+              const curImportance = usedKeys[importance] || 0
+              const shouldMerge = importance >= curImportance
+
+              if (shouldMerge) {
+                pseudos ||= {}
+                pseudos[key] ||= {}
+                pseudos[key][pkey] = val
+                mergeStyle(styleState, flatTransforms, pkey, val)
+                usedKeys[pkey] ||= 1
+              }
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                // prettier-ignore
+                // rome-ignore lint/nursery/noConsoleLog: <explanation>
+                console.log('    subKey', pkey, shouldMerge, { importance, curImportance, pkey, val })
               }
-              continue
-            }
-            const curImportance = psuedosUsed[importance] || 0
-            const shouldMerge = importance >= curImportance
-
-            if (shouldMerge) {
-              psuedosUsed[pkey] = importance
-              pseudos ||= {}
-              pseudos[key] ||= {}
-              pseudos[key][pkey] = val
-              mergeStyle(styleState, flatTransforms, pkey, val)
-            }
-            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-              // prettier-ignore
-              // rome-ignore lint/nursery/noConsoleLog: <explanation>
-              console.log('    merge pseudo?', keyInit, shouldMerge, { importance, curImportance, pkey, val })
             }
           }
         }
+
         continue
       }
 
@@ -763,6 +735,7 @@ export const getSplitStyles: StyleSplitter = (
           styleState,
           key,
           val,
+          fontFamily,
           // TODO try true like pseudo
           false
         )
@@ -809,12 +782,8 @@ export const getSplitStyles: StyleSplitter = (
           for (const style of mediaStyles) {
             const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)
             const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`
-
-            if (!usedKeys[fullKey]) {
-              usedKeys[fullKey] = 1
-              addStyleToInsertRules(rulesToInsert, out as any)
-              mergeClassName(transforms, classNames, fullKey, out.identifier, true)
-            }
+            addStyleToInsertRules(rulesToInsert, out as any)
+            mergeClassName(transforms, classNames, fullKey, out.identifier, true)
           }
         } else if (mediaState[mediaKeyShort]) {
           for (const subKey in mediaStyle) {
@@ -845,7 +814,6 @@ export const getSplitStyles: StyleSplitter = (
 
       if (process.env.TAMAGUI_TARGET === 'native') {
         if (key === 'pointerEvents') {
-          usedKeys[key] = 1
           viewProps[key] = val
           continue
         }
@@ -858,13 +826,9 @@ export const getSplitStyles: StyleSplitter = (
         }
       }
 
-      if (key in validStyleProps) {
-        mergeStyle(styleState, flatTransforms, key, val)
-        continue
-      } else if (
-        process.env.TAMAGUI_TARGET === 'native' &&
-        isAndroid &&
-        key === 'elevation'
+      if (
+        key in validStyleProps ||
+        (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
       ) {
         mergeStyle(styleState, flatTransforms, key, val)
         continue
@@ -873,28 +837,13 @@ export const getSplitStyles: StyleSplitter = (
       // pass to view props
       if (!isVariant && !(key in skipProps)) {
         viewProps[key] = val
-        usedKeys[key] = 1
       }
     }
   }
 
-  // loop backwards so we can skip already-used props
-  for (let i = len - 1; i >= 0; i--) {
-    const keyInit = propKeys[i]
-    const valInit = props[keyInit]
-    processProp(keyInit, valInit)
-  }
-
   // default to default font
   fontFamily ||= conf.defaultFont
 
-  // loop the special props once again
-  // this one doesn't need to be backwards since it was pushed in the backwards loop (is already reversed)
-  for (let i = 0; i < specialProps.length; i++) {
-    const [key, value] = specialProps[i]
-    processProp(key, value, true, fontFamily)
-  }
-
   fixStyles(style)
   if (isWeb) {
     styleToCSS(style)
@@ -932,7 +881,7 @@ export const getSplitStyles: StyleSplitter = (
   // always do this at the very end to preserve the order strictly (animations, origin)
   // and allow proper merging of all pseudos before applying
   if (flatTransforms) {
-    mergeTransforms(style, flatTransforms, true)
+    mergeFlatTransforms(style, flatTransforms, true)
   }
 
   // add in defaults if not set:
@@ -961,9 +910,10 @@ export const getSplitStyles: StyleSplitter = (
         // avoid re-processing for rnw
       } else {
         const atomic = getStylesAtomic(style)
+
         for (const atomicStyle of atomic) {
           const key = atomicStyle.property
-          if (props.animateOnly && props.animateOnly.includes(key)) {
+          if (state.isAnimated && props.animateOnly && props.animateOnly.includes(key)) {
             retainedStyles[key] = style[key]
           } else {
             addStyleToInsertRules(rulesToInsert, atomicStyle)
@@ -1042,21 +992,11 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  // now we need to reverse viewProps because order is important for wrapped tamagui children:
-  // techcnically we could just do this when it is HOC/has parentStaticConfig I think... but safer this way
-  const nextViewProps = {}
-  const ks = Object.keys(viewProps)
-  const l = ks.length
-  for (let i = l - 1; i >= 0; i--) {
-    const key = ks[i]
-    nextViewProps[key] = viewProps[key]
-  }
-
   const result: GetStyleResult = {
     space,
     hasMedia,
     fontFamily,
-    viewProps: nextViewProps,
+    viewProps,
     // @ts-expect-error
     style,
     pseudos,
@@ -1070,9 +1010,9 @@ export const getSplitStyles: StyleSplitter = (
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     if (isDevTools) {
-      console.groupCollapsed('  🔹 =>')
+      console.groupCollapsed('  🔹 ===>')
       // prettier-ignore
-      const logs = { ...result, state, etc: { transforms, viewProps, rulesToInsert, parentSplitStyles, flatTransforms } }
+      const logs = { ...result, state, transforms, viewProps, viewPropsOrder: Object.keys(viewProps), rulesToInsert, parentSplitStyles, flatTransforms }
       for (const key in logs) {
         // rome-ignore lint/nursery/noConsoleLog: ok
         console.log(key, logs[key])
@@ -1177,17 +1117,14 @@ function getSubStyleProps(
 }
 
 function mergeStyle(
-  { usedKeys, classNames, viewProps, style }: GetStyleState,
+  { classNames, viewProps, style, usedKeys }: GetStyleState,
   flatTransforms: FlatTransforms,
   key: string,
-  val: any,
-  dontSetUsed = false
+  val: any
 ) {
-  if (!dontSetUsed) {
-    usedKeys[key] ||= 1
-  }
   if (val && val[0] === '_') {
     classNames[key] = val
+    usedKeys[key] ||= 1
   } else if (key in stylePropsTransform) {
     flatTransforms ||= {}
     flatTransforms[key] = val
@@ -1205,6 +1142,7 @@ export const getSubStyle = (
   styleState: GetStyleState,
   subKey: string,
   styleIn: Object,
+  fontFamily?: string,
   avoidDefaultProps?: boolean,
   avoidMergeTransform?: boolean
 ): TextStyleProps => {
@@ -1220,15 +1158,13 @@ export const getSubStyle = (
       theme,
       getSubStyleProps(staticConfig.defaultProps, props, props[subKey]),
       state,
+      fontFamily,
       languageContext,
       avoidDefaultProps
     )
-    if (!staticConfig.isHOC) {
-      if (key in skipProps) {
-        continue
-      }
+    if (!expanded || (!staticConfig.isHOC && key in skipProps)) {
+      continue
     }
-    if (!expanded) continue
     for (const [skey, sval] of expanded) {
       if (!avoidMergeTransform && skey in stylePropsTransform) {
         mergeTransform(styleOut, skey, sval)
@@ -1280,6 +1216,8 @@ const animatableDefaults = {
   rotate: '0deg',
   rotateY: '0deg',
   rotateX: '0deg',
+  x: 0,
+  y: 0,
 }
 
 const lowercaseHyphenate = (match: string) => `-${match.toLowerCase()}`
@@ -1299,14 +1237,25 @@ const mergeTransform = (
   } as any)
 }
 
-const mergeTransforms = (
+// we need to match the order for animations to work because it needs consistent order
+// was thinking of having something like `state.prevTransformsOrder = ['y', 'x', ...]
+// but if we just handle it here its not a big cost and avoids having stateful things
+// so the strategy is: always sort by a consistent order, until you run into a "duplicate"
+// because you can have something like:
+//   [{ translateX: 0 }, { scale: 1 }, { translateX: 10 }]
+// so basically we sort until we get to a duplicate... we could sort even smarter but
+// this should work for most (all?) of our cases since the order preservation really only needs to apply
+// to the "flat" transform props
+const mergeFlatTransforms = (
   obj: TextStyleProps,
   flatTransforms: FlatTransforms,
   backwards = false
 ) => {
-  Object.entries(flatTransforms).forEach(([key, val]) => {
-    mergeTransform(obj, key, val, backwards)
-  })
+  Object.entries(flatTransforms)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .forEach(([key, val]) => {
+      mergeTransform(obj, key, val, backwards)
+    })
 }
 
 const mapTransformKeys = {
@@ -1323,6 +1272,10 @@ const skipProps = {
   tag: true,
 }
 
+const handledProps = {
+  role: true,
+}
+
 if (process.env.NODE_ENV === 'test') {
   skipProps['data-test-renders'] = true
 }
@@ -1345,6 +1298,10 @@ if (process.env.TAMAGUI_TARGET === 'native') {
     outlineWidth: true,
     outlineColor: true,
   })
+} else {
+  Object.assign(skipProps, {
+    elevationAndroid: true,
+  })
 }
 
 const accessibilityRoleToWebRole = {
@@ -1355,3 +1312,22 @@ const accessibilityRoleToWebRole = {
   none: 'presentation',
   summary: 'region',
 }
+
+function passDownProp(
+  viewProps: Object,
+  key: string,
+  val: any,
+  shouldMergeObject = false
+) {
+  if (shouldMergeObject) {
+    const next = {
+      ...viewProps[key],
+      ...val,
+    }
+    // need to re-insert it at current position
+    delete viewProps[key]
+    viewProps[key] = next
+  } else {
+    viewProps[key] = val
+  }
+}