@tamagui/web 1.46.2 → 1.47.0

package/src/helpers/getSplitStyles.tsx

@@ -41,9 +41,10 @@ import type {
   PseudoStyles,
   RulesToInsert,
   SpaceTokens,
-  SplitStyleState,
-  StaticConfigParsed,
+  SplitStyleProps,
+  StaticConfig,
   StyleObject,
+  TamaguiComponentState,
   TamaguiInternalConfig,
   TextStyleProps,
   ThemeParsed,
@@ -51,7 +52,6 @@ import type {
 } from '../types'
 import type { LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
-import { getPropMappedFontFamily } from './createPropMapper'
 import { fixStyles } from './expandStyles'
 import { generateAtomicStyles, getStylesAtomic, styleToCSS } from './getStylesAtomic'
 import {
@@ -65,6 +65,7 @@ import {
   normalizeValueWithProperty,
   reverseMapClassNameToValue,
 } from './normalizeValueWithProperty'
+import { getPropMappedFontFamily, propMapper } from './propMapper'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 const fontFamilyKey = 'fontFamily'
@@ -82,12 +83,11 @@ let conf: TamaguiInternalConfig
 
 type StyleSplitter = (
   props: { [key: string]: any },
-  staticConfig: StaticConfigParsed,
-  themeState: {
-    theme: ThemeParsed
-    name: string
-  },
-  state: SplitStyleState,
+  staticConfig: StaticConfig,
+  theme: ThemeParsed,
+  themeName: string,
+  componentState: TamaguiComponentState,
+  styleProps: SplitStyleProps,
   parentSplitStyles?: GetStyleResult | null,
   languageContext?: LanguageContextType,
   // web-only
@@ -97,18 +97,34 @@ type StyleSplitter = (
 
 export const PROP_SPLIT = '-'
 
-// loop props backwards
-//   track used keys:
-//     const keys = new Set<string>()
-//   keep classnames and styles separate:
-//     const styles = {}
-//     const classNames = {}
+// if you need and easier way to test performance, you can do something like this
+// add this early return somewhere in this file and you can see roughly where it slows down:
+
+// return {
+//   space,
+//   hasMedia,
+//   fontFamily: styleState.fontFamily,
+//   viewProps: {
+//     children: props.children,
+//   },
+//   style: {
+//     borderColor: props.borderColor,
+//     borderWidth: props.borderWidth,
+//     padding: props.padding,
+//   },
+//   pseudos,
+//   classNames,
+//   rulesToInsert,
+//   dynamicThemeAccess,
+// }
 
 export const getSplitStyles: StyleSplitter = (
   props,
   staticConfig,
-  themeState,
-  state,
+  theme,
+  themeName,
+  componentState,
+  styleProps,
   parentSplitStyles,
   languageContext,
   elementType,
@@ -116,31 +132,27 @@ export const getSplitStyles: StyleSplitter = (
 ) => {
   conf = conf || getConfig()
   const { shorthands } = conf
-  const { theme, name: themeName } = themeState
   const {
     isHOC,
+    isText,
     variants,
-    propMapper,
     isReactNative,
     inlineProps,
     inlineWhenUnflattened,
+    parentStaticConfig,
+    acceptsClassName,
   } = staticConfig
-  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
+  const validStyleProps = isText ? stylePropsText : validStyles
   const viewProps: GetStyleResult['viewProps'] = {}
   let pseudos: PseudoStyles | null = null
-  const mediaState = state.mediaState || globalMediaState
+  const mediaState = styleProps.mediaState || globalMediaState
   const usedKeys: Record<string, number> = {}
-  const propKeys = Object.keys(props)
-  const numProps = propKeys.length
   let space: SpaceTokens | null = props.space
   let hasMedia: boolean | string[] = false
   let dynamicThemeAccess: boolean | undefined
-
-  const shouldDoClasses =
-    staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
+  const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClassNames
 
   let style: ViewStyleWithPseudos = {}
-  const flatTransforms: FlatTransforms = {}
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
   let className = '' // existing classNames
@@ -154,11 +166,12 @@ export const getSplitStyles: StyleSplitter = (
    * Not the biggest fan of creating this object but it is a nice API
    */
   const styleState: GetStyleState = {
-    curProps: props,
+    curProps: { ...props },
     classNames,
     conf,
     props,
-    state,
+    styleProps,
+    componentState,
     staticConfig,
     style,
     theme,
@@ -172,7 +185,7 @@ export const getSplitStyles: StyleSplitter = (
     console.groupCollapsed('getSplitStyles (collapsed)')
     // prettier-ignore
     // rome-ignore lint/nursery/noConsoleLog: ok
-    console.log({ props, staticConfig, shouldDoClasses, state, propKeys, styleState, theme: { ...theme } })
+    console.log({ props, staticConfig, shouldDoClasses, styleProps, componentState, styleState, theme: { ...theme } })
     console.groupEnd()
   }
 
@@ -180,7 +193,7 @@ export const getSplitStyles: StyleSplitter = (
   // since the compiler will optimize to className we just treat className as the more powerful
   //   TODO the compiler should probably just leave things inline if its not flattening
   //   that way it keeps merging order
-  if (typeof props.className === 'string') {
+  if (process.env.TAMAGUI_TARGET === 'web' && typeof props.className === 'string') {
     for (const cn of props.className.split(' ')) {
       if (cn[0] === '_') {
         // tamagui, merge it expanded on key, eventually this will go away with better compiler
@@ -207,10 +220,9 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  for (let i = 0; i < numProps; i++) {
-    const keyOg = propKeys[i]
+  for (const keyOg in props) {
     let keyInit = keyOg
-    let valInit = props[keyInit]
+    let valInit = props[keyOg]
 
     // normalize shorthands up front
     if (keyInit in shorthands) {
@@ -306,7 +318,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     const isMainStyle = keyInit === 'style'
-    if (isMainStyle || keyInit.startsWith('_style')) {
+    if (isMainStyle || (keyInit[0] === '_' && keyInit.startsWith('_style'))) {
       if (!valInit) continue
       const styles = [].concat(valInit).flat()
       const styleLen = styles.length
@@ -472,13 +484,18 @@ export const getSplitStyles: StyleSplitter = (
      * for if there's a pseudo/media returned from it.
      */
 
-    let isMedia = isMediaKey(keyInit)
+    const isValidStyleKeyInit = keyInit in validStyleProps
+    const isShorthand = keyInit in shorthands
+
+    let isVariant = !isValidStyleKeyInit && variants && keyInit in variants
+
+    const isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant
+
     let isPseudo = keyInit in validPseudoKeys
+    let isMedia = !isStyleLikeKey && !isPseudo && isMediaKey(keyInit)
     let isMediaOrPseudo = isMedia || isPseudo
 
-    let isVariant = variants && keyInit in variants
-    const isStyleProp =
-      isMediaOrPseudo || isVariant || keyInit in validStyleProps || keyInit in shorthands
+    const isStyleProp = isMediaOrPseudo || isVariant || isValidStyleKeyInit || isShorthand
 
     if (isStyleProp && props.asChild === 'except-style') {
       continue
@@ -487,14 +504,14 @@ export const getSplitStyles: StyleSplitter = (
     const shouldPassProp =
       !isStyleProp ||
       // is in parent variants
-      (isHOC &&
-        staticConfig.parentStaticConfig?.variants &&
-        keyInit in staticConfig.parentStaticConfig.variants)
+      (isHOC && parentStaticConfig?.variants && keyInit in parentStaticConfig.variants)
 
     const isHOCShouldPassThrough = Boolean(
       isHOC &&
-        (isMediaOrPseudo ||
-          staticConfig.parentStaticConfig?.variants?.[keyInit] ||
+        (isShorthand ||
+          isValidStyleKeyInit ||
+          isMediaOrPseudo ||
+          parentStaticConfig?.variants?.[keyInit] ||
           keyInit in skipProps)
     )
 
@@ -508,7 +525,7 @@ export const getSplitStyles: StyleSplitter = (
       )
       // prettier-ignore
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
-      console.log({ valInit, variants, variant: variants?.[keyInit], isVariant, shouldPassProp, isHOCShouldPassThrough, curProps: { ...styleState.curProps } })
+      console.log({ valInit, variants, variant: variants?.[keyInit], isVariant, shouldPassProp, isHOCShouldPassThrough, curProps: { ...styleState.curProps }, parentStaticConfig })
       console.groupEnd()
     }
 
@@ -546,18 +563,25 @@ export const getSplitStyles: StyleSplitter = (
     if (keyInit in skipProps) continue
 
     // we sort of have to update fontFamily all the time: before variants run, after each variant
-    if (
-      valInit &&
-      (keyInit === fontFamilyKey || keyInit === shorthands[fontFamilyKey]) &&
-      valInit in conf.fontsParsed
-    ) {
-      styleState.fontFamily = valInit
+    if (isText) {
+      if (
+        valInit &&
+        (keyInit === fontFamilyKey || keyInit === shorthands[fontFamilyKey]) &&
+        valInit in conf.fontsParsed
+      ) {
+        styleState.fontFamily = valInit
+      }
     }
 
-    const expanded =
-      isMediaOrPseudo || (!(keyInit in validStyleProps) && !isVariant)
-        ? [[keyInit, valInit]]
-        : propMapper(keyInit, valInit, styleState)
+    const avoidPropMap =
+      isMediaOrPseudo ||
+      // micro-bench optimize - if theres no variants at all, no need to do expansions
+      (isValidStyleKeyInit && !variants) ||
+      (!isVariant && !isValidStyleKeyInit)
+
+    const expanded = avoidPropMap
+      ? [[keyInit, valInit]]
+      : propMapper(keyInit, valInit, styleState)
 
     const next = getPropMappedFontFamily(expanded)
     if (next) {
@@ -569,7 +593,7 @@ export const getSplitStyles: StyleSplitter = (
       if (!isServer && isDevTools) {
         // prettier-ignore
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log({ expanded, state: { ...state }, isVariant, variant: variants?.[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys }, curProps: { ...styleState.curProps } })
+        console.log({ expanded, styleProps, componentState, isVariant, variant: variants?.[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys }, curProps: { ...styleState.curProps } })
         // rome-ignore lint/nursery/noConsoleLog: ok
         console.log('expanded', expanded, '\nusedKeys', { ...usedKeys }, '\ncurrent', {
           ...style,
@@ -584,27 +608,21 @@ export const getSplitStyles: StyleSplitter = (
       if (val == null) continue
       if (key in usedKeys) continue
 
-      if (key === fontFamilyKey && valInit && val) {
-        const fam = valInit[0] === '$' ? valInit : val
-        if (fam in conf.fontsParsed) {
-          styleState.fontFamily = fam
-        }
-      }
-
-      isMedia = isMediaKey(key)
       isPseudo = key in validPseudoKeys
+      isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key)
       isMediaOrPseudo = isMedia || isPseudo
+      isVariant = variants && key in variants
 
       if (inlineProps?.has(key) || (IS_STATIC && inlineWhenUnflattened?.has(key))) {
         viewProps[key] = props[key] ?? val
       }
 
-      // have to run this logic again here
+      // have to run this logic again here because expansions may need to be passed down
+      // see StyledButtonVariantPseudoMerge test
       const isHOCShouldPassThrough =
-        isHOC && (isMediaOrPseudo || staticConfig.parentStaticConfig?.variants?.[keyInit])
+        isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])
 
       if (isHOCShouldPassThrough) {
-        isVariant = variants && key in variants
         passDownProp(viewProps, key, val, isMediaOrPseudo)
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           console.groupCollapsed(` - passing down prop ${key}`)
@@ -612,10 +630,7 @@ export const getSplitStyles: StyleSplitter = (
           console.log({ val, after: { ...viewProps[key] } })
           console.groupEnd()
         }
-        // if its also a variant here, pass down but also keep it
-        if (!isVariant) {
-          continue
-        }
+        continue
       }
 
       // pseudo
@@ -627,8 +642,7 @@ export const getSplitStyles: StyleSplitter = (
           styleState,
           key,
           val,
-          true,
-          state.noClassNames
+          styleProps.noClassNames
         )
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
@@ -638,8 +652,8 @@ export const getSplitStyles: StyleSplitter = (
         // dev-time warning that helps clear confusion around need for animation  when using enter/exit style
         if (
           process.env.NODE_ENV === 'development' &&
-          !state.isAnimated &&
-          !state.unmounted &&
+          !styleProps.isAnimated &&
+          !componentState.unmounted &&
           (isEnter || isExit)
         ) {
           console.warn(
@@ -650,13 +664,7 @@ export const getSplitStyles: StyleSplitter = (
         }
 
         // don't continue here on isEnter && !state.unmounted because we need to merge defaults
-        if (!descriptor || (isExit && !state.isExiting)) {
-          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            // prettier-ignore
-            // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log('skip exit')
-          }
-
+        if (!descriptor || (isExit && !styleProps.isExiting)) {
           continue
         }
 
@@ -701,8 +709,8 @@ export const getSplitStyles: StyleSplitter = (
           // see the if (isDisabled) block below which loops through animatableDefaults
 
           const descriptorKey = descriptor.stateKey || descriptor.name
-          const pseudoState = state[descriptorKey]
-          let isDisabled = !pseudoState
+          const pseudoState = componentState[descriptorKey]
+          let isDisabled = isExit ? !styleProps.isExiting : !pseudoState
 
           // we never animate in on server side just show the full thing
           // on client side we use CSS to hide the fully in SSR items, then
@@ -713,23 +721,15 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed('pseudo', key, !isDisabled)
+            console.groupCollapsed('pseudo', key, { isDisabled })
             // prettier-ignore
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log(pseudoStyleObject, { isDisabled, descriptorKey, descriptor, pseudoState, state: { ...state } })
+            console.log(pseudoStyleObject, { isDisabled, descriptorKey, descriptor, pseudoState, state: { ...componentState } })
             console.groupEnd()
           }
 
           const importance = descriptor.priority
 
-          if (!isDisabled) {
-            // mark usedKeys based not on pseudoStyleObject
-            for (const key in val) {
-              const k = shorthands[key] || key
-              usedKeys[k] = Math.max(importance, usedKeys[k] || 0)
-            }
-          }
-
           for (const pkey in pseudoStyleObject) {
             const val = pseudoStyleObject[pkey]
             // when disabled ensure the default value is set for future animations to align
@@ -737,7 +737,7 @@ export const getSplitStyles: StyleSplitter = (
             if (isDisabled) {
               if (pkey in animatableDefaults && !(pkey in usedKeys)) {
                 const defaultVal = animatableDefaults[pkey]
-                mergeStyle(styleState, flatTransforms, pkey, defaultVal)
+                mergeStyle(styleState, pkey, defaultVal)
               }
             } else {
               const curImportance = usedKeys[importance] || 0
@@ -747,7 +747,7 @@ export const getSplitStyles: StyleSplitter = (
                 pseudos ||= {}
                 pseudos[key] ||= {}
                 pseudos[key][pkey] = val
-                mergeStyle(styleState, flatTransforms, pkey, val)
+                mergeStyle(styleState, pkey, val)
                 usedKeys[pkey] ||= 1
               }
               if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -757,13 +757,21 @@ export const getSplitStyles: StyleSplitter = (
               }
             }
           }
+
+          // set this after the loop over pseudoStyleObject so it applies before setting usedKeys
+          if (!isDisabled) {
+            // mark usedKeys based on pseudoStyleObject
+            for (const key in val) {
+              const k = shorthands[key] || key
+              usedKeys[k] = Math.max(importance, usedKeys[k] || 0)
+            }
+          }
         }
 
         continue
       }
-
       // media
-      if (isMedia) {
+      else if (isMedia) {
         if (!val) continue
 
         const isPlatformMedia = key.startsWith('$platform-')
@@ -795,7 +803,9 @@ export const getSplitStyles: StyleSplitter = (
           console.log(`  📺 ${key}`, { key, mediaStyle, props, shouldDoClasses })
         }
 
-        const hasSpace = 'space' in val
+        // 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 = []
@@ -902,7 +912,7 @@ export const getSplitStyles: StyleSplitter = (
         key in validStyleProps ||
         (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
       ) {
-        mergeStyle(styleState, flatTransforms, key, val)
+        mergeStyle(styleState, key, val)
         continue
       }
 
@@ -927,10 +937,24 @@ export const getSplitStyles: StyleSplitter = (
     styleToCSS(style)
   }
 
+  // these are only the flat transforms
   // always do this at the very end to preserve the order strictly (animations, origin)
   // and allow proper merging of all pseudos before applying
-  if (flatTransforms) {
-    mergeFlatTransforms(style, flatTransforms, true)
+  if (styleState.transforms) {
+    // we need to match the order for animations to work because it needs consistent order
+    // was thinking of having something like `state.prevTransformsOrder = ['y', 'x', ...]
+    // but if we just handle it here its not a big cost and avoids having stateful things
+    // so the strategy is: always sort by a consistent order, until you run into a "duplicate"
+    // because you can have something like:
+    //   [{ translateX: 0 }, { scale: 1 }, { translateX: 10 }]
+    // so basically we sort until we get to a duplicate... we could sort even smarter but
+    // this should work for most (all?) of our cases since the order preservation really only needs to apply
+    // to the "flat" transform props
+    Object.entries(styleState.transforms)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .forEach(([key, val]) => {
+        mergeTransform(style, key, val, true)
+      })
   }
 
   // add in defaults if not set:
@@ -962,14 +986,17 @@ export const getSplitStyles: StyleSplitter = (
 
         for (const atomicStyle of atomic) {
           const key = atomicStyle.property
-          if (state.isAnimated && props.animateOnly && props.animateOnly.includes(key)) {
+          if (
+            styleProps.isAnimated &&
+            (!props.animateOnly || props.animateOnly.includes(key))
+          ) {
             retainedStyles[key] = style[key]
           } else {
             addStyleToInsertRules(rulesToInsert, atomicStyle)
             mergeClassName(transforms, classNames, key, atomicStyle.identifier)
           }
         }
-        if (!IS_STATIC && !state.keepStyleSSR) {
+        if (!IS_STATIC && !styleProps.keepStyleSSR) {
           style = retainedStyles
         }
       }
@@ -1081,7 +1108,7 @@ export const getSplitStyles: StyleSplitter = (
     if (isDevTools) {
       console.groupCollapsed('  🔹 ===>')
       // prettier-ignore
-      const logs = { ...result, state, transforms, viewProps, viewPropsOrder: Object.keys(viewProps), rulesToInsert, parentSplitStyles, flatTransforms }
+      const logs = { ...result, componentState, transforms, viewProps, viewPropsOrder: Object.keys(viewProps), rulesToInsert, parentSplitStyles }
       for (const key in logs) {
         // rome-ignore lint/nursery/noConsoleLog: ok
         console.log(key, logs[key])
@@ -1125,46 +1152,16 @@ function mergeClassName(
   }
 }
 
-/**
- * getSubStyle calls propMapper with props
- * those should be specific to the substyle, but fallback to the base props
- * so given props:
- *
- *   { fontSize: 12, color: 'red', $sm: { color: 'blue' } }
- *
- * getSubStyle props should be a proxy that ends up like:
- *
- *   { fontSize: 12, color: 'blue' }
- *
- * and to avoid re-creating it over and over, use a WeakMap
- */
-
-function getSubStyleProps(
-  defaultProps: Object,
-  baseProps: Object,
-  specificProps: Object
-) {
-  return {
-    ...defaultProps,
-    ...baseProps,
-    ...specificProps,
-  }
-}
-
-function mergeStyle(
-  { classNames, viewProps, style, usedKeys }: GetStyleState,
-  flatTransforms: FlatTransforms,
-  key: string,
-  val: any
-) {
-  if (val?.[0] === '_') {
+function mergeStyle(styleState: GetStyleState, key: string, val: any) {
+  const { classNames, viewProps, style, usedKeys } = styleState
+  if (isWeb && val?.[0] === '_') {
     classNames[key] = val
     usedKeys[key] ||= 1
   } else if (key in stylePropsTransform) {
-    flatTransforms ||= {}
-    flatTransforms[key] = val
+    styleState.transforms ||= {}
+    styleState.transforms[key] = val
   } else {
-    const out = normalizeValueWithProperty(val, key)
+    const out = isWeb ? normalizeValueWithProperty(val, key) : val
     if (key in validStylesOnBaseProps) {
       viewProps[key] = out
     } else {
@@ -1177,7 +1174,6 @@ export const getSubStyle = (
   styleState: GetStyleState,
   subKey: string,
   styleIn: Object,
-  avoidDefaultProps?: boolean,
   avoidMergeTransform?: boolean
 ): TextStyleProps => {
   const { staticConfig, props, conf } = styleState
@@ -1186,13 +1182,7 @@ export const getSubStyle = (
   for (let key in styleIn) {
     const val = styleIn[key]
     key = conf.shorthands[key] || key
-    const expanded = staticConfig.propMapper(
-      key,
-      val,
-      styleState,
-      getSubStyleProps(staticConfig.defaultProps, props, props[subKey]),
-      avoidDefaultProps
-    )
+    const expanded = propMapper(key, val, styleState, { ...props, ...props[subKey] })
     if (!expanded || (!staticConfig.isHOC && key in skipProps)) {
       continue
     }
@@ -1252,8 +1242,6 @@ const animatableDefaults = {
 const lowercaseHyphenate = (match: string) => `-${match.toLowerCase()}`
 const hyphenate = (str: string) => str.replace(/[A-Z]/g, lowercaseHyphenate)
 
-export type FlatTransforms = Record<string, any>
-
 const mergeTransform = (
   obj: TextStyleProps,
   key: string,
@@ -1269,27 +1257,6 @@ const mergeTransform = (
   } as any)
 }
 
-// we need to match the order for animations to work because it needs consistent order
-// was thinking of having something like `state.prevTransformsOrder = ['y', 'x', ...]
-// but if we just handle it here its not a big cost and avoids having stateful things
-// so the strategy is: always sort by a consistent order, until you run into a "duplicate"
-// because you can have something like:
-//   [{ translateX: 0 }, { scale: 1 }, { translateX: 10 }]
-// so basically we sort until we get to a duplicate... we could sort even smarter but
-// this should work for most (all?) of our cases since the order preservation really only needs to apply
-// to the "flat" transform props
-const mergeFlatTransforms = (
-  obj: TextStyleProps,
-  flatTransforms: FlatTransforms,
-  backwards = false
-) => {
-  Object.entries(flatTransforms)
-    .sort(([a], [b]) => a.localeCompare(b))
-    .forEach(([key, val]) => {
-      mergeTransform(obj, key, val, backwards)
-    })
-}
-
 const mapTransformKeys = {
   x: 'translateX',
   y: 'translateY',

package/src/helpers/getStylesAtomic.ts

@@ -107,10 +107,10 @@ export function styleToCSS(style: Record<string, any>) {
     const radius = normalizeValueWithProperty(shadowRadius)
     const shadow = `${width} ${height} ${radius} ${shadowColor}`
     style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow
-    style.shadowOffset = undefined
-    style.shadowRadius = undefined
-    style.shadowColor = undefined
-    style.shadowOpacity = undefined
+    delete style.shadowOffset
+    delete style.shadowRadius
+    delete style.shadowColor
+    delete style.shadowOpacity
   }
 
   // text-shadow
@@ -125,9 +125,9 @@ export function styleToCSS(style: Record<string, any>) {
       const offsetY = normalizeValueWithProperty(height)
       style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
     }
-    style.textShadowColor = undefined
-    style.textShadowOffset = undefined
-    style.textShadowRadius = undefined
+    delete style.textShadowColor
+    delete style.textShadowOffset
+    delete style.textShadowRadius
   }
 }