@tamagui/core 1.0.1-beta.193 → 1.0.1-beta.195

package/src/helpers/getSplitStyles.tsx

@@ -1,11 +1,15 @@
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
+import type { ViewStyle } from '@tamagui/types-react-native'
 import { useInsertionEffect } from 'react'
-import type { ViewStyle } from 'react-native'
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { mediaState as globalMediaState, mediaQueryConfig } from '../hooks/useMedia'
+import {
+  mediaState as globalMediaState,
+  mediaQueryConfig,
+  mergeMediaByImportance,
+} from '../hooks/useMedia'
 import type {
   DebugProp,
   MediaQueryKey,
@@ -32,9 +36,11 @@ import {
   updateInserted,
   updateRules,
 } from './insertStyleRule'
-import { mergeProps } from './mergeProps'
 import { mergeTransform } from './mergeTransform'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
+import {
+  normalizeValueWithProperty,
+  reverseMapClassNameToValue,
+} from './normalizeValueWithProperty.js'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 export type SplitStyles = ReturnType<typeof getSplitStyles>
@@ -46,12 +52,13 @@ const skipProps = {
   animateOnly: true,
   debug: true,
   componentName: true,
+  role: true,
+  tag: true,
 }
 
 // native only skips
 if (process.env.TAMAGUI_TARGET === 'native') {
   Object.assign(skipProps, {
-    tag: true,
     whiteSpace: true,
     wordWrap: true,
     textOverflow: true,
@@ -65,37 +72,93 @@ if (process.env.TAMAGUI_TARGET === 'native') {
   })
 }
 
+// web only maps accessibility to aria props
+const accessibilityDirectMap: Record<string, string> = {}
+if (process.env.TAMAGUI_TARGET === 'web') {
+  // bundle size shave
+  const items = {
+    Hidden: true,
+    ActiveDescendant: true,
+    Atomic: true,
+    AutoComplete: true,
+    Busy: true,
+    Checked: true,
+    ColumnCount: 'colcount',
+    ColumnIndex: 'colindex',
+    ColumnSpan: 'colspan',
+    Current: true,
+    Details: true,
+    ErrorMessage: true,
+    Expanded: true,
+    HasPopup: true,
+    Invalid: true,
+    Label: true,
+    Level: true,
+    Modal: true,
+    Multiline: true,
+    MultiSelectable: true,
+    Orientation: true,
+    Owns: true,
+    Placeholder: true,
+    PosInSet: true,
+    Pressed: true,
+    RoleDescription: true,
+    RowCount: true,
+    RowIndex: true,
+    RowSpan: true,
+    Selected: true,
+    SetSize: true,
+    Sort: true,
+    ValueMax: true,
+    ValueMin: true,
+    ValueNow: true,
+    ValueText: true,
+  }
+  for (const key in items) {
+    let val = items[key]
+    if (val === true) {
+      val = key.toLowerCase()
+    }
+    accessibilityDirectMap[`accessibility${key}`] = `aria-${val}`
+  }
+}
+
 type TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey
 
 let conf: TamaguiInternalConfig
 
-type StyleSplitter = (
-  props: { [key: string]: any },
-  staticConfig: StaticConfigParsed,
-  theme: ThemeParsed,
-  state: SplitStyleState,
-  defaultClassNames?: any,
-  languageContext?: LanguageContextType,
-  debug?: DebugProp
-) => {
+type SplitStylesAndProps = {
   pseudos: PseudoStyles
   medias: Record<MediaQueryKey, ViewStyle>
   style: ViewStyle
   classNames: ClassNamesObject
   rulesToInsert: RulesToInsert
-  viewProps: StackProps
+  viewProps: StackProps & Record<string, any>
   fontFamily: string | undefined
   mediaKeys: string[]
 }
 
+type StyleSplitter = (
+  props: { [key: string]: any },
+  staticConfig: StaticConfigParsed,
+  theme: ThemeParsed,
+  state: SplitStyleState,
+  parentSplitStyles?: SplitStylesAndProps | null,
+  languageContext?: LanguageContextType,
+  // web-only
+  elementType?: string,
+  debug?: DebugProp
+) => SplitStylesAndProps
+
 export const PROP_SPLIT = '-'
 
-// this is how compiler outputs psueodo identifier
-// TODO remove in next refactor
-export const pseudoCNInverse = {
-  hover: 'hoverStyle',
-  focus: 'focusStyle',
-  press: 'pressStyle',
+const accessibilityRoleToWebRole = {
+  adjustable: 'slider',
+  header: 'heading',
+  image: 'img',
+  link: 'link',
+  none: 'presentation',
+  summary: 'region',
 }
 
 // loop props backwards
@@ -105,37 +168,36 @@ export const pseudoCNInverse = {
 //     const styles = {}
 //     const classNames = {}
 
+const isMediaKey = (key: string) => Boolean(key[0] === '$' && mediaQueryConfig[key.slice(1)])
+
 export const getSplitStyles: StyleSplitter = (
   props,
   staticConfig,
   theme,
   state,
-  defaultClassNames,
+  parentSplitStyles,
   languageContext,
+  elementType,
   debug
 ) => {
   conf = conf || getConfig()
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const mediaKeys: string[] = []
-  const viewProps: StackProps = {}
+  const viewProps: SplitStylesAndProps['viewProps'] = {}
   const pseudos: PseudoStyles = {}
   const medias: Record<MediaQueryKey, ViewStyle> = {}
   const mediaState = state.mediaState || globalMediaState
-  const usedKeys = new Set<string>()
+  const usedKeys: Record<string, number> = {}
   const propKeys = Object.keys(props)
+
   const shouldDoClasses =
     staticConfig.acceptsClassName &&
     (isWeb || process.env.IS_STATIC === 'is_static') &&
-    !state.noClassNames &&
-    !props.animation
+    !state.noClassNames
+
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const style: ViewStyle = {}
-  // TODO make this CSS, not compile-friendly
-  if (state.hasTextAncestor) {
-    // parity with react-native-web
-    style.display = 'inline-flex' as any
-  }
   const classNames: ClassNamesObject = {}
   // we need to gather these specific to each media query / pseudo
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
@@ -154,30 +216,119 @@ export const getSplitStyles: StyleSplitter = (
       keyInit = expandedKey
     }
 
-    if (usedKeys.has(keyInit)) continue
+    if (usedKeys[keyInit]) continue
     if (skipProps[keyInit]) continue
     if (!isWeb && keyInit.startsWith('data-')) continue
 
     if (keyInit === 'style' || keyInit.startsWith('_style')) {
       if (!valInit) continue
-      for (const key in valInit) {
-        if (usedKeys.has(key)) continue
-        if (valInit && typeof valInit === 'object') {
-          // newer react native versions return a full object instead of ID
-          for (const skey in valInit) {
-            if (usedKeys.has(skey)) continue
-            usedKeys.add(skey)
-            style[skey] = valInit[skey]
-          }
-        } else {
-          usedKeys.add(key)
-          style[key] = valInit
+      const styles = Array.isArray(valInit) ? valInit : [valInit]
+      const styleLen = styles.length
+      for (let j = styleLen; j >= 0; j--) {
+        const cur = styles[j]
+        if (!cur) continue
+        for (const key in cur) {
+          if (usedKeys[key]) continue
+          usedKeys[key] = 1
+          style[key] = cur[key]
         }
       }
       continue
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
+      /**
+       * 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
+       */
+      if (keyInit === 'disabled' && valInit === true) {
+        usedKeys[keyInit] = 1
+        viewProps['aria-disabled'] = true
+        // Enhance with native semantics
+        if (
+          elementType === 'button' ||
+          elementType === 'form' ||
+          elementType === 'input' ||
+          elementType === 'select' ||
+          elementType === 'textarea'
+        ) {
+          viewProps.disabled = true
+        }
+        continue
+      }
+
+      if (accessibilityDirectMap[keyInit]) {
+        viewProps[accessibilityDirectMap[keyInit]] = valInit
+        usedKeys[keyInit] = 1
+        continue
+      }
+
+      let didUseKeyInit = true
+      switch (keyInit) {
+        case 'nativeID': {
+          viewProps.id = valInit
+          break
+        }
+        case 'accessibilityRole': {
+          if (valInit === 'none') {
+            viewProps.role = 'presentation'
+          } else {
+            viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
+          }
+          break
+        }
+        case 'accessibilityControls': {
+          viewProps['aria-controls'] = processIDRefList(valInit)
+          break
+        }
+        case 'accessibilityDescribedBy': {
+          viewProps['aria-describedby'] = processIDRefList(valInit)
+          break
+        }
+        case 'accessibilityFlowTo': {
+          viewProps['aria-flowto'] = processIDRefList(valInit)
+          break
+        }
+        case 'accessibilityLabelledBy': {
+          viewProps['aria-labelledby'] = processIDRefList(valInit)
+          break
+        }
+        case 'accessibilityKeyShortcuts': {
+          if (Array.isArray(valInit)) {
+            viewProps['aria-keyshortcuts'] = valInit.join(' ')
+          }
+          break
+        }
+        case 'accessibilityLiveRegion': {
+          viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
+          break
+        }
+        case 'accessibilityReadOnly': {
+          viewProps['aria-readonly'] = valInit
+          // Enhance with native semantics
+          if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
+            viewProps.readOnly = true
+          }
+          break
+        }
+        case 'accessibilityRequired': {
+          viewProps['aria-required'] = valInit
+          // Enhance with native semantics
+          if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
+            viewProps.required = true
+          }
+          break
+        }
+        default: {
+          didUseKeyInit = false
+        }
+      }
+
+      if (didUseKeyInit) {
+        usedKeys[keyInit] = 1
+        continue
+      }
+
       if (keyInit === 'className') {
         let nonTamaguis = ''
         if (!valInit) continue
@@ -199,14 +350,14 @@ export const getSplitStyles: StyleSplitter = (
               const pseudoShortKey = mediaOrPseudo.slice(1)
               fullKey += `${PROP_SPLIT}${pseudoShortKey}`
             }
-            usedKeys.add(fullKey)
+            usedKeys[fullKey] = 1
             mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo)
           } else {
             nonTamaguis += ' ' + cn
           }
         }
         if (nonTamaguis) {
-          usedKeys.add(keyInit)
+          usedKeys[keyInit] = 1
           mergeClassName(transforms, classNames, keyInit, nonTamaguis)
         }
         continue
@@ -221,7 +372,7 @@ export const getSplitStyles: StyleSplitter = (
           keyInit.includes(PROP_SPLIT) &&
           validStyles[keyInit.split(PROP_SPLIT)[0]]
         if (isValidClassName || isMediaOrPseudo) {
-          usedKeys.add(keyInit)
+          usedKeys[keyInit] = 1
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
           continue
         }
@@ -246,9 +397,8 @@ export const getSplitStyles: StyleSplitter = (
      * for if there's a pseudo/media returned from it.
      */
 
-    let isMedia = keyInit[0] === '$'
+    let isMedia = isMediaKey(keyInit)
     let isPseudo = validPseudoKeys[keyInit]
-    let isMediaOrPseudo = isMedia || isPseudo
 
     if (
       !isMedia &&
@@ -257,7 +407,7 @@ export const getSplitStyles: StyleSplitter = (
       !validStyleProps[keyInit] &&
       !conf.shorthands[keyInit]
     ) {
-      usedKeys.add(keyInit)
+      usedKeys[keyInit] = 1
       viewProps[keyInit] = valInit
       continue
     }
@@ -286,35 +436,35 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      // eslint-disable-next-line no-console
-      console.log('expanded', expanded)
-      // eslint-disable-next-line no-console
-      console.log('usedKeys', [...usedKeys])
+      if (isClient) {
+        // eslint-disable-next-line no-console
+        console.log('expanded', expanded)
+        // eslint-disable-next-line no-console
+        console.log('usedKeys', usedKeys)
+      }
       // eslint-disable-next-line no-console
       console.groupEnd()
     }
 
-    if (!expanded) {
-      continue
-    }
+    if (!expanded) continue
 
     for (const [key, val] of expanded) {
       if (val === undefined) continue
 
-      isMedia = key[0] === '$'
+      isMedia = isMediaKey(key)
       isPseudo = validPseudoKeys[key]
-      isMediaOrPseudo = isMedia || isPseudo
+      const isMediaOrPseudo = isMedia || isPseudo
 
-      if (!isMediaOrPseudo) {
-        if (usedKeys.has(key)) continue
+      if (!isMediaOrPseudo && usedKeys[key]) {
+        continue
       }
 
       if (
-        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||
-        (staticConfig.inlineProps && staticConfig.inlineProps.has(key)) ||
-        (staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key))
+        staticConfig.deoptProps?.has(key) ||
+        staticConfig.inlineProps?.has(key) ||
+        staticConfig.inlineWhenUnflattened?.has(key)
       ) {
-        usedKeys.add(key)
+        usedKeys[key] = 1
         viewProps[key] = props[key] ?? val
       }
 
@@ -325,7 +475,7 @@ export const getSplitStyles: StyleSplitter = (
           // once mounted we can ignore enterStyle
           continue
         }
-        pseudos[key] = pseudos[key] || {}
+        pseudos[key] ??= {}
         const pseudoStyleObject = getSubStyle(
           key,
           val,
@@ -343,17 +493,23 @@ export const getSplitStyles: StyleSplitter = (
           ...pseudos[key],
         }
 
-        if (shouldDoClasses && key !== 'enterStyle' && key !== 'exitStyle') {
+        if (key === 'enterStyle' || key === 'exitStyle') {
+          continue
+        }
+
+        if (shouldDoClasses) {
           const pseudoStyles = getAtomicStyle(pseudoStyleObject, pseudoDescriptors[key])
           for (const style of pseudoStyles) {
             const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors
             const fullKey = `${style.property}${PROP_SPLIT}${postfix}`
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey)
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1
               addStyleToInsertRules(rulesToInsert, style)
               mergeClassName(transforms, classNames, fullKey, style.identifier, isMediaOrPseudo)
             }
           }
+        } else {
+          // need same treatment as media (individual merge + importance) + can avoid calling getSubStyle entirely when state = off
         }
         continue
       }
@@ -362,29 +518,11 @@ export const getSplitStyles: StyleSplitter = (
       if (isMedia) {
         const mediaKey = key
         const mediaKeyShort = mediaKey.slice(1)
-
         mediaKeys.push(mediaKeyShort)
 
-        if (!mediaQueryConfig[mediaKeyShort]) {
-          if (process.env.NODE_ENV === 'development' && debug) {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Warning: using a $ prefixed prop that doesn't match to a media query, may be an error`,
-              key
-            )
-          }
-          if (!usedKeys.has(key)) {
-            // this isn't a media key, pass through
-            viewProps[key] = val
-          }
-          continue
-        }
-
-        // dont check if media is active, we just apply *all* media styles
-        // we combine the media props on top regular props, could proxy this
-        // TODO test proxy here instead of merge
         // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR
         // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
+
         const mediaStyle = getSubStyle(
           key,
           val,
@@ -407,29 +545,17 @@ export const getSplitStyles: StyleSplitter = (
           for (const style of mediaStyles) {
             const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)
             const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey)
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1
               addStyleToInsertRules(rulesToInsert, out)
               mergeClassName(transforms, classNames, fullKey, out.identifier, true)
             }
           }
-        } else {
-          if (mediaState[mediaKeyShort]) {
-            if (process.env.NODE_ENV === 'development' && debug) {
-              // eslint-disable-next-line no-console
-              console.log('apply media style', mediaKey, mediaState)
-            }
-            if (shouldDoClasses) {
-              Object.assign(medias, mediaStyle)
-            } else {
-              for (const key in mediaStyle) {
-                // TODO we should likely account for importance here to match CSS, right??
-                usedKeys.add(key)
-                style[key] = mediaStyle[key]
-                if (key === 'fontFamily') {
-                  fontFamily = mediaStyle[key]
-                }
-              }
+        } else if (mediaState[mediaKeyShort]) {
+          for (const key in mediaStyle) {
+            const didMerge = mergeMediaByImportance(style, key, mediaStyle[key], usedKeys)
+            if (didMerge && key === 'fontFamily') {
+              fontFamily = mediaStyle[key]
             }
           }
         }
@@ -437,7 +563,7 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (!isWeb && key === 'pointerEvents') {
-        usedKeys.add(key)
+        usedKeys[key] = 1
         viewProps[key] = val
         continue
       }
@@ -447,7 +573,7 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (validStyleProps[key]) {
-        usedKeys.add(key)
+        usedKeys[key] = 1
         if (val && val[0] === '_') {
           classNames[key] = val
         } else if (key in stylePropsTransform) {
@@ -462,7 +588,7 @@ export const getSplitStyles: StyleSplitter = (
       if (!staticConfig.variants || !(key in staticConfig.variants)) {
         if (!skipProps[key]) {
           viewProps[key] = val
-          usedKeys.add(key)
+          usedKeys[key] = 1
         }
       }
     }
@@ -474,10 +600,23 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   // add in defaults if not set:
-  if (defaultClassNames) {
-    for (const key in defaultClassNames) {
-      if (!(key in classNames)) {
-        classNames[key] = defaultClassNames[key]
+  if (parentSplitStyles) {
+    if (process.env.TAMAGUI_TARGET === 'web') {
+      for (const key in parentSplitStyles.classNames) {
+        if (key in classNames) continue
+        if (key in style) continue
+        const val = parentSplitStyles.classNames[key]
+        if (!shouldDoClasses) {
+          style[key] = reverseMapClassNameToValue(key, val)
+        } else {
+          classNames[key] = val
+        }
+      }
+    }
+    if (!shouldDoClasses) {
+      for (const key in parentSplitStyles.style) {
+        if (key in style) continue
+        style[key] = parentSplitStyles.style[key]
       }
     }
   }
@@ -491,44 +630,7 @@ export const getSplitStyles: StyleSplitter = (
         mergeClassName(transforms, classNames, key, atomicStyle.identifier)
       }
     }
-  }
-
-  // else {
-  // if (classNames && state.resolveVariablesAs === 'value') {
-  // getting real values for colors for animations (reverse mapped from CSS)
-  // this isn't beautiful, but will do relatively fine performance for now
-  // has a bug still - try adding <Switch theme="bouncy" /> should animate bg color on active
-  // const selectors = getAllSelectors()
-  // for (const key in classNames) {
-  //   if (key.endsWith('Color')) {
-  //     const selector = classNames[key]
-  //     let value = selectorValuesCache[selector]
-  //     if (!value) {
-  //       const css = selectors[selector]
-  //       value = css.replace(/.*:/, '').replace(/;.*/, '')
-  //       if (value) {
-  //         const themeUnwrapped = getThemeUnwrapped(theme)
-  //         const map = themeToVariableToValueMap.get(themeUnwrapped)
-  //         if (map && value.startsWith('var(')) {
-  //           value = map[value]
-  //         }
-  //         if (value) {
-  //           selectorValuesCache[selector] = value
-  //         }
-  //       } else {
-  //         // err
-  //         continue
-  //       }
-  //     }
-  //     if (value) {
-  //       style[key] = value
-  //     }
-  //   }
-  // }
-  // }
-  // }
 
-  if (process.env.TAMAGUI_TARGET === 'web') {
     if (transforms) {
       for (const namespace in transforms) {
         if (!transforms[namespace]) {
@@ -736,3 +838,7 @@ function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: Partia
     rulesToInsert.push(styleObject)
   }
 }
+
+function processIDRefList(idRefList: string | Array<string>): string {
+  return Array.isArray(idRefList) ? idRefList.join(' ') : idRefList
+}