@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.222

package/src/helpers/getSplitStyles.tsx

@@ -1,5 +1,11 @@
 import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
+import {
+  stylePropsText,
+  stylePropsTransform,
+  validPseudoKeys,
+  validStyles,
+  validStylesOnBaseProps,
+} from '@tamagui/helpers'
 import type { ViewStyle } from '@tamagui/types-react-native'
 import { useInsertionEffect } from 'react'
 
@@ -35,7 +41,7 @@ import {
   updateInserted,
   updateRules,
 } from './insertStyleRule'
-import { mergeTransform } from './mergeTransform'
+import { FlatTransforms, mergeTransform, mergeTransforms } from './mergeTransform'
 import {
   normalizeValueWithProperty,
   reverseMapClassNameToValue,
@@ -55,7 +61,6 @@ const skipProps = {
   tag: true,
 }
 
-const emptyObject = {}
 const IS_STATIC = process.env.IS_STATIC === 'is_static'
 
 // native only skips
@@ -197,22 +202,69 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
   let style: ViewStyle = {}
-  let flatTransforms: Record<string, any> | undefined
+  let flatTransforms: FlatTransforms | undefined
 
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
+  let className = '' // existing classNames
   // we need to gather these specific to each media query / pseudo
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
   const transforms: Record<TransformNamespaceKey, [string, string]> = {}
   // fontFamily is our special baby, ensure we grab the latest set one always
   let fontFamily: string | undefined
 
+  if (props.className) {
+    for (const cn of props.className.split(' ')) {
+      if (cn[0] === '_') {
+        // tamagui, merge it expanded on key, eventually this will go away with better compiler
+        const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')
+        const isMedia = mediaOrPseudo[0] === '_'
+        const isPseudo = mediaOrPseudo[0] === '0'
+        const isMediaOrPseudo = isMedia || isPseudo
+        let fullKey = conf.shorthands[shorthand]
+        if (isMedia) {
+          // is media
+          let mediaShortKey = mediaOrPseudo.slice(1)
+          mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))
+          fullKey += `${PROP_SPLIT}${mediaShortKey}`
+        } else if (isPseudo) {
+          // is pseudo
+          const pseudoShortKey = mediaOrPseudo.slice(1)
+          fullKey += `${PROP_SPLIT}${pseudoShortKey}`
+        }
+        if (process.env.NODE_ENV === 'development') {
+          if (debug) {
+            // eslint-disable-next-line no-console
+            console.log('tamagui classname', fullKey, cn)
+          }
+        }
+        usedKeys[fullKey] = 1
+        mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo)
+      } else {
+        if (cn) {
+          className += ' ' + cn
+        }
+      }
+    }
+  }
+
   // loop backwards so we can skip already-used props
   for (let i = len - 1; i >= 0; i--) {
     let keyInit = propKeys[i]
+    if (keyInit === 'className') continue // handled above
     const valInit = props[keyInit]
 
+    // normalize shorthands up front
+    const expandedKey = conf.shorthands[keyInit]
+    if (expandedKey) {
+      keyInit = expandedKey
+    }
+
+    if (usedKeys[keyInit]) continue
+    if (skipProps[keyInit]) continue
+    if (!isWeb && keyInit.startsWith('data-')) continue
+
     if (validStyleProps[keyInit] || keyInit.includes('-')) {
       if (valInit && valInit[0] === '_') {
         if (shouldDoClasses) {
@@ -225,16 +277,6 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    // normalize shorthands up front
-    const expandedKey = conf.shorthands[keyInit]
-    if (expandedKey) {
-      keyInit = expandedKey
-    }
-
-    if (usedKeys[keyInit]) continue
-    if (skipProps[keyInit]) continue
-    if (!isWeb && keyInit.startsWith('data-')) continue
-
     if (keyInit === 'style' || keyInit.startsWith('_style')) {
       if (!valInit) continue
       const styles = Array.isArray(valInit) ? valInit : [valInit]
@@ -259,7 +301,12 @@ export const getSplitStyles: StyleSplitter = (
         flatTransforms ||= {}
         flatTransforms[key] = val
       } else {
-        style[key] = normalizeValueWithProperty(val, key)
+        const out = normalizeValueWithProperty(val, key)
+        if (key in validStylesOnBaseProps) {
+          viewProps[key] = out
+        } else {
+          style[key] = out
+        }
       }
     }
 
@@ -386,40 +433,6 @@ export const getSplitStyles: StyleSplitter = (
         continue
       }
 
-      if (keyInit === 'className') {
-        let nonTamaguis = ''
-        if (!valInit) continue
-        for (const cn of valInit.split(' ')) {
-          if (cn[0] === '_') {
-            // tamagui, merge it expanded on key, eventually this will go away with better compiler
-            const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')
-            const isMedia = mediaOrPseudo[0] === '_'
-            const isPseudo = mediaOrPseudo[0] === '0'
-            const isMediaOrPseudo = isMedia || isPseudo
-            let fullKey = conf.shorthands[shorthand]
-            if (isMedia) {
-              // is media
-              let mediaShortKey = mediaOrPseudo.slice(1)
-              mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))
-              fullKey += `${PROP_SPLIT}${mediaShortKey}`
-            } else if (isPseudo) {
-              // is pseudo
-              const pseudoShortKey = mediaOrPseudo.slice(1)
-              fullKey += `${PROP_SPLIT}${pseudoShortKey}`
-            }
-            usedKeys[fullKey] = 1
-            mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo)
-          } else {
-            nonTamaguis += ' ' + cn
-          }
-        }
-        if (nonTamaguis) {
-          usedKeys[keyInit] = 1
-          mergeClassName(transforms, classNames, keyInit, nonTamaguis)
-        }
-        continue
-      }
-
       if (valInit && valInit[0] === '_') {
         // if valid style key (or pseudo like color-hover):
         // this conditional and esp the pseudo check rarely runs so not a perf issue
@@ -431,6 +444,12 @@ export const getSplitStyles: StyleSplitter = (
 
         if (isValidClassName || isMediaOrPseudo) {
           usedKeys[keyInit] = 1
+          if (process.env.NODE_ENV === 'development') {
+            if (debug) {
+              // eslint-disable-next-line no-console
+              console.log('tamagui classname props', keyInit, valInit)
+            }
+          }
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
           continue
         }
@@ -537,22 +556,22 @@ export const getSplitStyles: StyleSplitter = (
           conf,
           languageContext,
           true,
-          state.noClassNames
+          true
         )
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
-        if (!descriptor) {
+        const isEnter = descriptor.name === 'enter'
+        const isExit = descriptor.name === 'exit'
+        if (!descriptor || (isEnter && !state.unmounted) || (isExit && !state.isExiting)) {
           continue
         }
 
-        if (key !== 'enterStyle') {
-          if (!shouldDoClasses || IS_STATIC) {
-            pseudos[key] ||= {}
-            Object.assign(pseudos[key], pseudoStyleObject)
-          }
+        if (!shouldDoClasses || IS_STATIC) {
+          pseudos[key] ||= {}
+          Object.assign(pseudos[key], pseudoStyleObject)
         }
 
-        if (shouldDoClasses) {
+        if (shouldDoClasses && !isEnter && !isExit) {
           const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor)
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
@@ -572,7 +591,6 @@ export const getSplitStyles: StyleSplitter = (
           if (!state[descriptor.stateKey || descriptor.name]) {
             continue
           }
-
           psuedosUsed ||= {}
           usedKeys[key] ||= 1
           const importance = descriptor.priority
@@ -611,8 +629,7 @@ export const getSplitStyles: StyleSplitter = (
           conf,
           languageContext,
           // TODO try true like pseudo
-          false,
-          state.noClassNames
+          false
         )
 
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -678,9 +695,7 @@ export const getSplitStyles: StyleSplitter = (
   // 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) {
-    for (const key in flatTransforms) {
-      mergeTransform(style, key, flatTransforms[key], true)
-    }
+    mergeTransforms(style, flatTransforms, true)
   }
 
   // add in defaults if not set:
@@ -700,17 +715,6 @@ export const getSplitStyles: StyleSplitter = (
         style[key] = parentSplitStyles.style[key]
       }
     }
-    if (process.env.NODE_ENV === 'development') {
-      if (debug === 'verbose') {
-        // eslint-disable-next-line no-console
-        console.log(`  add in parent styled()`, {
-          parentSplitStyles,
-          shouldDoClasses,
-          style: { ...style },
-          classNames: { ...classNames },
-        })
-      }
-    }
   }
 
   if (process.env.TAMAGUI_TARGET === 'web') {
@@ -741,15 +745,13 @@ export const getSplitStyles: StyleSplitter = (
         }
         const [hash, val] = transforms[namespace]
         const identifier = `_transform${hash}`
-        if (isClient) {
-          if (!insertedTransforms[identifier]) {
-            const rule = `.${identifier} { transform: ${val}; }`
-            addStyleToInsertRules(rulesToInsert, {
-              identifier,
-              rules: [rule],
-              property: namespace,
-            })
-          }
+        if (isClient && !insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`
+          addStyleToInsertRules(rulesToInsert, {
+            identifier,
+            rules: [rule],
+            property: namespace,
+          })
         }
         classNames[namespace] = identifier
       }
@@ -761,7 +763,8 @@ export const getSplitStyles: StyleSplitter = (
       // prettier-ignore
       // eslint-disable-next-line no-console
       console.groupCollapsed('  🔹 styles =>')
-      const logs = { style, pseudos, medias, classNames, viewProps, state, rulesToInsert }
+      // prettier-ignore
+      const logs = { style, pseudos, medias, classNames, transforms,viewProps, state, rulesToInsert, parentSplitStyles, flatTransforms }
       for (const key in logs) {
         // eslint-disable-next-line no-console
         console.log(key, logs[key])
@@ -771,6 +774,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  if (className) {
+    classNames.className = className
+  }
+
   return {
     fontFamily,
     viewProps,
@@ -845,16 +852,14 @@ const cache = new WeakMap()
 function getSubStyleProps(defaultProps: Object, baseProps: Object, specificProps: Object) {
   const key = specificProps || baseProps
   // can cache based only on specific it's always referentially consistent with base
-  if (cache.has(key)) {
-    return cache.get(key)
-  }
-  const next = {
-    ...defaultProps,
-    ...baseProps,
-    ...specificProps,
+  if (!cache.has(key)) {
+    cache.set(key, {
+      ...defaultProps,
+      ...baseProps,
+      ...specificProps,
+    })
   }
-  cache.set(key, next)
-  return next
+  return cache.get(key)!
 }
 
 export const getSubStyle = (

package/src/helpers/getThemeCSSRules.ts

@@ -86,8 +86,15 @@ export function getThemeCSSRules({
     }
   }
 
-  const rootSep = config.themeClassNameOnRoot ? '' : ' '
-  const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`
+  const selectorsString = selectors.map((x) => {
+    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
+    // this isBaseTheme logic could probably be done more efficiently above
+    const isBaseTheme =
+      x === '.t_dark' || x === '.t_light' || x.startsWith('.t_dark ') || x.startsWith('.t_light ')
+    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? '' : ' '
+    return `:root${rootSep}${x}`
+  })
+  const css = `${selectorsString.join(', ')} {${vars}}`
   cssRuleSets.push(css)
 
   if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {

package/src/helpers/insertStyleRule.tsx

@@ -5,7 +5,7 @@
 import type { StyleObject } from '@tamagui/helpers'
 
 const allSelectors: Record<string, string> = {}
-const allRules: Record<string, boolean | string[]> = {}
+const allRules: Record<string, string> = {}
 export const insertedTransforms = {}
 
 export const getAllSelectors = () => allSelectors
@@ -122,7 +122,7 @@ const sheet = isClient ? document.head.appendChild(document.createElement('style
 
 export function updateRules(identifier: string, rules: string[]) {
   if (allRules[identifier]) return false
-  allRules[identifier] = rules
+  allRules[identifier] = rules.join(' ')
   if (identifier.startsWith('_transform')) {
     return addTransform(identifier, rules[0])
   }

package/src/helpers/mergeTransform.ts

@@ -1,16 +1,23 @@
 import type { ViewStyle } from '@tamagui/types-react-native'
 
+export type FlatTransforms = Record<string, any>
+
 export const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {
   obj.transform ||= []
   obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)
 }
 
-const mapTransformKeys = {
-  x: 'translateX',
-  y: 'translateY',
+export const mergeTransforms = (
+  obj: ViewStyle,
+  flatTransforms: FlatTransforms,
+  backwards = false
+) => {
+  Object.entries(flatTransforms).forEach(([key, val]) => {
+    mergeTransform(obj, key, val, backwards)
+  })
 }
 
-export const invertMapTransformKeys = {
-  translateX: 'x',
-  translateY: 'y',
+export const mapTransformKeys = {
+  x: 'translateX',
+  y: 'translateY',
 }

package/src/helpers/pseudoDescriptors.ts

@@ -24,6 +24,7 @@ export const pseudoDescriptors: Record<
   },
   exitStyle: {
     name: 'exit',
+    stateKey: 'isExiting',
     priority: 5,
   },
 }

package/src/helpers/themeable.tsx

@@ -1,27 +1,35 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useId } from 'react'
 
 import { ThemeName } from '../types'
 import { Theme } from '../views/Theme'
-import { ThemeInverse } from '../views/ThemeInverse'
 
 export interface ThemeableProps {
   theme?: ThemeName | null
   themeInverse?: boolean
+  componentName?: string
+  debug?: boolean | 'verbose'
+  reset?: boolean
 }
 
 export function themeable<Component extends (props: any) => any>(
   component: Component,
   opts?: { componentName?: string }
 ) {
-  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {
-    const { themeInverse, theme, ...rest } = props
+  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
+    const { themeInverse, theme, componentName, reset, ...rest } = props
     const element = React.createElement(component, { ...rest, ref } as any)
+
     return (
-      <ThemeInverse disable={!themeInverse}>
-        <Theme componentName={opts?.componentName} name={(theme as any) || null}>
-          {element}
-        </Theme>
-      </ThemeInverse>
+      <Theme
+        inverse={themeInverse}
+        componentName={componentName || opts?.componentName}
+        name={(theme as any) || null}
+        data-themeable
+        debug={props.debug}
+        reset={props.reset}
+      >
+        {element}
+      </Theme>
     )
   })
 

package/src/hooks/useElementLayout.tsx

@@ -1,8 +1,10 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { getBoundingClientRect } from '@tamagui/react-native-use-responder-events'
 import { useEvent } from '@tamagui/use-event'
 import { RefObject } from 'react'
 
+import { getBoundingClientRect } from '../helpers/getBoundingClientRect'
+import { getRect } from '../helpers/getRect'
+
 const LayoutHandlers = new WeakMap<Element, Function>()
 
 export type LayoutValue = {
@@ -42,13 +44,6 @@ if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
   })
 }
 
-export const getRect = (node: HTMLElement) => {
-  const rect = getBoundingClientRect(node)
-  if (!rect) return
-  const { x, y, top, left } = rect
-  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }
-}
-
 export const measureLayout = (
   node: HTMLElement,
   relativeTo: HTMLElement | null,

package/src/hooks/useMedia.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useSyncExternalStore } from 'react'
+import { useDeferredValue, useEffect, useMemo, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
 import { createProxy } from '../helpers/createProxy'
@@ -156,8 +156,7 @@ export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
   const keys = useSafeRef<MediaKeysState>({ prev: initState })
-
-  const state = useSyncExternalStore<MediaQueryState>(
+  const stateSync = useSyncExternalStore<MediaQueryState>(
     subscribe,
     () => {
       const { prev, ...curKeys } = keys.current
@@ -171,6 +170,7 @@ export function useMedia(): {
     },
     () => initState
   )
+  const state = useDeferredValue(stateSync)
 
   return useMemo(() => {
     return new Proxy(state, {