@hanzogui/web 7.3.2 → 8.0.0

package/src/helpers/getSplitStyles.tsx

@@ -1,8 +1,9 @@
 import {
+  getPlatformDriver,
   isAndroid,
   isClient,
-  isIos,
   isWeb,
+  supportsDynamicColorIOS,
   useIsomorphicLayoutEffect,
 } from '@hanzogui/constants'
 import {
@@ -72,19 +73,24 @@ import {
 } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { sortString } from './sortString'
+import { styleOriginalValues } from './styleOriginalValues'
+import { type StyleTokenProvenance, setStyleTokenProvenance } from './styleProvenance'
 import { transformsToString } from './transformsToString'
 
+export { styleOriginalValues }
+export { getStyleTokenProvenance, STYLE_TOKEN_PROVENANCE_KEY } from './styleProvenance'
+export type { StyleTokenBinding, StyleTokenProvenance } from './styleProvenance'
+
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
+const shouldTrackStyleTokenProvenance =
+  process.env.NODE_ENV === 'development' &&
+  process.env.GUI_ENABLE_STYLE_TOKEN_PROVENANCE === '1'
+
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
 
 let conf: GuiInternalConfig
 
-// WeakMap to track original token values for style objects
-// Used to preserve '$8' style tokens instead of resolved 'var(--t-space-8)'
-// for context prop propagation to children (issues #3670, #3676)
-export const styleOriginalValues = new WeakMap<object, Record<string, any>>()
-
 type StyleSplitter = (
   props: { [key: string]: any },
   staticConfig: StaticConfig,
@@ -155,6 +161,16 @@ function isValidStyleKey(
   return key in validStyles ? true : accept && key in accept
 }
 
+function shouldSkipNativeHoverProp(key: string, isMedia: false | boolean | string) {
+  if (process.env.GUI_TARGET !== 'native') return false
+  if (getPlatformDriver()?.pseudo) return false
+  if (key === 'hoverStyle') return true
+  if (isMedia === 'group') {
+    return getGroupPropParts(key.slice(1)).pseudo === 'hover'
+  }
+  return false
+}
+
 export const getSplitStyles: StyleSplitter = (
   props,
   staticConfig,
@@ -307,6 +323,18 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
+    // native: data-* attributes never become native props (they're stripped
+    // further down anyway), and the compiler-emitted data-disable-theme/-media
+    // flags are already consumed in createComponent. skip them before any per-prop
+    // work so they don't pay the isValidStyleKey + handling cost on the hot path.
+    if (
+      process.env.GUI_TARGET === 'native' &&
+      keyInit[0] === 'd' &&
+      keyInit.startsWith('data-')
+    ) {
+      continue
+    }
+
     if (
       process.env.NODE_ENV === 'development' &&
       (debug === 'profile' || (globalThis as any).time)
@@ -372,14 +400,20 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, containerCSS)
         }
       }
-      // transition prop is skipped when it's a named animation (e.g. 'quick')
-      // but raw CSS values (from $platform-web) should pass through as style
-      if (
-        keyInit === 'transition' &&
-        typeof valInit === 'string' &&
-        !driver?.animations?.[valInit]
-      ) {
-        // not a known animation name, treat as raw CSS
+      if (keyInit === 'transition' && typeof valInit === 'string') {
+        const animationConfig = driver?.animations?.[valInit]
+        if (
+          animationConfig &&
+          driver?.outputStyle === 'css' &&
+          process.env.IS_STATIC === 'is_static'
+        ) {
+          // css output needs no runtime component: lower its named transition
+          // to ordinary css so the compiler can keep flattening.
+          valInit = `all ${animationConfig}`
+        } else if (animationConfig) {
+          continue
+        }
+        // unknown names are raw CSS transition values and pass through.
       } else {
         continue
       }
@@ -424,8 +458,10 @@ export const getSplitStyles: StyleSplitter = (
 
         if (keyInit === 'disabled' && valInit === true) {
           viewProps['aria-disabled'] = true
-          // Enhance with native semantics
+          // isInput: Input/TextArea wrap the real <input>/<textarea> in a styleable, so
+          // elementType is the wrapper here - forward disabled down or it never reaches it
           if (
+            isInput ||
             elementType === 'button' ||
             elementType === 'form' ||
             elementType === 'input' ||
@@ -481,6 +517,10 @@ export const getSplitStyles: StyleSplitter = (
 
     const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || (isVariant && !noExpand)
 
+    if (shouldSkipNativeHoverProp(keyInit, isMedia)) {
+      continue
+    }
+
     if (isStyleProp && (asChild === 'except-style' || asChild === 'except-style-web')) {
       continue
     }
@@ -625,6 +665,10 @@ export const getSplitStyles: StyleSplitter = (
         key = normalizeGroupKey(key, groupContext)
       }
 
+      if (shouldSkipNativeHoverProp(key, isMedia)) {
+        return
+      }
+
       if (
         inlineProps?.has(key) ||
         (process.env.IS_STATIC === 'is_static' && inlineWhenUnflattened?.has(key))
@@ -875,7 +919,7 @@ export const getSplitStyles: StyleSplitter = (
           if (isThemeMedia) {
             if (
               process.env.GUI_TARGET === 'native' &&
-              isIos &&
+              supportsDynamicColorIOS &&
               getSetting('fastSchemeChange')
             ) {
               // iOS will use https://reactnative.dev/docs/dynamiccolorios
@@ -948,6 +992,10 @@ export const getSplitStyles: StyleSplitter = (
             const groupPseudoKey = groupInfo.pseudo
             const groupMediaKey = groupInfo.media
 
+            if (process.env.GUI_TARGET === 'native' && groupPseudoKey === 'hover') {
+              return
+            }
+
             if (!groupState) {
               if (process.env.NODE_ENV === 'development' && debug) {
                 log(`No parent with group prop, skipping styles: ${groupName}`)
@@ -1105,7 +1153,7 @@ export const getSplitStyles: StyleSplitter = (
               const nestedImportance = outerBase + importanceBump + innerBase + 1
 
               for (const subSubKey in nestedVal) {
-                // expand shorthands — getSubStyle doesn't expand keys
+                // expand shorthands, getSubStyle doesn't expand keys
                 // inside nested $ objects (they pass through propMapper as-is)
                 const expandedKey = shorthands[subSubKey] || subSubKey
                 const { usedKeys } = styleState
@@ -1337,7 +1385,18 @@ export const getSplitStyles: StyleSplitter = (
             Object.assign(styleState.classNames, style)
           } else {
             styleState.style ||= {}
-            Object.assign(styleState.style, normalizeStyle(style))
+            const normalized = normalizeStyle(style)
+            Object.assign(styleState.style, normalized)
+            if (shouldTrackStyleTokenProvenance) {
+              // the literal style prop is merged last and wins: carry its own
+              // token provenance forward, and clear a prior token wherever it
+              // supplies a literal (e.g. style={{ color: '#fff' }} over
+              // color="$color9" must stay a literal).
+              const styleOriginals = styleOriginalValues.get(normalized)
+              for (const k in normalized) {
+                recordStyleTokenProvenance(styleState, k, styleOriginals?.[k])
+              }
+            }
           }
         }
       }
@@ -1379,6 +1438,22 @@ export const getSplitStyles: StyleSplitter = (
     time`split-styles-pre-result`
   }
 
+  // stamp exact token provenance onto the final winning style object. on native
+  // (and non-className web) this is the same identity assigned to viewProps.style,
+  // so a consumer inspecting the host node's style can recover the token + theme
+  // behind each resolved value without any enumerable-key or RN-output change.
+  if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
+    const provenance: StyleTokenProvenance = {}
+    let hasProvenance = false
+    for (const key in styleState.tokenProvenance) {
+      provenance[key] = { token: styleState.tokenProvenance[key], theme: themeName }
+      hasProvenance = true
+    }
+    if (hasProvenance) {
+      setStyleTokenProvenance(styleState.style, provenance)
+    }
+  }
+
   const result: GetStyleResult = {
     hasMedia,
     fontFamily: styleState.fontFamily,
@@ -1526,9 +1601,9 @@ function mergeStyle(
     return
   }
 
-  // Track context overrides for pseudo/media styles (issues #3670, #3676)
-  // When a style sets a key that's in context props, update overriddenContextProps
-  // so it propagates to children. Use the original token value (like '$8')
+  // track context overrides for pseudo/media styles (issues #3670, #3676)
+  // when a style sets a key that's in context props, update overriddenContextProps
+  // so it propagates to children. use the original token value (like '$8')
   // instead of the resolved CSS variable (like 'var(--t-space-8)')
   // so children's functional variants can look up token values.
   const contextProps =
@@ -1560,10 +1635,32 @@ function mergeStyle(
         // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
         // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
         key === 'transform' && Array.isArray(out) ? [...out] : out
+      if (shouldTrackStyleTokenProvenance) {
+        // dev-tools token provenance: this write is the current winner for `key`
+        // (importance-gated above), so record the token that produced it, or clear
+        // a prior token when a literal wins, keeping literal-over-token exact.
+        recordStyleTokenProvenance(styleState, key, originalVal)
+      }
     }
   }
 }
 
+// track which token produced the winning value for a style key so the final
+// style object can expose exact provenance. only the base (painted) style is
+// tracked — pseudo/media writes flow through mergeStyle at their real importance,
+// and a literal override clears any earlier token for that key.
+function recordStyleTokenProvenance(
+  styleState: GetStyleState,
+  key: string,
+  originalVal: any
+) {
+  if (typeof originalVal === 'string' && originalVal[0] === '$') {
+    ;(styleState.tokenProvenance ||= {})[key] = originalVal
+  } else if (styleState.tokenProvenance && key in styleState.tokenProvenance) {
+    delete styleState.tokenProvenance[key]
+  }
+}
+
 export const getSubStyle = (
   styleState: GetStyleState,
   subKey: string,
@@ -1573,61 +1670,70 @@ export const getSubStyle = (
   const { staticConfig, conf, styleProps } = styleState
   const styleOut: TextStyle = {}
   let originalValues: Record<string, any> | undefined
-
-  for (let key in styleIn) {
-    const val = styleIn[key]
-    key = conf.shorthands[key] || key
-
-    // extract transition from pseudo-style props (e.g., hoverStyle.transition)
-    // store it separately for animation drivers to use for enter/exit timing
-    if (key === 'transition') {
-      styleState.pseudoTransitions ||= {}
-      styleState.pseudoTransitions[subKey as keyof typeof styleState.pseudoTransitions] =
-        val
-      // for CSS driver, also add transition to CSS output so native CSS transitions work
-      // group styles ($group-*) need !important to override inline base transition
-      const driver = styleState.animationDriver
-      if (driver?.outputStyle === 'css') {
-        const animationConfig = driver.animations?.[val as string]
-        if (animationConfig) {
-          const important = subKey[0] === '$' ? ' !important' : ''
-          styleOut['transition'] = `all ${animationConfig}${important}`
+  const styleInOriginalValues = styleOriginalValues.get(styleIn)
+  const parentProps = styleState.props
+  styleState.props = { ...parentProps, ...styleIn }
+
+  try {
+    for (let key in styleIn) {
+      const val = styleIn[key]
+      key = conf.shorthands[key] || key
+
+      // extract transition from pseudo-style props (e.g., hoverStyle.transition)
+      // store it separately for animation drivers to use for enter/exit timing
+      if (key === 'transition') {
+        styleState.pseudoTransitions ||= {}
+        styleState.pseudoTransitions[
+          subKey as keyof typeof styleState.pseudoTransitions
+        ] = val
+        // for CSS driver, also add transition to CSS output so native CSS transitions work
+        // group styles ($group-*) need !important to override inline base transition
+        const driver = styleState.animationDriver
+        if (driver?.outputStyle === 'css') {
+          const animationConfig = driver.animations?.[val as string]
+          if (animationConfig) {
+            const important = subKey[0] === '$' ? ' !important' : ''
+            styleOut['transition'] = `all ${animationConfig}${important}`
+          }
+        }
+        // not a known animation name, pass through as raw CSS
+        if (
+          !styleOut['transition'] &&
+          typeof val === 'string' &&
+          !driver?.animations?.[val]
+        ) {
+          styleOut['transition'] = val
         }
+        continue
       }
-      // not a known animation name, pass through as raw CSS
-      if (
-        !styleOut['transition'] &&
-        typeof val === 'string' &&
-        !driver?.animations?.[val]
-      ) {
-        styleOut['transition'] = val
+
+      const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
+      if (shouldSkip) {
+        continue
       }
-      continue
-    }
 
-    const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
-    if (shouldSkip) {
-      continue
+      propMapper(key, val, styleState, false, (skey, sval, originalVal) => {
+        // track original values for context prop propagation
+        const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal
+        if (trackedOriginalVal !== undefined) {
+          originalValues ||= {}
+          originalValues[skey] = trackedOriginalVal
+        }
+        // pseudo inside media
+        if (skey in validPseudoKeys) {
+          sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)
+        }
+        if (!avoidMergeTransform && skey in stylePropsTransform) {
+          mergeTransform(styleOut, skey, sval)
+        } else {
+          styleOut[skey] = styleProps.noNormalize
+            ? sval
+            : normalizeValueWithProperty(sval, key)
+        }
+      })
     }
-
-    propMapper(key, val, styleState, false, (skey, sval, originalVal) => {
-      // Track original values for context prop propagation
-      if (originalVal !== undefined) {
-        originalValues ||= {}
-        originalValues[skey] = originalVal
-      }
-      // pseudo inside media
-      if (skey in validPseudoKeys) {
-        sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)
-      }
-      if (!avoidMergeTransform && skey in stylePropsTransform) {
-        mergeTransform(styleOut, skey, sval)
-      } else {
-        styleOut[skey] = styleProps.noNormalize
-          ? sval
-          : normalizeValueWithProperty(sval, key)
-      }
-    })
+  } finally {
+    styleState.props = parentProps
   }
 
   if (!avoidMergeTransform) {
@@ -1680,7 +1786,7 @@ export const getSubStyle = (
   }
 
   // Store original values in WeakMap instead of on the object itself
-  if (originalValues) {
+  if (originalValues && Object.keys(originalValues).length) {
     styleOriginalValues.set(styleOut, originalValues)
   }
 

package/src/helpers/getTokenForKey.ts

@@ -98,12 +98,12 @@ export const getTokenForKey = (
 
     valOrVar = themeValue
     if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-      globalThis.guiAvoidTracking = true
+      globalThis.hanzoguiAvoidTracking = true
       console.info(
         ` - resolving ${key} to theme value ${value} resolveAs ${resolveAs}`,
         valOrVar
       )
-      globalThis.guiAvoidTracking = false
+      globalThis.hanzoguiAvoidTracking = false
     }
     hasSet = true
   } else {
@@ -150,7 +150,7 @@ export const getTokenForKey = (
               if (!didLogMissingToken) {
                 didLogMissingToken = true
                 console.groupCollapsed(
-                  `[gui] Warning: missing token ${key} in category ${cat} - ${value} (open for details)`
+                  `[hanzogui] Warning: missing token ${key} in category ${cat} - ${value} (open for details)`
                 )
                 console.info(
                   `Note: this could just be due to you not setting all the theme tokens Gui expects, which is harmless, but
@@ -192,9 +192,9 @@ export const getTokenForKey = (
     }
 
     if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-      globalThis.guiAvoidTracking = true
+      globalThis.hanzoguiAvoidTracking = true
       console.info(`resolved`, resolveAs, valOrVar, out)
-      globalThis.guiAvoidTracking = false
+      globalThis.hanzoguiAvoidTracking = false
     }
     return out
   }

package/src/helpers/getVariantExtras.tsx

@@ -2,11 +2,12 @@ import { getSetting } from '../config'
 import { getVariableValue } from '../createVariable'
 import type { GenericFonts, GetStyleState, LanguageContextType } from '../types'
 
-const cache = new WeakMap()
+const cache = new WeakMap<GetStyleState, { props: GetStyleState['props']; value: any }>()
 
 export const getVariantExtras = (styleState: GetStyleState) => {
-  if (cache.has(styleState)) {
-    return cache.get(styleState)
+  const cached = cache.get(styleState)
+  if (cached?.props === styleState.props) {
+    return cached.value
   }
 
   const { props, conf, context, theme, styleProps } = styleState
@@ -39,7 +40,7 @@ export const getVariantExtras = (styleState: GetStyleState) => {
     props,
   }
 
-  cache.set(styleState, next)
+  cache.set(styleState, { props, value: next })
 
   return next as any
 }

package/src/helpers/insertStyleRule.tsx

@@ -8,7 +8,7 @@ import type {
   TokensParsed,
 } from '../types'
 
-// only cache gui styles
+// only cache hanzogui styles
 // TODO merge totalSelectorsInserted and allSelectors?
 const scannedCache = new WeakMap<CSSStyleSheet, string>()
 const totalSelectorsInserted = new Map<string, number>()
@@ -135,7 +135,7 @@ function updateSheetStyles(
     } else {
       fails++
       if (fails > bailAfter) {
-        // conservatively bail out of non-gui sheets
+        // conservatively bail out of non-hanzogui sheets
         return
       }
       continue
@@ -249,7 +249,7 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
   } satisfies DedupedTheme
 }
 
-const guiSelectorRegex = /\.tm_xxt/
+const hanzoguiSelectorRegex = /\.tm_xxt/
 
 function getGuiSelector(
   rule: CSSRule | null,
@@ -259,15 +259,15 @@ function getGuiSelector(
     const text = rule.selectorText
 
     // only matches t_ starting selector chains
-    if (text[0] === ':' && text[1] === 'r' && guiSelectorRegex.test(text)) {
+    if (text[0] === ':' && text[1] === 'r' && hanzoguiSelectorRegex.test(text)) {
       const id = getIdentifierFromGuiSelector(
         // next.js minifies it so its in front
-        text.replace(guiSelectorRegex, '')
+        text.replace(hanzoguiSelectorRegex, '')
       )
       return collectThemes ? [id, rule, true] : [id, rule]
     }
   } else if (rule instanceof CSSMediaRule) {
-    // gui only ever inserts 1 rule per media
+    // hanzogui only ever inserts 1 rule per media
     if (rule.cssRules.length > 1) return
     return getGuiSelector(rule.cssRules[0])
   }
@@ -305,7 +305,7 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
 
   if (!sheet && document.head) {
     const styleTag = document.createElement('style')
-    styleTag.id = '_gui-styles'
+    styleTag.id = '_hanzogui-styles'
     if (nonce) {
       styleTag.nonce = nonce
     }

package/src/helpers/mainThreadPressEvents.native.ts

@@ -6,6 +6,7 @@
  * long press, cancellation, and min press duration.
  */
 
+import { unstable_hasExternalPressOwnership } from '@hanzogui/native'
 import { useRef } from 'react'
 
 type PressState =
@@ -20,6 +21,7 @@ interface PressRef {
   pressOutTimer: ReturnType<typeof setTimeout> | null
   longPressTimer: ReturnType<typeof setTimeout> | null
   activateTime: number
+  blockedByExternalOwnership: boolean
 }
 
 const DEFAULT_LONG_PRESS_DELAY = 500
@@ -39,6 +41,7 @@ export function useMainThreadPressEvents(
       pressOutTimer: null,
       longPressTimer: null,
       activateTime: 0,
+      blockedByExternalOwnership: false,
     }
   }
 
@@ -80,10 +83,34 @@ export function useMainThreadPressEvents(
     ref.current.longPressTimer = null
   }
 
-  viewProps.onStartShouldSetResponder = () => !events.disabled
+  // user-supplied responder props (the View's raw RN gesture API) must keep
+  // working: blindly overwriting them here silently killed any press-hold-drag
+  // gesture built on onResponderMove/onResponderRelease whenever the element
+  // also had hover/press events. compose instead — user handler first, then
+  // the press synthesis.
+  const userStartShouldSet = viewProps.onStartShouldSetResponder
+  const userGrant = viewProps.onResponderGrant
+  const userRelease = viewProps.onResponderRelease
+  const userTerminate = viewProps.onResponderTerminate
+  const userTerminationRequest = viewProps.onResponderTerminationRequest
+  const userMove = viewProps.onResponderMove
+
+  viewProps.onStartShouldSetResponder = (e: any) => {
+    if (userStartShouldSet?.(e)) return true
+    return !events.disabled && !unstable_hasExternalPressOwnership()
+  }
 
   viewProps.onResponderGrant = (e: any) => {
     cleanup()
+
+    if (unstable_hasExternalPressOwnership()) {
+      ref.current.state = 'idle'
+      ref.current.blockedByExternalOwnership = true
+      return
+    }
+
+    userGrant?.(e)
+    ref.current.blockedByExternalOwnership = false
     ref.current.state = 'pressing'
 
     if (delayPressIn > 0) {
@@ -103,6 +130,14 @@ export function useMainThreadPressEvents(
   }
 
   viewProps.onResponderRelease = (e: any) => {
+    if (ref.current.blockedByExternalOwnership || unstable_hasExternalPressOwnership()) {
+      cleanup()
+      ref.current.blockedByExternalOwnership = false
+      ref.current.state = 'idle'
+      return
+    }
+
+    userRelease?.(e)
     const wasLongPressed = ref.current.state === 'longPressed'
     cleanup()
 
@@ -117,21 +152,26 @@ export function useMainThreadPressEvents(
 
     deactivate(e)
     ref.current.state = 'idle'
+    ref.current.blockedByExternalOwnership = false
   }
 
   viewProps.onResponderTerminate = (e: any) => {
+    userTerminate?.(e)
     cleanup()
     if (ref.current.state === 'active' || ref.current.state === 'longPressed') {
       deactivate(e)
     }
     ref.current.state = 'idle'
+    ref.current.blockedByExternalOwnership = false
   }
 
-  viewProps.onResponderTerminationRequest = () => {
+  viewProps.onResponderTerminationRequest = (e: any) => {
+    if (userTerminationRequest) return userTerminationRequest(e)
     return events.cancelable !== false
   }
 
   viewProps.onResponderMove = (e: any) => {
+    userMove?.(e)
     events.onPressMove?.(e)
   }
 }

package/src/helpers/mergeProps.ts

@@ -102,7 +102,7 @@ function mergeProp(
 ) {
   let val = props[key]
 
-  // one special case - we merge gui style sub-objects
+  // one special case - we merge hanzogui style sub-objects
   if (
     defaultProps &&
     key in defaultProps &&

package/src/helpers/normalizeStyle.ts

@@ -3,6 +3,7 @@ import { fixStyles } from './expandStyles'
 import { isObj } from './isObj'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import { pseudoDescriptors } from './pseudoDescriptors'
+import { styleOriginalValues } from './styleOriginalValues'
 
 /**
  * This is what you want to run before Object.assign() a style onto another.
@@ -14,29 +15,50 @@ import { pseudoDescriptors } from './pseudoDescriptors'
 
 export function normalizeStyle(style: Record<string, any>, disableNormalize = false) {
   const res: Record<string, any> = {}
+  const originalValues = styleOriginalValues.get(style)
+  let nextOriginalValues: Record<string, any> | undefined
 
   for (let key in style) {
     const prop = style[key]
     if (prop == null) continue
+    const originalValue = originalValues?.[key]
     if (
       key in pseudoDescriptors ||
       // this should capture all parent-based styles like media, group, etc
       (key[0] === '$' && isObj(prop))
     ) {
       res[key] = normalizeStyle(prop, disableNormalize)
+      if (originalValue !== undefined) {
+        nextOriginalValues ||= {}
+        nextOriginalValues[key] = originalValue
+      }
       continue
     }
     const value = disableNormalize ? prop : normalizeValueWithProperty(prop, key)
     // expand react-native shorthands
     const out = expandStyle(key, value)
     if (out) {
-      Object.assign(res, Object.fromEntries(out))
+      for (const [nextKey, nextValue] of out) {
+        res[nextKey] = nextValue
+        if (originalValue !== undefined) {
+          nextOriginalValues ||= {}
+          nextOriginalValues[nextKey] = originalValue
+        }
+      }
     } else {
       res[key] = value
+      if (originalValue !== undefined) {
+        nextOriginalValues ||= {}
+        nextOriginalValues[key] = originalValue
+      }
     }
   }
 
   fixStyles(res)
 
+  if (nextOriginalValues) {
+    styleOriginalValues.set(res, nextOriginalValues)
+  }
+
   return res
 }