@tamagui/web 1.36.6 → 1.37.0

package/dist/esm/helpers/getSplitStyles.js

@@ -7,7 +7,6 @@ import {
   useIsomorphicLayoutEffect
 } from "@tamagui/constants";
 import {
-  stylePropsFont,
   stylePropsText,
   stylePropsTransform,
   validPseudoKeys,
@@ -49,24 +48,24 @@ import {
 import { pseudoDescriptors } from "./pseudoDescriptors";
 let conf;
 const PROP_SPLIT = "-";
+let defaultFontVariable = "";
 const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, languageContext, elementType, debug) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g;
   conf = conf || getConfig();
   const { shorthands } = conf;
   const { variants, propMapper, isReactNative, inlineProps, inlineWhenUnflattened } = staticConfig;
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
   let pseudos = null;
-  let psuedosUsed = null;
   const mediaState = state.mediaState || globalMediaState;
   const usedKeys = {};
   const propKeys = Object.keys(props);
+  const numProps = propKeys.length;
   let space = props.space;
   let hasMedia = false;
   const shouldDoClasses = staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames;
   let style = {};
   const flatTransforms = {};
-  const len = propKeys.length;
   const rulesToInsert = [];
   const classNames = {};
   let className = "";
@@ -84,12 +83,12 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
     viewProps,
     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)");
     console.log({ props, staticConfig, shouldDoClasses, state, IS_STATIC, propKeys, styleState, theme: { ...theme } });
     console.groupEnd();
   }
-  if (props.className) {
+  if (typeof props.className === "string") {
     for (const cn of props.className.split(" ")) {
       if (cn[0] === "_") {
         const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
@@ -112,46 +111,58 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       }
     }
   }
-  function passDownProp(key, val, shouldMergeObject = key in pseudoDescriptors) {
-    if (shouldMergeObject) {
-      viewProps[key] ||= {};
-      viewProps[key] = {
-        ...val,
-        ...viewProps[key]
-      };
-    } else {
-      usedKeys[key] = 1;
-      viewProps[key] = val;
-    }
-  }
-  const specialProps = [];
-  function processProp(keyInit, valInit, special = false, fontFamilyOverride = null) {
-    var _a2, _b2, _c2, _d;
-    if (keyInit === "className")
-      return;
+  for (let i = 0; i < numProps; i++) {
+    let keyInit = propKeys[i];
+    let valInit = props[keyInit];
     if (keyInit in shorthands) {
       keyInit = shorthands[keyInit];
     }
-    if (keyInit === "accessibilityRole") {
-      usedKeys["role"] = 1;
+    if (keyInit === "className")
+      continue;
+    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) {
+            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) {
         if (keyInit === "elevationAndroid")
-          return;
+          continue;
       }
       if (keyInit === "userSelect") {
         keyInit = "selectable";
         valInit = valInit === "none" ? false : true;
-      } else if (keyInit.startsWith("aria-") || keyInit === "role") {
+      } else if (keyInit === "role") {
+        if (valInit === "list") {
+          viewProps[keyInit] = valInit;
+        } else if (accessibilityWebRoleToNativeRole[valInit]) {
+          viewProps["accessibilityRole"] = accessibilityWebRoleToNativeRole[valInit];
+        }
+        continue;
+      } else if (keyInit.startsWith("aria-")) {
         if (webToNativeAccessibilityDirectMap[keyInit]) {
           const nativeA11yProp = webToNativeAccessibilityDirectMap[keyInit];
           if (keyInit === "aria-hidden") {
             viewProps["aria-hidden"] = valInit;
           }
           viewProps[nativeA11yProp] = valInit;
-          usedKeys[keyInit] = 1;
-          return;
+          continue;
         } else if (nativeAccessibilityValue[keyInit]) {
           let field = nativeAccessibilityValue[keyInit];
           if (viewProps["accessibilityValue"]) {
@@ -161,7 +172,6 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
               [field]: valInit
             };
           }
-          usedKeys[keyInit] = 1;
         } else if (nativeAccessibilityState[keyInit]) {
           let field = nativeAccessibilityState[keyInit];
           if (viewProps["accessibilityState"]) {
@@ -171,56 +181,30 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
               [field]: valInit
             };
           }
-          usedKeys[keyInit] = 1;
-        } else if (keyInit === "role") {
-          if (valInit === "list") {
-            viewProps[keyInit] = valInit;
-          } else if (accessibilityWebRoleToNativeRole[valInit]) {
-            viewProps["accessibilityRole"] = accessibilityWebRoleToNativeRole[valInit];
-          }
-          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") {
         } else {
-          return;
-        }
-      }
-    }
-    if (keyInit in usedKeys) {
-      return;
-    }
-    if (typeof valInit === "string" && valInit[0] === "_") {
-      if (keyInit in validStyleProps || keyInit.includes("-")) {
-        if (shouldDoClasses) {
-          classNames[keyInit] = valInit;
-        } 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 keyInit2 in valInit) {
+        viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
       }
-      return;
+      continue;
     }
     const isMainStyle = keyInit === "style";
     if (isMainStyle || keyInit.startsWith("_style")) {
       if (!valInit)
-        return;
+        continue;
       const styles = [].concat(valInit).flat();
       const styleLen = styles.length;
       for (let j = styleLen; j >= 0; j--) {
@@ -235,44 +219,41 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
           style[key] = cur[key];
         }
       }
-      return;
+      continue;
     }
     if (process.env.TAMAGUI_TARGET === "web") {
       if (keyInit === "disabled" && valInit === true) {
-        usedKeys[keyInit] = 1;
         viewProps["aria-disabled"] = true;
         if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
           viewProps.disabled = true;
         }
         if (!(variants == null ? void 0 : 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) {
-        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": {
@@ -281,38 +262,38 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
               } else {
                 viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
               }
-              return;
+              continue;
             }
             case "accessibilityLabelledBy":
             case "accessibilityFlowTo":
             case "accessibilityControls":
             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;
               if (elementType === "input" || elementType === "select" || elementType === "textarea") {
                 viewProps.readOnly = true;
               }
-              return;
+              continue;
             }
             case "accessibilityRequired": {
               viewProps["aria-required"] = valInit;
               if (elementType === "input" || elementType === "select" || elementType === "textarea") {
                 viewProps.required = valInit;
               }
-              return;
+              continue;
             }
             default: {
               didUseKeyInit = false;
@@ -321,71 +302,53 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         }
       }
       if (didUseKeyInit) {
-        usedKeys[keyInit] = 1;
-        return;
+        continue;
       }
       if (valInit && valInit[0] === "_") {
         const isValidClassName = keyInit in validStyles;
         const isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
         if (isValidClassName || isMediaOrPseudo2) {
-          usedKeys[keyInit] = 1;
           if (process.env.NODE_ENV === "development" && debug) {
             console.log("tamagui classname props", keyInit, valInit);
           }
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2);
-          return;
+          continue;
         }
       }
     }
     let isMedia = isMediaKey(keyInit);
     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 isHOCShouldPassThrough = staticConfig.isHOC && (isMediaOrPseudo || ((_b2 = (_a2 = staticConfig.parentStaticConfig) == null ? void 0 : _a2.variants) == null ? void 0 : _b2[keyInit]));
+    const shouldPassProp = !isStyleProp && !(keyInit in handledProps);
+    const isHOCShouldPassThrough = Boolean(
+      staticConfig.isHOC && (isMediaOrPseudo || ((_b = (_a = staticConfig.parentStaticConfig) == null ? void 0 : _a.variants) == null ? void 0 : _b[keyInit]))
+    );
     const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
     if (shouldPassThrough) {
       if (process.env.NODE_ENV === "development" && debug === "verbose") {
         console.groupCollapsed(`  \u{1F539} pass through ${keyInit}`);
-        console.log({
-          valInit,
-          variants,
-          variant: variants == null ? void 0 : variants[keyInit],
-          isVariant,
-          shouldPassProp,
-          isHOCShouldPassThrough
-        });
+        console.log({ valInit, variants, variant: variants == null ? void 0 : variants[keyInit], isVariant, shouldPassProp, isHOCShouldPassThrough });
         console.groupEnd();
       }
-      if (isPseudo) {
-        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);
+      passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo);
       if (!isVariant) {
-        return;
+        continue;
       }
     }
+    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,
       void 0,
       debug
@@ -393,17 +356,9 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
     if (!fontFamily) {
       fontFamily = getPropMappedFontFamily(expanded);
     }
-    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && isClient) {
       console.groupCollapsed("  \u{1F539} styles", keyInit, valInit);
-      console.log({
-        expanded,
-        state,
-        isVariant,
-        variant: variants == null ? void 0 : variants[keyInit],
-        shouldPassProp,
-        isHOCShouldPassThrough,
-        theme
-      });
+      console.log({ expanded, state: { ...state }, isVariant, variant: variants == null ? void 0 : variants[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys } });
       if (!isServer && isDevTools) {
         console.log("expanded", expanded, "\nusedKeys", { ...usedKeys }, "\ncurrent", {
           ...style
@@ -412,30 +367,27 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       console.groupEnd();
     }
     if (!expanded)
-      return;
+      continue;
     for (const [key, val] of expanded) {
-      if (val === void 0)
+      if (val == null)
         continue;
-      if (key in stylePropsFont && !special && key !== "fontFamily") {
-        specialProps.push([key, val]);
+      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") {
-          console.log(`Used media/pseudo ${key}`);
-        }
-        continue;
-      }
       if ((inlineProps == null ? void 0 : inlineProps.has(key)) || (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key))) {
-        usedKeys[key] = 1;
         viewProps[key] = props[key] ?? val;
       }
-      const isHOCShouldPassThrough2 = staticConfig.isHOC && (isMediaOrPseudo || ((_d = (_c2 = staticConfig.parentStaticConfig) == null ? void 0 : _c2.variants) == null ? void 0 : _d[keyInit]));
+      const isHOCShouldPassThrough2 = staticConfig.isHOC && (isMediaOrPseudo || ((_d = (_c = staticConfig.parentStaticConfig) == null ? void 0 : _c.variants) == null ? void 0 : _d[keyInit]));
       if (isHOCShouldPassThrough2) {
-        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}`);
+          console.log({ val, after: { ...viewProps[key] } });
+          console.groupEnd();
+        }
         if (!isVariant) {
           continue;
         }
@@ -447,6 +399,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
           styleState,
           key,
           val,
+          fontFamily,
           true,
           state.noClassNames
         );
@@ -454,68 +407,67 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         const isEnter = descriptor.name === "enter";
         const isExit = descriptor.name === "exit";
         if (!descriptor || isExit && !state.isExiting) {
+          if (process.env.NODE_ENV === "development" && debug === "verbose") {
+            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;
-          }
-          let isDisabled = !state[descriptor.stateKey || descriptor.name];
+          const descriptorKey = descriptor.stateKey || descriptor.name;
+          const pseudoState = state[descriptorKey];
+          let isDisabled = !pseudoState;
           if (isWeb && !isClient && isEnter) {
             isDisabled = false;
           }
+          if (process.env.NODE_ENV === "development" && debug === "verbose") {
+            console.groupCollapsed("pseudo", keyInit, !isDisabled);
+            console.log(pseudoStyleObject, { isDisabled, descriptorKey, descriptor, pseudoState, state: { ...state } });
+            console.groupEnd();
+          }
+          const importance = descriptor.priority;
           if (!isDisabled) {
-            if (valInit === staticConfig.defaultProps[keyInit]) {
-            } else {
-              usedKeys[key] ||= 1;
-              if (process.env.NODE_ENV === "development" && debug === "verbose") {
-                console.log(`Setting used ${key}`);
-              }
+            for (const key2 in val) {
+              const k = shorthands[key2] || key2;
+              usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
             }
           }
-          psuedosUsed ||= {};
-          const importance = descriptor.priority;
           for (const pkey in pseudoStyleObject) {
             const val2 = pseudoStyleObject[pkey];
             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] = val2;
+                mergeStyle(styleState, flatTransforms, pkey, val2);
+                usedKeys[pkey] ||= 1;
+              }
+              if (process.env.NODE_ENV === "development" && debug === "verbose") {
+                console.log("    subKey", pkey, shouldMerge, { importance, curImportance, pkey, val: val2 });
               }
-              continue;
-            }
-            const curImportance = psuedosUsed[importance] || 0;
-            const shouldMerge = importance >= curImportance;
-            if (shouldMerge) {
-              psuedosUsed[pkey] = importance;
-              pseudos ||= {};
-              pseudos[key] ||= {};
-              pseudos[key][pkey] = val2;
-              mergeStyle(styleState, flatTransforms, pkey, val2);
-            }
-            if (process.env.NODE_ENV === "development" && debug === "verbose") {
-              console.log("    merge pseudo?", keyInit, shouldMerge, { importance, curImportance, pkey, val: val2 });
             }
           }
         }
@@ -529,6 +481,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
           styleState,
           key,
           val,
+          fontFamily,
           // TODO try true like pseudo
           false
         );
@@ -567,11 +520,8 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
           for (const style2 of mediaStyles) {
             const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
             const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
-            if (!usedKeys[fullKey]) {
-              usedKeys[fullKey] = 1;
-              addStyleToInsertRules(rulesToInsert, out);
-              mergeClassName(transforms, classNames, fullKey, out.identifier, true);
-            }
+            addStyleToInsertRules(rulesToInsert, out);
+            mergeClassName(transforms, classNames, fullKey, out.identifier, true);
           }
         } else if (mediaState[mediaKeyShort]) {
           for (const subKey in mediaStyle) {
@@ -602,7 +552,6 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       }
       if (process.env.TAMAGUI_TARGET === "native") {
         if (key === "pointerEvents") {
-          usedKeys[key] = 1;
           viewProps[key] = val;
           continue;
         }
@@ -613,38 +562,25 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
           fontFamily = fam;
         }
       }
-      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;
       }
       if (!isVariant && !(key in skipProps)) {
         viewProps[key] = val;
-        usedKeys[key] = 1;
       }
     }
   }
-  for (let i = len - 1; i >= 0; i--) {
-    const keyInit = propKeys[i];
-    const valInit = props[keyInit];
-    processProp(keyInit, valInit);
-  }
   fontFamily ||= conf.defaultFont;
-  for (let i = 0; i < specialProps.length; i++) {
-    const [key, value] = specialProps[i];
-    processProp(key, value, true, fontFamily);
-  }
   fixStyles(style);
   if (isWeb) {
     styleToCSS(style);
   }
   if (process.env.TAMAGUI_TARGET === "native") {
     if ("fontFamily" in style && style.fontFamily) {
-      const faceInfo = (_a = getFont(style.fontFamily)) == null ? void 0 : _a.face;
+      const faceInfo = (_e = getFont(style.fontFamily)) == null ? void 0 : _e.face;
       if (faceInfo) {
-        const overrideFace = (_c = (_b = faceInfo[style.fontWeight]) == null ? void 0 : _b[style.fontStyle || "normal"]) == null ? void 0 : _c.val;
+        const overrideFace = (_g = (_f = faceInfo[style.fontWeight]) == null ? void 0 : _f[style.fontStyle || "normal"]) == null ? void 0 : _g.val;
         if (overrideFace) {
           style.fontFamily = overrideFace;
           fontFamily = overrideFace;
@@ -664,7 +600,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
     }
   }
   if (flatTransforms) {
-    mergeTransforms(style, flatTransforms, true);
+    mergeFlatTransforms(style, flatTransforms, true);
   }
   if (parentSplitStyles) {
     if (process.env.TAMAGUI_TARGET === "web") {
@@ -693,7 +629,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         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);
@@ -757,18 +693,11 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       }
     }
   }
-  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 = {
     space,
     hasMedia,
     fontFamily,
-    viewProps: nextViewProps,
+    viewProps,
     // @ts-expect-error
     style,
     pseudos,
@@ -780,8 +709,8 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
   }
   if (process.env.NODE_ENV === "development" && debug === "verbose") {
     if (isDevTools) {
-      console.groupCollapsed("  \u{1F539} =>");
-      const logs = { ...result, state, etc: { transforms, viewProps, rulesToInsert, parentSplitStyles, flatTransforms } };
+      console.groupCollapsed("  \u{1F539} ===>");
+      const logs = { ...result, state, transforms, viewProps, viewPropsOrder: Object.keys(viewProps), rulesToInsert, parentSplitStyles, flatTransforms };
       for (const key in logs) {
         console.log(key, logs[key]);
       }
@@ -821,12 +750,10 @@ function getSubStyleProps(defaultProps, baseProps, specificProps) {
     ...specificProps
   };
 }
-function mergeStyle({ usedKeys, classNames, viewProps, style }, flatTransforms, key, val, dontSetUsed = false) {
-  if (!dontSetUsed) {
-    usedKeys[key] ||= 1;
-  }
+function mergeStyle({ classNames, viewProps, style, usedKeys }, flatTransforms, key, val) {
   if (val && val[0] === "_") {
     classNames[key] = val;
+    usedKeys[key] ||= 1;
   } else if (key in stylePropsTransform) {
     flatTransforms ||= {};
     flatTransforms[key] = val;
@@ -839,7 +766,7 @@ function mergeStyle({ usedKeys, classNames, viewProps, style }, flatTransforms,
     }
   }
 }
-const getSubStyle = (styleState, subKey, styleIn, avoidDefaultProps, avoidMergeTransform) => {
+const getSubStyle = (styleState, subKey, styleIn, fontFamily, avoidDefaultProps, avoidMergeTransform) => {
   const { staticConfig, theme, props, state, conf: conf2, languageContext } = styleState;
   const styleOut = {};
   for (let key in styleIn) {
@@ -851,16 +778,13 @@ const getSubStyle = (styleState, subKey, styleIn, avoidDefaultProps, avoidMergeT
       theme,
       getSubStyleProps(staticConfig.defaultProps, props, props[subKey]),
       state,
+      fontFamily,
       languageContext,
       avoidDefaultProps
     );
-    if (!staticConfig.isHOC) {
-      if (key in skipProps) {
-        continue;
-      }
-    }
-    if (!expanded)
+    if (!expanded || !staticConfig.isHOC && key in skipProps) {
       continue;
+    }
     for (const [skey, sval] of expanded) {
       if (!avoidMergeTransform && skey in stylePropsTransform) {
         mergeTransform(styleOut, skey, sval);
@@ -900,7 +824,9 @@ const animatableDefaults = {
   scale: 1,
   rotate: "0deg",
   rotateY: "0deg",
-  rotateX: "0deg"
+  rotateX: "0deg",
+  x: 0,
+  y: 0
 };
 const lowercaseHyphenate = (match) => `-${match.toLowerCase()}`;
 const hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate);
@@ -910,8 +836,8 @@ const mergeTransform = (obj, key, val, backwards = false) => {
     [mapTransformKeys[key] || key]: val
   });
 };
-const mergeTransforms = (obj, flatTransforms, backwards = false) => {
-  Object.entries(flatTransforms).forEach(([key, val]) => {
+const mergeFlatTransforms = (obj, flatTransforms, backwards = false) => {
+  Object.entries(flatTransforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
     mergeTransform(obj, key, val, backwards);
   });
 };
@@ -927,6 +853,9 @@ const skipProps = {
   componentName: true,
   tag: true
 };
+const handledProps = {
+  role: true
+};
 if (process.env.NODE_ENV === "test") {
   skipProps["data-test-renders"] = true;
 }
@@ -946,6 +875,10 @@ if (process.env.TAMAGUI_TARGET === "native") {
     outlineWidth: true,
     outlineColor: true
   });
+} else {
+  Object.assign(skipProps, {
+    elevationAndroid: true
+  });
 }
 const accessibilityRoleToWebRole = {
   adjustable: "slider",
@@ -955,6 +888,18 @@ const accessibilityRoleToWebRole = {
   none: "presentation",
   summary: "region"
 };
+function passDownProp(viewProps, key, val, shouldMergeObject = false) {
+  if (shouldMergeObject) {
+    const next = {
+      ...viewProps[key],
+      ...val
+    };
+    delete viewProps[key];
+    viewProps[key] = next;
+  } else {
+    viewProps[key] = val;
+  }
+}
 export {
   PROP_SPLIT,
   getSplitStyles,