@tamagui/web 1.101.0 → 1.101.2

package/src/createComponent.tsx

@@ -1,6 +1,11 @@
 import { composeRefs } from '@tamagui/compose-refs'
 import { isClient, isServer, isWeb } from '@tamagui/constants'
-import { composeEventHandlers, validStyles } from '@tamagui/helpers'
+import {
+  StyleObjectIdentifier,
+  StyleObjectRules,
+  composeEventHandlers,
+  validStyles,
+} from '@tamagui/helpers'
 import React, {
   Children,
   Fragment,
@@ -10,7 +15,6 @@ import React, {
   useContext,
   useEffect,
   useId,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -36,6 +40,7 @@ import { log } from './helpers/log'
 import { mergeProps } from './helpers/mergeProps'
 import { setElementProps } from './helpers/setElementProps'
 import { themeable } from './helpers/themeable'
+import { useDidHydrateOnce } from './hooks/useDidHydrateOnce'
 import { mediaKeyMatch, setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
@@ -69,7 +74,6 @@ import type {
 import { Slot } from './views/Slot'
 import { getThemedChildren } from './views/Theme'
 import { ThemeDebug } from './views/ThemeDebug'
-import { useDidHydrateOnce } from './hooks/useDidHydrateOnce'
 
 /**
  * All things that need one-time setup after createTamagui is called
@@ -156,7 +160,12 @@ export const useComponentState = (
 ) => {
   const useAnimations = animationDriver?.useAnimations as UseAnimationHook | undefined
 
-  const stateRef = useRef<TamaguiComponentStateRef>({})
+  const stateRef = useRef<TamaguiComponentStateRef>(
+    undefined as any as TamaguiComponentStateRef
+  )
+  if (!stateRef.current) {
+    stateRef.current = {}
+  }
 
   // after we get states mount we need to turn off isAnimated for server side
   const hasAnimationProp = Boolean(
@@ -197,19 +206,21 @@ export const useComponentState = (
 
   const hasEnterState = hasEnterStyle || isEntering
 
-  const didHydrateOnce = useDidHydrateOnce()
-
-  const initialState =
-    hasEnterState || (!didHydrateOnce && hasRNAnimation)
-      ? // on the very first render we switch all spring animation drivers to css rendering
-        // this is because we need to use css variables, which they don't support to do proper SSR
-        // without flickers of the wrong colors.
-        // but once we do that initial hydration and we are in client side rendering mode,
-        // we can avoid the extra re-render on mount
-        isWeb && !didHydrateOnce
-        ? defaultComponentState
-        : defaultComponentStateShouldEnter
-      : defaultComponentStateMounted
+  // this can be conditional because its only ever needed with animations
+  const didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : true
+  const shouldEnter = hasEnterState || (!didHydrateOnce && hasRNAnimation)
+  const shouldEnterFromUnhydrated = isWeb && !didHydrateOnce
+
+  const initialState = shouldEnter
+    ? // on the very first render we switch all spring animation drivers to css rendering
+      // this is because we need to use css variables, which they don't support to do proper SSR
+      // without flickers of the wrong colors.
+      // but once we do that initial hydration and we are in client side rendering mode,
+      // we can avoid the extra re-render on mount
+      shouldEnterFromUnhydrated
+      ? defaultComponentState
+      : defaultComponentStateShouldEnter
+    : defaultComponentStateMounted
 
   // will be nice to deprecate half of these:
   const disabled = isDisabled(props)
@@ -706,7 +717,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`theme`
 
     // HOOK 14 (-1 if no animation, -1 if disableSSR, -1 if no context, -1 if production)
-    const mediaState = useMedia(stateRef, componentContext)
+    const mediaState = useMedia(stateRef, componentContext, debugProp)
 
     setDidGetVariableValue(false)
 
@@ -725,6 +736,7 @@ export function createComponent<
       resolveValues,
       isExiting,
       isAnimated,
+      willBeAnimated,
     } as const
 
     // HOOK 15 (-1 if no animation, -1 if disableSSR, -1 if no context, -1 if production)
@@ -758,7 +770,11 @@ export function createComponent<
       didGetVariableValue() ||
       isMediaArray ||
       (noClassNames && splitStyles.hasMedia === true)
-    const mediaListeningKeys = isMediaArray ? (splitStyles.hasMedia as any) : null
+
+    const mediaListeningKeys = isMediaArray ? (splitStyles.hasMedia as string[]) : null
+    if (process.env.NODE_ENV === 'development' && debugProp) {
+      console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys)
+    }
 
     setMediaShouldUpdate(stateRef, {
       enabled: shouldListenForMedia,
@@ -1296,7 +1312,8 @@ export function createComponent<
           <>
             {content}
             {/* lets see if we can put a single style tag per rule for optimal de-duping */}
-            {splitStyles.rulesToInsert.map(({ rules, identifier }) => {
+            {splitStyles.rulesToInsert.map((styleObject) => {
+              const identifier = styleObject[StyleObjectIdentifier]
               return (
                 <style
                   key={identifier}
@@ -1305,7 +1322,7 @@ export function createComponent<
                   // @ts-ignore
                   precedence="default"
                 >
-                  {rules.join('\n')}
+                  {styleObject[StyleObjectRules].join('\n')}
                 </style>
               )
             })}

package/src/createTokens.ts

@@ -2,20 +2,14 @@ import type { Variable } from './createVariable'
 import { createVariables } from './createVariables'
 import type { CreateTokens } from './types'
 
-// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
   return createVariables(tokens) as any
 }
 
 type NormalizeTokens<A, Type = A[keyof A]> = {
-  // removes $ prefix allowing for defining either as $1: or 1:,
-  // which is important because Chrome re-orders numerical-seeming keys :/
-  [Key in keyof A extends `$${infer X}` ? X : keyof A]: Variable<Type>
+  [Key in keyof A extends number ? `${keyof A}` : keyof A]: Variable<Type>
 }
 
-// verbose but gives us nice types...
-// removes $ prefix allowing for defining either as $1: or 1:,
-// which is important because Chrome re-orders numerical-seeming keys :/
 type MakeTokens<T extends CreateTokens> = T extends {
   color?: infer E
   space?: infer F
@@ -36,17 +30,3 @@ type MakeTokens<T extends CreateTokens> = T extends {
       'color' | 'space' | 'size' | 'radius' | 'zIndex'
     >
   : never
-
-// // test
-// // TODO move to tests
-// const tokens = createTokens({
-//   size: { 0: 1 },
-//   space: { 0: 1 },
-//   radius: { 0: 1 },
-//   zIndex: { 0: 1 },
-//   color: { 0: 'hi' },
-//   arbitrary: { abc: '123' },
-// })
-
-// tokens.arbitrary.abc
-// tokens.size['0']

package/src/helpers/createMediaStyle.ts

@@ -22,7 +22,7 @@ export const createMediaStyle = (
   negate?: boolean,
   priority?: number
 ): MediaStyleObject => {
-  const { property, identifier, rules } = styleObject
+  const [property, _value, identifier, _pseudo, rules] = styleObject
   const conf = getConfig()
   const enableMediaPropOrder = conf.settings.mediaPropOrder
   const isTheme = type === 'theme'
@@ -129,9 +129,5 @@ export const createMediaStyle = (
     }
   }
 
-  return {
-    property,
-    rules: [styleRule],
-    identifier: nextIdentifier,
-  }
+  return [property, undefined, nextIdentifier, undefined, [styleRule]]
 }

package/src/helpers/expandStyles.ts

@@ -12,6 +12,7 @@ export function fixStyles(style: Record<string, any>) {
     }
   }
 
+  // TODO deprecate for web-style shadows
   if (
     style.shadowRadius != null ||
     style.shadowColor ||
@@ -21,7 +22,7 @@ export function fixStyles(style: Record<string, any>) {
     Object.assign(style, normalizeShadow(style))
   }
 
-  // TODO could be native-only
+  // could be optimized better
   // ensure border style set by default to solid
   for (const key in borderDefaults) {
     if (key in style) {

package/src/helpers/getSplitStyles.tsx

@@ -7,6 +7,10 @@ import {
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
 import {
+  StyleObjectIdentifier,
+  StyleObjectProperty,
+  StyleObjectPseudo,
+  StyleObjectRules,
   stylePropsText,
   stylePropsTransform,
   tokenCategories,
@@ -68,9 +72,6 @@ import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { transformsToString } from './transformsToString'
 
-// bugfix for some reason it gets reset
-const IS_STATIC = process.env.IS_STATIC === 'is_static'
-
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
@@ -185,8 +186,17 @@ export const getSplitStyles: StyleSplitter = (
   /**
    * Not the biggest fan of creating an object but it is a nice API
    */
+  let curPropsState
   const styleState: GetStyleState = {
-    curProps: {},
+    // this should go away, right now we're doing really crazy cumulative props,
+    // as variants are resolved basically we go back and merge the results onto
+    // the curProps, so that each following variant function recieves the current
+    // "styles" with variants expanded. powerful, but i think too fancy
+    // there's some part of the ui kit that depends on it we'd have to find and fix
+    get curProps() {
+      curPropsState ||= {}
+      return curPropsState
+    },
     classNames,
     conf,
     props,
@@ -221,24 +231,32 @@ export const getSplitStyles: StyleSplitter = (
     console.groupEnd()
   }
 
+  const { asChild } = props
+  const { accept } = staticConfig
+  const { noSkip, disableExpandShorthands, noExpand } = styleProps
+  const { webContainerType } = conf.settings
+  const parentVariants = parentStaticConfig?.variants
+
   for (const keyOg in props) {
     let keyInit = keyOg
-    let valInit = props[keyOg]
+    let valInit = props[keyInit]
 
-    if (
-      staticConfig.accept &&
-      (staticConfig.accept[keyInit] === 'style' ||
-        staticConfig.accept[keyInit] === 'textStyle') &&
-      typeof valInit === 'object'
-    ) {
-      const styleObject = getSubStyle(
-        styleState,
-        keyInit,
-        valInit,
-        styleProps.noClassNames
-      )
-      viewProps[keyInit] = styleObject
-      continue
+    // for custom accept sub-styles
+    if (accept) {
+      const accepted = accept[keyInit]
+      if (
+        (accepted === 'style' || accepted === 'textStyle') &&
+        valInit &&
+        typeof valInit === 'object'
+      ) {
+        viewProps[keyInit] = getSubStyle(
+          styleState,
+          keyInit,
+          valInit,
+          styleProps.noClassNames
+        )
+        continue
+      }
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -248,7 +266,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     // normalize shorthands up front
-    if (!styleProps.disableExpandShorthands) {
+    if (!disableExpandShorthands) {
       if (keyInit in shorthands) {
         keyInit = shorthands[keyInit]
       }
@@ -259,25 +277,27 @@ export const getSplitStyles: StyleSplitter = (
 
     if (process.env.TAMAGUI_TARGET === 'web') {
       // skip the webViewFlexCompatStyles when asChild on web
-      if (props.asChild && webViewFlexCompatStyles[keyInit] === valInit) {
+      if (asChild && webViewFlexCompatStyles[keyInit] === valInit) {
         continue
       }
     }
 
     // keyInit === 'style' is handled in skipProps
-    if (keyInit in skipProps && !styleProps.noSkip && !isHOC) {
+    if (keyInit in skipProps && !noSkip && !isHOC) {
       if (keyInit === 'group') {
         if (process.env.TAMAGUI_TARGET === 'web') {
           // add container style
           const identifier = `t_group_${valInit}`
-          const containerType = conf.settings.webContainerType || 'inline-size'
-          const containerCSS = {
+          const containerType = webContainerType || 'inline-size'
+          const containerCSS = [
+            'continer',
+            undefined,
             identifier,
-            property: 'container',
-            rules: [
+            undefined,
+            [
               `.${identifier} { container-name: ${valInit}; container-type: ${containerType}; }`,
             ],
-          }
+          ] satisfies StyleObject
           addStyleToInsertRules(rulesToInsert, containerCSS)
         }
       }
@@ -287,6 +307,7 @@ export const getSplitStyles: StyleSplitter = (
     const valInitType = typeof valInit
     const isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig)
 
+    // this is all for partially optimized (not flattened)... maybe worth removing?
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (isValidStyleKeyInit && valInitType === 'string') {
         if (valInit[0] === '_') {
@@ -315,12 +336,12 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    if (valInit !== props[keyInit]) {
-      // we collect updated props as we go, for functional variants later
-      // functional variants receive a prop object that represents the current
-      // props at that point in the loop
-      styleState.curProps[keyInit] = valInit
-    }
+    // if (valInit !== props[keyInit]) {
+    //   // we collect updated props as we go, for functional variants later
+    //   // functional variants receive a prop object that represents the current
+    //   // props at that point in the loop
+    //   styleState.curProps[keyInit] = valInit
+    // }
 
     if (process.env.TAMAGUI_TARGET === 'native') {
       if (!isValidStyleKeyInit) {
@@ -339,6 +360,7 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
+    // TODO deprecate dataSet be sure we map on native from data-
     if (keyInit === 'dataSet') {
       for (const keyInit in valInit) {
         viewProps[`data-${hyphenate(keyInit)}`] = valInit[keyInit]
@@ -347,7 +369,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (!styleProps.noExpand) {
+      if (!noExpand) {
         /**
          * Copying in the accessibility/prop handling from react-native-web here
          * Keeps it in a single loop, avoids dup de-structuring to avoid bundle size
@@ -486,25 +508,19 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     const isStyleProp =
-      isValidStyleKeyInit ||
-      isMediaOrPseudo ||
-      (isVariant && !styleProps.noExpand) ||
-      isShorthand
+      isValidStyleKeyInit || isMediaOrPseudo || (isVariant && !noExpand) || isShorthand
 
-    if (
-      isStyleProp &&
-      (props.asChild === 'except-style' || props.asChild === 'except-style-web')
-    ) {
+    if (isStyleProp && (asChild === 'except-style' || asChild === 'except-style-web')) {
       continue
     }
 
     const shouldPassProp =
       !isStyleProp ||
       // is in parent variants
-      (isHOC && parentStaticConfig?.variants && keyInit in parentStaticConfig.variants) ||
+      (isHOC && parentVariants && keyInit in parentVariants) ||
       inlineProps?.has(keyInit)
 
-    const parentVariant = parentStaticConfig?.variants?.[keyInit]
+    const parentVariant = parentVariants?.[keyInit]
     const isHOCShouldPassThrough = Boolean(
       isHOC &&
         (isShorthand ||
@@ -571,7 +587,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     // after shouldPassThrough
-    if (!styleProps.noSkip) {
+    if (!noSkip) {
       if (keyInit in skipProps) {
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           console.groupEnd()
@@ -649,7 +665,10 @@ export const getSplitStyles: StyleSplitter = (
       isMediaOrPseudo = Boolean(isMedia || isPseudo)
       isVariant = variants && key in variants
 
-      if (inlineProps?.has(key) || (IS_STATIC && inlineWhenUnflattened?.has(key))) {
+      if (
+        inlineProps?.has(key) ||
+        (process.env.IS_STATIC === 'is_static' && inlineWhenUnflattened?.has(key))
+      ) {
         viewProps[key] = props[key] ?? val
       }
 
@@ -690,10 +709,10 @@ export const getSplitStyles: StyleSplitter = (
           continue
         }
 
-        if (!shouldDoClasses || IS_STATIC) {
+        if (!shouldDoClasses || process.env.IS_STATIC === 'is_static') {
           pseudos ||= {}
           pseudos[key] ||= {}
-          if (IS_STATIC) {
+          if (process.env.IS_STATIC === 'is_static') {
             Object.assign(pseudos[key], pseudoStyleObject)
             continue
           }
@@ -712,7 +731,7 @@ export const getSplitStyles: StyleSplitter = (
           }
 
           for (const psuedoStyle of pseudoStyles) {
-            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
+            const fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`
             if (fullKey in usedKeys) continue
 
             addStyleToInsertRules(rulesToInsert, psuedoStyle)
@@ -720,7 +739,7 @@ export const getSplitStyles: StyleSplitter = (
               transforms,
               classNames,
               fullKey,
-              psuedoStyle.identifier,
+              psuedoStyle[StyleObjectIdentifier],
               isMediaOrPseudo,
               true
             )
@@ -803,6 +822,21 @@ export const getSplitStyles: StyleSplitter = (
       if (isMedia) {
         if (!val) continue
 
+        // for some reason 'space' in val upsetting next ssr during prod build
+        // technically i guess this also will not apply if 0 space which makes sense?
+        const hasSpace = val['space']
+        const mediaKeyShort = key.slice(1)
+
+        hasMedia ||= true
+
+        if (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) {
+          if (!Array.isArray(hasMedia)) {
+            hasMedia = []
+          }
+          hasMedia.push(mediaKeyShort)
+        }
+
+        // can bail early
         if (isMedia === 'platform') {
           const platform = key.slice(10)
           if (
@@ -815,10 +849,6 @@ export const getSplitStyles: StyleSplitter = (
           }
         }
 
-        hasMedia ||= true
-
-        const mediaKeyShort = key.slice(1)
-
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           log(`  📺 ${key}`, {
             key,
@@ -827,19 +857,10 @@ export const getSplitStyles: StyleSplitter = (
             shouldDoClasses,
             acceptsClassName,
             componentState,
+            mediaState,
           })
         }
 
-        // for some reason 'space' in val upsetting next ssr during prod build
-        // technically i guess this also will not apply if 0 space which makes sense?
-        const hasSpace = val['space']
-        if (hasSpace || !shouldDoClasses) {
-          if (!Array.isArray(hasMedia)) {
-            hasMedia = []
-          }
-          hasMedia.push(mediaKeyShort)
-        }
-
         if (shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, false)
 
@@ -881,25 +902,39 @@ export const getSplitStyles: StyleSplitter = (
             if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
               log(`📺 media style:`, out)
             }
-            const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}${
-              style.pseudo || ''
+            const fullKey = `${style[StyleObjectProperty]}${PROP_SPLIT}${mediaKeyShort}${
+              style[StyleObjectPseudo] || ''
             }`
             if (fullKey in usedKeys) continue
             addStyleToInsertRules(rulesToInsert, out as any)
-            mergeClassName(transforms, classNames, fullKey, out.identifier, true, true)
+            mergeClassName(
+              transforms,
+              classNames,
+              fullKey,
+              out[StyleObjectIdentifier],
+              true,
+              true
+            )
           }
         } else {
-          const mediaStyle = getSubStyle(styleState, key, val, true)
           const isThemeMedia = isMedia === 'theme'
           const isGroupMedia = isMedia === 'group'
           const isPlatformMedia = isMedia === 'platform'
 
           if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
             if (!mediaState[mediaKeyShort]) {
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                log(`  📺 ❌ DISABLED ${mediaKeyShort}`)
+              }
               continue
             }
+            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+              log(`  📺 ✅ ENABLED ${mediaKeyShort}`)
+            }
           }
 
+          const mediaStyle = getSubStyle(styleState, key, val, true)
+
           let importanceBump = 0
 
           if (isThemeMedia) {
@@ -1023,8 +1058,7 @@ export const getSplitStyles: StyleSplitter = (
       fixStyles(styleState.style)
 
       // shouldn't this be better? but breaks some tests weirdly, need to check
-      // if (isWeb && !staticConfig.isReactNative) {
-      if (isWeb && !staticConfig.isReactNative) {
+      if (isWeb && !isReactNative) {
         styleToCSS(styleState.style)
       }
     }
@@ -1095,7 +1129,7 @@ export const getSplitStyles: StyleSplitter = (
         const atomic = getStylesAtomic(styleState.style)
 
         for (const atomicStyle of atomic) {
-          const key = atomicStyle.property
+          const [key, value, identifier] = atomicStyle
           const isAnimatedAndAnimateOnly =
             styleProps.isAnimated &&
             styleProps.noClassNames &&
@@ -1113,18 +1147,11 @@ export const getSplitStyles: StyleSplitter = (
             retainedStyles[key] = styleState.style[key]
           } else if (nonAnimatedAnimateOnly) {
             retainedStyles ||= {}
-            retainedStyles[key] = atomicStyle.value
+            retainedStyles[key] = value
             shouldRetain = true
           } else {
             addStyleToInsertRules(rulesToInsert, atomicStyle)
-            mergeClassName(
-              transforms,
-              classNames,
-              key,
-              atomicStyle.identifier,
-              false,
-              true
-            )
+            mergeClassName(transforms, classNames, key, identifier, false, true)
           }
         }
 
@@ -1135,7 +1162,7 @@ export const getSplitStyles: StyleSplitter = (
           console.groupEnd()
         }
 
-        if (shouldRetain || !IS_STATIC) {
+        if (shouldRetain || !(process.env.IS_STATIC === 'is_static')) {
           styleState.style = retainedStyles || {}
         }
       }
@@ -1152,11 +1179,13 @@ export const getSplitStyles: StyleSplitter = (
           const identifier = `_transform${hash}`
           if (isClient && !insertedTransforms[identifier]) {
             const rule = `.${identifier} { transform: ${val}; }`
-            addStyleToInsertRules(rulesToInsert, {
+            addStyleToInsertRules(rulesToInsert, [
+              namespace,
+              val,
               identifier,
-              rules: [rule],
-              property: namespace,
-            } as StyleObject)
+              undefined,
+              [rule],
+            ] satisfies StyleObject)
           }
           classNames[namespace] = identifier
         }
@@ -1268,7 +1297,6 @@ export const getSplitStyles: StyleSplitter = (
     mediaGroups,
   }
 
-  const asChild = props.asChild
   const asChildExceptStyleLike =
     asChild === 'except-style' || asChild === 'except-style-web'
 
@@ -1480,11 +1508,11 @@ export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j) => {
 
 function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: StyleObject) {
   if (process.env.TAMAGUI_TARGET === 'web') {
-    if (!shouldInsertStyleRules(styleObject.identifier)) {
+    if (!shouldInsertStyleRules(styleObject[StyleObjectIdentifier])) {
       return
     }
     if (!process.env.TAMAGUI_REACT_19) {
-      updateRules(styleObject.identifier, styleObject.rules)
+      updateRules(styleObject[StyleObjectIdentifier], styleObject[StyleObjectRules])
     }
     rulesToInsert.push(styleObject)
   }

package/src/helpers/getStylesAtomic.ts

@@ -53,6 +53,7 @@ export const getStyleAtomic = (
 
 let conf: TamaguiInternalConfig
 
+// this could be cached for performance?
 const getStyleObject = (
   style: ViewStyleWithPseudos,
   key: string,
@@ -71,13 +72,14 @@ const getStyleObject = (
   const shortProp = conf.inverseShorthands[key] || key
   const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
   const rules = createAtomicRules(identifier, key, value, pseudo)
-  return {
-    property: key,
-    pseudo: pseudo?.name as any,
+  return [
+    // array for performance
+    key,
+    value,
     identifier,
+    pseudo?.name as any,
     rules,
-    value,
-  }
+  ]
 }
 
 export function styleToCSS(style: Record<string, any>) {