@tamagui/web 1.129.19 → 1.130.1

package/dist/esm/views/Theme.native.js

@@ -12,11 +12,14 @@ var empty = {
   },
   Theme = /* @__PURE__ */forwardRef(function (props, ref) {
     if (props.disable) return props.children;
-    var isRoot = !!props._isRoot,
+    var {
+        passThrough
+      } = props,
+      isRoot = !!props._isRoot,
       [_, themeState] = useThemeWithState(props, isRoot),
       disableDirectChildTheme = props["disable-child-theme"],
       finalChildren = disableDirectChildTheme ? Children.map(props.children, function (child) {
-        return /* @__PURE__ */cloneElement(child, {
+        return passThrough ? child : /* @__PURE__ */cloneElement(child, {
           "data-disable-theme": !0
         });
       }) : props.children;
@@ -28,12 +31,13 @@ var empty = {
     var stateRef = useRef({
       hasEverThemed: !1
     });
-    return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef);
+    return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
   });
 Theme.avoidForwardRef = !0;
 function getThemedChildren(themeState, children, props) {
   var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1,
     stateRef = arguments.length > 4 ? arguments[4] : void 0,
+    passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : !1,
     {
       shallow,
       forceClassName
@@ -62,7 +66,7 @@ function getThemedChildren(themeState, children, props) {
     var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
     if (!parentState) throw new Error("\u203C\uFE0F010");
     children = Children.toArray(children).map(function (child) {
-      return /* @__PURE__ */isValidElement(child) ? /* @__PURE__ */cloneElement(child, void 0, /* @__PURE__ */_jsx(Theme, {
+      return /* @__PURE__ */isValidElement(child) ? passThrough ? child : /* @__PURE__ */cloneElement(child, void 0, /* @__PURE__ */_jsx(Theme, {
         name: parentState.name,
         children: child.props.children
       })) : child;
@@ -82,10 +86,10 @@ function getThemedChildren(themeState, children, props) {
     } = getThemeClassNameAndStyle(themeState, props, isRoot);
     if (children = /* @__PURE__ */_jsx("span", {
       className: `${className} _dsp_contents is_Theme`,
-      style,
+      style: passThrough ? void 0 : style,
       children
     }), state.hasEverThemed === "wrapped") {
-      var className1 = requiresExtraWrapper ? `${isInverse ? name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "" : ""} _dsp_contents` : "_dsp_contents";
+      var className1 = !passThrough && requiresExtraWrapper ? `${isInverse ? name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "" : ""} _dsp_contents` : "_dsp_contents";
       children = /* @__PURE__ */_jsx("span", {
         className: className1,
         children

package/dist/esm/views/Theme.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","isWeb","React","Children","cloneElement","forwardRef","isValidElement","useRef","getSetting","variableToString","useThemeWithState","getThemeState","hasThemeUpdatingProps","ThemeStateContext","ThemeDebug","empty","className","style","Theme","props","ref","disable","children","isRoot","_isRoot","_","themeState","disableDirectChildTheme","finalChildren","map","child","only","stateRef","hasEverThemed","getThemedChildren","avoidForwardRef","arguments","length","shallow","forceClassName","state","current","shouldRenderChildrenWithTheme","isNew","process","env","NODE_ENV","debug","themeProps","Provider","value","id","isInverse","name","requiresExtraWrapper","parentId","parentState","Error","toArray","console","warn","getThemeClassNameAndStyle","className1","startsWith"],"sources":["../../../src/views/Theme.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAa;AAEtB,SAAOC,KAAA,QAAS,oBAAwB;AACxC,OAAAC,KAAS,IAAAC,QAAA,EAAAC,YAAkB,EAAAC,UAAA,EAAAC,cAAA,EAAAC,MAAA;AAC3B,SAASC,UAAA,6BAAwB;AACjC,SAASC,gBAAA,qCAAyB;AAClC,SAAAC,iBAAA;AAAA,SACEC,aAAA,EAAAC,qBAAA,EAAAC,iBAAA;AAAA,SACAC,UAAA;AAAA,IACAC,KAAA;IAAAC,SAEK;IAEPC,KAAA,EAAS;EA2DH;EAAAC,KAAA,kBAAAb,UAAA,WAAAc,KAAA,EAAAC,GAAA;IAzDN,IAAMD,KAAA,CAAAE,OAAU,EAId,OAAIF,KAAM,CAAAG,QAAA;IACR,IAAAC,MAAO,KAAMJ,KAAA,CAAAK,OAAA;MAAA,CAAAC,CAAA,EAAAC,UAAA,IAAAhB,iBAAA,CAAAS,KAAA,EAAAI,MAAA;MAAAI,uBAAA,GAAAR,KAAA;MAAAS,aAAA,GAAAD,uBAAA,GAAAxB,QAAA,CAAA0B,GAAA,CAAAV,KAAA,CAAAG,QAAA,YAAAQ,KAAA;QAGf,OAAM,eAAiB1B,YAEb,CAAA0B,KAAA;UAIN,oBAF4B,EAAM;QAGrB;MAAM,EAAU,GAACX,KAAA,CAAAG,QAC5B;IACF,IACAF,GAAA,EAEJ,IAAI;MACFlB,KAAI,CAAAC,QAAA,CAAA4B,IAAA,CAAAH,aAAA,GAAAA,aAAA,kBAAAxB,YAAA,CAAAwB,aAAA;QACFR;MAGF;IAEA,SAGF;IAAwB,IACtBY,QAAA,GAAAzB,MAAe;MAChB0B,aAAA;IAED;IACD,OAAAC,iBAAA,CAAAR,UAAA,EAAAE,aAAA,EAAAT,KAAA,EAAAI,MAAA,EAAAS,QAAA;EAED;AAEOd,KAAA,CAAAiB,eAAS;AAOd,SAAMD,iBAAWA,CAAAR,UAAe,EAAIJ,QAG9B,EAAAH,KAAQ;EAGd,IAAII,MAAA,GAAAa,SAAA,CAAAC,MAAA,QAFgBD,SAAM,aAGP,IAAAA,SAAW,OAAS;IAAAJ,QAAU,GAAAI,SAAA,CAAAC,MAAA,GAAsB,IAAKD,SAAA;IAAA;MAAAE,OAAA;MAAAC;IAAA,IAAApB,KAAA;IAAAqB,KAAA,GAAAR,QAAA,CAAAS,OAAA;IAAAR,aAAA,GAAAO,KAAA,CAAAP,aAAA;IAAAS,6BAAA,GAAAT,aAAA,IAAAP,UAAA,CAAAiB,KAAA,IAAApB,MAAA,IAAAX,qBAAA,CAAAO,KAAA;EAU5E,IARIyB,OAAA,CAAQC,GAAA,CAAIC,QAAA,KAAa,iBAAiB3B,KAAA,CAAM4B,KAAA,KAAU,gBAC5DzB,QAAA,GACE,eAAAtB,IAAC,CAAAc,UAAA;IAOHY,UAAO;IAITsB,UACE,EAAA7B,KAAA;IAKFG;EAkBA,KAdK,CAAAoB,6BACG,EAGN,OAAApB,QAAA;EAGAA,QAAA,GAAW,eAAStB,IACpB,CAAAa,iBAAW,CAASoC,QAAA;IAUlBC,KAAA,EAAMxB,UAAA,CAAAyB,EAAc;IAAA7B;EAC4B,EAChD;EACA;MAAI8B,SAAC;MAAAC;IAAa,IAAM3B,UAAU;IAAA4B,oBAAO,GAAAF,SAAA,IAAAb,cAAA;EACzC,IAAAC,KAAA,CAAAP,aAAoB,KAAAO,KAAQ,CAAAP,aAAe,QAClC,CAAAqB,oBAAoB;EACvB;EAAA;EACE5B,UACA,CAAA2B,IAAA,eAAA3B,UAAA,CAAA2B,IAAA,kBAAAb,KAAA,CAAAP,aAAA,eAAAK,OAAA,IAAAZ,UAAA,CAAA6B,QAAA;IAAA,IACAC,WAAA,GAAA7C,aAAO,CAAAe,UAAM,CAAAiB,KAAA,GAAYjB,UAAQ,CAAAyB,EAAA,GAAAzB,UAAoB,CAAA6B,QAAA,CAAS;IAChE,IACA,CAAAC,WACL,YAAAC,KAAA;IACHnC,QAAA,GAAAnB,QAAA,CAAAuD,OAAA,CAAApC,QAAA,EAAAO,GAAA,WAAAC,KAAA;MAGE,sBAAYxB,cAAa,CAAAwB,KACvB,mBACF1B,YAAa,CAAA0B,KAAA,yBAAsB9B,IAAA,CAAAkB,KAAA;QACjCmC,IAAA,EAAAG,WAAA,CAAAH,IAAA;QACA/B,QAAA,EAAAQ,KAAA,CAAAX,KAAA,CAAAG;MACA,MAAAQ,KAAA;IACA;EAAA;EAEF,IAIAc,OAAA,CAAAC,GAAA,CAAAC,QAAmB,sBAAA3B,KAAA,CAAA4B,KAAA,IAAAY,OAAA,CAAAC,IAAA;IACrBN,oBAAO;IAGTf,cAAW;IACTb,UAAQ;IASRc,KAPA;IASE,GAAAqB,yBAAkB,CAAAnC,UAAA,EAAAP,KACd,EACEI,MAAA;EASN,IAAAgB,cAAW,SACb,OAAAjB,QAAA;EAEA,IAAArB,KAAO;IACT;MAAAe,SAAA;MAAAC;IAAA,IAAA4C,yBAAA,CAAAnC,UAAA,EAAAP,KAAA,EAAAI,MAAA;IAEA,IAAAD,QAAO,kBAAAtB,IAAA;MACTgB,SAAA,KAAAA,SAAA;MAEAC,KAAS;MAKHK;IACF,IAAAkB,KAAO,CAAAP,aAAA;MAIT,IAAM6B,UAAA,GACJR,oBAAqB,MAAAF,SAAW,GAAQC,IAAA,CAAAU,UAAA,QAAiB,yBAErD,GAAAV,IAAQ,CAAAU,UAAA,OACV;MACEzC,QAAO,kBAAAtB,IAAA;QAETgB,SAEE,EAAA8C,UAAc;QAQpBxC;MACF;IAEA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","isWeb","React","Children","cloneElement","forwardRef","isValidElement","useRef","getSetting","variableToString","useThemeWithState","getThemeState","hasThemeUpdatingProps","ThemeStateContext","ThemeDebug","empty","className","style","Theme","props","ref","disable","children","passThrough","isRoot","_isRoot","_","themeState","disableDirectChildTheme","finalChildren","map","child","only","stateRef","hasEverThemed","getThemedChildren","avoidForwardRef","arguments","length","shallow","forceClassName","state","current","shouldRenderChildrenWithTheme","isNew","process","env","NODE_ENV","debug","themeProps","Provider","value","id","isInverse","name","requiresExtraWrapper","parentId","parentState","Error","toArray","console","warn","getThemeClassNameAndStyle","className1","startsWith","themeColor","theme","color","maxInverses","themeClassName","inverses","replace","schemePrefix"],"sources":["../../../src/views/Theme.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

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

package/src/createComponent.tsx

@@ -418,7 +418,7 @@ export function createComponent<
 
     // create new context with groups, or else sublings will grab the same one
     const allGroupContexts = useMemo((): AllGroupContexts | null => {
-      if (!groupName) {
+      if (!groupName || props.passThrough) {
         return groupContextParent
       }
 
@@ -632,11 +632,13 @@ export function createComponent<
       debugProp
     )
 
+    // splitStyles === null === passThrough
+
     const groupContext = groupName ? allGroupContexts?.[groupName] || null : null
 
     // one tiny mutation 🙏 get width/height optimistically from raw values if possible
     // if set hardcoded it avoids extra renders
-    if (groupContext) {
+    if (splitStyles && groupContext) {
       const groupState = groupContext?.state
       if (groupState && groupState.layout === undefined) {
         if (splitStyles.style?.width || splitStyles.style?.height) {
@@ -650,116 +652,124 @@ export function createComponent<
 
     // avoids re-rendering if animation driver supports it
     // TODO believe we need to set some sort of "pendingState" in case it re-renders
-    if ((hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
-      const styleListener = stateRef.current.useStyleListener
-      const ogSetStateShallow = setStateShallow
+    if (splitStyles) {
+      if ((!hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
+        const useStyleListener = stateRef.current.useStyleListener
+        const ogSetStateShallow = setStateShallow
 
-      stateRef.current.setStateShallow = (nextOrGetNext) => {
-        const prev = NextState.get(stateRef) || state
-        const next =
-          typeof nextOrGetNext === 'function' ? nextOrGetNext(prev) : nextOrGetNext
+        stateRef.current.setStateShallow = (nextOrGetNext) => {
+          const prev = NextState.get(stateRef) || state
+          const next =
+            typeof nextOrGetNext === 'function' ? nextOrGetNext(prev) : nextOrGetNext
 
-        if (next === prev || isEqualShallow(prev, next)) {
-          return
-        }
+          if (next === prev || isEqualShallow(prev, next)) {
+            return
+          }
 
-        // one thing we have to handle here and where it gets a bit more complex is group styles
-        const canAvoidReRender = Object.keys(next).every((key) =>
-          avoidReRenderKeys.has(key)
-        )
+          // one thing we have to handle here and where it gets a bit more complex is group styles
+          const canAvoidReRender = Object.keys(next).every((key) =>
+            avoidReRenderKeys.has(key)
+          )
 
-        if (canAvoidReRender) {
-          const updatedState = {
-            ...prev,
-            ...next,
-          }
-          NextState.set(stateRef, updatedState)
-
-          if (
-            process.env.NODE_ENV === 'development' &&
-            debugProp &&
-            debugProp !== 'profile'
-          ) {
-            console.groupCollapsed(`[⚡️] avoid setState`, next, { updatedState, props })
-            console.info(stateRef.current.host)
-            console.groupEnd()
-          }
+          if (canAvoidReRender) {
+            const updatedState = {
+              ...prev,
+              ...next,
+            }
+            NextState.set(stateRef, updatedState)
+
+            if (
+              process.env.NODE_ENV === 'development' &&
+              debugProp &&
+              debugProp !== 'profile'
+            ) {
+              console.groupCollapsed(`[⚡️] avoid setState`, next, { updatedState, props })
+              console.info(stateRef.current.host)
+              console.groupEnd()
+            }
 
-          const {
-            group,
-            hasDynGroupChildren,
-            unmounted,
-            animation,
-            ...childrenGroupState
-          } = updatedState
-
-          // update before getting styles
-          if (groupContext) {
-            notifyGroupSubscribers(
-              groupContext,
-              stateRef.current.group || null,
-              childrenGroupState
-            )
-          }
+            const {
+              group,
+              hasDynGroupChildren,
+              unmounted,
+              animation,
+              ...childrenGroupState
+            } = updatedState
+
+            // update before getting styles
+            if (groupContext) {
+              notifyGroupSubscribers(
+                groupContext,
+                stateRef.current.group || null,
+                childrenGroupState
+              )
+            }
 
-          // we just emit and return for group without animation ^
-          if (!hasAnimationProp || !styleListener) {
-            return
-          }
+            // we just emit and return for group without animation ^
+            if (!hasAnimationProp || !useStyleListener) {
+              return
+            }
 
-          const nextStyles = getSplitStyles(
-            props,
-            staticConfig,
-            theme,
-            themeName,
-            updatedState,
-            styleProps,
-            null,
-            componentContext,
-            allGroupContexts,
-            elementType,
-            startedUnhydrated,
-            debugProp
-          )
+            const nextStyles = getSplitStyles(
+              props,
+              staticConfig,
+              theme,
+              themeName,
+              updatedState,
+              styleProps,
+              null,
+              componentContext,
+              allGroupContexts,
+              elementType,
+              startedUnhydrated,
+              debugProp
+            )
 
-          styleListener(nextStyles.style as any)
-        } else {
-          if (
-            process.env.NODE_ENV === 'development' &&
-            debugProp &&
-            debugProp !== 'profile'
-          ) {
-            console.info(`[🐌] re-render`, { canAvoidReRender, next })
+            useStyleListener((nextStyles?.style || {}) as any)
+          } else {
+            if (
+              process.env.NODE_ENV === 'development' &&
+              debugProp &&
+              debugProp !== 'profile'
+            ) {
+              console.info(`[🐌] re-render`, { canAvoidReRender, next })
+            }
+            ogSetStateShallow(next)
           }
-          ogSetStateShallow(next)
         }
-      }
 
-      // needs to capture latest props (it's called from memoized `events`)
-      setStateShallow = (state) => {
-        stateRef.current.setStateShallow?.(state)
+        // needs to capture latest props (it's called from memoized `events`)
+        setStateShallow = (state) => {
+          stateRef.current.setStateShallow?.(state)
+        }
       }
     }
 
     if (process.env.NODE_ENV === 'development' && time) time`split-styles`
 
     // hide strategy will set this opacity = 0 until measured
-    if (props.group && props.untilMeasured === 'hide' && !stateRef.current.hasMeasured) {
-      splitStyles.style ||= {}
-      splitStyles.style.opacity = 0
-    }
+    if (splitStyles) {
+      if (
+        props.group &&
+        props.untilMeasured === 'hide' &&
+        !stateRef.current.hasMeasured
+      ) {
+        splitStyles.style ||= {}
+        splitStyles.style.opacity = 0
+      }
 
-    if (splitStyles.dynamicThemeAccess != null) {
-      stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
+      if (splitStyles.dynamicThemeAccess != null) {
+        stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
+      }
     }
 
     // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
     // array = space media breakpoints
-    const hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== true
+    const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true
     const shouldListenForMedia =
       didGetVariableValue() ||
       hasRuntimeMediaKeys ||
-      (noClass && splitStyles.hasMedia === true)
+      (noClass && splitStyles?.hasMedia === true)
 
     const mediaListeningKeys = hasRuntimeMediaKeys
       ? (splitStyles.hasMedia as Set<string>)
@@ -776,7 +786,9 @@ export function createComponent<
       style: splitStylesStyle,
       classNames,
       space,
-    } = splitStyles
+      pseudoGroups,
+      mediaGroups,
+    } = splitStyles || {}
 
     const propsWithAnimation = props as UseAnimationProps
 
@@ -804,7 +816,7 @@ export function createComponent<
       onClick,
       theme: _themeProp,
       ...nonTamaguiProps
-    } = viewPropsIn
+    } = viewPropsIn || {}
 
     // these can ultimately be for DOM, react-native-web views, or animated views
     // so the type is pretty loose
@@ -880,7 +892,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`destructure`
 
-    if (groupContext) {
+    if (splitStyles && groupContext) {
       nonTamaguiProps.onLayout = composeEventHandlers(
         nonTamaguiProps.onLayout,
         (e: LayoutEvent) => {
@@ -935,12 +947,6 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`events-hooks`
 
-    // combined multiple effects into one for performance so be careful with logic
-    // should not be a layout effect because otherwise it wont render the initial state
-    // for example css driver needs to render once with the first styles, then again with the next
-    // if its a layout effect it will just skip that first <render >output
-    const { pseudoGroups, mediaGroups } = splitStyles
-
     const unPress = () => {
       setStateShallow({ press: false, pressIn: false })
     }
@@ -956,9 +962,11 @@ export function createComponent<
             }
             return styleObject
           }
-          const computed = cssStyleDeclarationToObject(
-            getComputedStyle(stateRef.current.host! as Element)
-          )
+          const computed = stateRef.current.host
+            ? cssStyleDeclarationToObject(
+                getComputedStyle(stateRef.current.host as Element)
+              )
+            : {}
           console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`)
           console.warn(stateRef.current.host)
           console.warn(computed)
@@ -1226,7 +1234,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
     let content =
-      !children || asChild
+      !children || asChild || !splitStyles
         ? children
         : spacedChildren({
             separator,
@@ -1270,6 +1278,17 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`use-children`
 
+    // passthrough mode - only pass style display contents, nothing else
+    if (!splitStyles) {
+      elementType = 'span'
+      content = propsIn.children
+      viewProps = {
+        style: {
+          display: 'contents',
+        },
+      }
+    }
+
     if (useChildrenResult) {
       content = useChildrenResult
     } else {
@@ -1279,7 +1298,15 @@ export function createComponent<
     // needs to reset the presence state for nested children
     const ResetPresence = config?.animations?.ResetPresence
     const needsReset = Boolean(
-      !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState)
+      // not when passing down to child
+      !asChild &&
+        // not when passThrough
+        splitStyles &&
+        // not when HOC
+        !isHOC &&
+        ResetPresence &&
+        willBeAnimated &&
+        (hasEnterStyle || presenceState)
     )
     // avoid re-parenting
     const hasEverReset = stateRef.current.hasEverResetPresence
@@ -1312,9 +1339,10 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`group-context`
 
-    content = disableTheme
-      ? content
-      : getThemedChildren(themeState, content, themeStateProps, false, stateRef)
+    content =
+      disableTheme || !splitStyles
+        ? content
+        : getThemedChildren(themeState, content, themeStateProps, false, stateRef)
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 
@@ -1323,7 +1351,7 @@ export function createComponent<
         content = (
           <span
             className="_dsp_contents"
-            {...(isHydrated && events && getWebEvents(events))}
+            {...(splitStyles && isHydrated && events && getWebEvents(events))}
           >
             {content}
           </span>
@@ -1357,6 +1385,7 @@ export function createComponent<
     if (process.env.TAMAGUI_TARGET === 'web' && startedUnhydrated) {
       // breaking rules of hooks but startedUnhydrated NEVER changes
       const styleTags = useMemo(() => {
+        if (!splitStyles) return
         return getStyleTags(Object.values(splitStyles.rulesToInsert))
       }, [])
       // this is only to appease react hydration really
@@ -1509,7 +1538,7 @@ export function createComponent<
 
     out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
 
-    if (process.env.TAMAGUI_MEMOIZE_STYLEABLE) {
+    if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) {
       out = React.memo(out)
     }
 

package/src/helpers/getSplitStyles.tsx

@@ -97,7 +97,7 @@ type StyleSplitter = (
   elementType?: string,
   startedUnhydrated?: boolean,
   debug?: DebugProp
-) => GetStyleResult
+) => null | GetStyleResult
 
 export const PROP_SPLIT = '-'
 
@@ -147,6 +147,10 @@ export const getSplitStyles: StyleSplitter = (
   conf = conf || getConfig()
   const animationDriver = componentContext?.animationDriver || conf.animations
 
+  if (props.passThrough) {
+    return null
+  }
+
   // a bit icky, we need no normalize but not fully
   if (
     isWeb &&
@@ -1524,8 +1528,10 @@ export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l
 
   if (process.env.TAMAGUI_TARGET !== 'native') {
     useInsertEffectCompat(() => {
-      insertStyleRules(res.rulesToInsert)
-    }, [res.rulesToInsert])
+      if (res) {
+        insertStyleRules(res.rulesToInsert)
+      }
+    }, [res?.rulesToInsert])
   }
 
   return res

package/src/helpers/mergeProps.ts

@@ -10,6 +10,25 @@
  * Handles a couple special tamagui cases
  *   - classNames can be extracted out separately
  *   - shorthands can be expanded before merging
+ *   - pseudo props and variants maintain runtime order for proper priority
+ *
+ * Example of variant/pseudo prop ordering importance:
+ *   const StyledButton = styled(Button, {
+ *     pressStyle: { bg: '$blue10' },
+ *     variants: {
+ *       variant: {
+ *         default: { pressStyle: { bg: 'red', scale: 1.05 } }
+ *       }
+ *     }
+ *   })
+ *
+ *   case 1: variant first, then pressStyle
+ *   <StyledButton variant='default' pressStyle={{ bg: 'orange' }} />
+ *   output: {variant: 'default', pressStyle: {bg: 'orange'}}
+ *
+ *   case 2: pressStyle first, then variant
+ *   <StyledButton pressStyle={{ bg: 'orange' }} variant='default' />
+ *   output: {pressStyle: {bg: 'orange'}, variant: 'default'}
  */
 
 import { mediaKeys } from '../hooks/useMedia'
@@ -27,6 +46,35 @@ export const mergeProps = (a: Object, b?: Object, inverseShorthands?: AnyRecord)
       mergeProp(out, b, undefined, key, inverseShorthands)
     }
   }
+
+  // Targeted reordering: only reorder pseudo props and variants that need runtime order
+  if (b && Object.keys(b).length > 0) {
+    // Check if we have any pseudo props or variants that need reordering
+    const hasPropsNeedingReorder = Object.keys(b).some(
+      (key) => (key in pseudoDescriptors || key === 'variant') && key in a && key in out
+    )
+
+    if (hasPropsNeedingReorder) {
+      const reordered: AnyRecord = {}
+
+      // First: Add pseudo props and variants that need specific ordering from runtime props (b)
+      for (const key in b) {
+        if ((key in pseudoDescriptors || key === 'variant') && key in out) {
+          reordered[key] = out[key]
+        }
+      }
+
+      // Second: Add all other props in their original order
+      for (const key in out) {
+        if (!(key in reordered)) {
+          reordered[key] = out[key]
+        }
+      }
+
+      return reordered
+    }
+  }
+
   return out
 }
 
@@ -40,10 +88,7 @@ function mergeProp(
   const longhand = inverseShorthands?.[key] || null
   const val = a[key]
 
-  if (b && (key in b || (longhand && longhand in b))) {
-    return
-  }
-
+  // This ensures styled definition and runtime props are always merged
   if (key in pseudoDescriptors || mediaKeys.has(key)) {
     out[key] = {
       ...out[key],
@@ -52,5 +97,9 @@ function mergeProp(
     return
   }
 
+  if (b && (key in b || (longhand && longhand in b))) {
+    return
+  }
+
   out[longhand || key] = val
 }

package/src/hooks/useComponentState.ts

@@ -237,6 +237,7 @@ function hasAnimatedStyleValue(style: Object) {
 const isDisabled = (props: any) => {
   return (
     props.disabled ||
+    props.passThrough ||
     props.accessibilityState?.disabled ||
     props['aria-disabled'] ||
     props.accessibilityDisabled ||

package/src/hooks/useProps.tsx

@@ -122,7 +122,7 @@ export function usePropsAndStyle<A extends PropsLikeObject>(
     groupContext
   )
 
-  const { mediaGroups, pseudoGroups } = splitStyles
+  const { mediaGroups, pseudoGroups } = splitStyles || {}
 
   useIsomorphicLayoutEffect(() => {
     if (disabled) {
@@ -149,5 +149,10 @@ export function usePropsAndStyle<A extends PropsLikeObject>(
     mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
   ])
 
-  return [splitStyles.viewProps, splitStyles.style || {}, theme, mediaState] as any
+  return [
+    splitStyles?.viewProps || {},
+    splitStyles?.style || {},
+    theme,
+    mediaState,
+  ] as any
 }