@tamagui/web 1.22.6 → 1.22.8

package/src/helpers/createPropMapper.ts

@@ -1,8 +1,8 @@
 import { isAndroid, isWeb } from '@tamagui/constants'
 
-import { getConfig } from '../config.js'
-import { isDevTools } from '../constants/isDevTools.js'
-import { Variable, getVariableValue, isVariable } from '../createVariable.js'
+import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
+import { Variable, getVariableValue, isVariable } from '../createVariable'
 import type {
   DebugProp,
   GenericVariantDefinitions,
@@ -11,13 +11,13 @@ import type {
   StaticConfigParsed,
   TamaguiInternalConfig,
   VariantSpreadFunction,
-} from '../types.js'
-import type { LanguageContextType } from '../views/FontLanguage.types.js'
-import { expandStyle } from './expandStyle.js'
-import { expandStyles } from './expandStyles.js'
-import { getFontsForLanguage, getVariantExtras } from './getVariantExtras.js'
-import { isObj } from './isObj.js'
-import { mergeProps } from './mergeProps.js'
+} from '../types'
+import type { LanguageContextType } from '../views/FontLanguage.types'
+import { expandStyle } from './expandStyle'
+import { expandStyles } from './expandStyles'
+import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
+import { isObj } from './isObj'
+import { mergeProps } from './mergeProps'
 
 export type ResolveVariableTypes =
   | 'auto'
@@ -444,27 +444,36 @@ const getToken = (
   debug?: DebugProp
 ) => {
   const tokensParsed = conf.tokensParsed
-  const fontsParsed = languageContext
-    ? getFontsForLanguage(conf.fontsParsed, languageContext)
-    : conf.fontsParsed
   let valOrVar: any
   let hasSet = false
   if (value in theme) {
+    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+      // rome-ignore lint/nursery/noConsoleLog: <explanation>
+      console.log(`Getting theme value for ${key} from ${value} = ${theme[value].val}`)
+    }
     valOrVar = theme[value]
     hasSet = true
   } else {
     switch (key) {
-      case 'fontFamily':
+      case 'fontFamily': {
+        const fontsParsed = languageContext
+          ? getFontsForLanguage(conf.fontsParsed, languageContext)
+          : conf.fontsParsed
         valOrVar = fontsParsed[value]?.family || value
         hasSet = true
         break
+      }
       case 'fontSize':
       case 'lineHeight':
       case 'letterSpacing':
-      case 'fontWeight':
+      case 'fontWeight': {
+        const fontsParsed = languageContext
+          ? getFontsForLanguage(conf.fontsParsed, languageContext)
+          : conf.fontsParsed
         valOrVar = fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value
         hasSet = true
         break
+      }
     }
     for (const cat in tokenCategories) {
       if (key in tokenCategories[cat]) {
@@ -507,7 +516,7 @@ Set the debug prop to true to see more detailed debug information.`
       if (debug) {
         if (isDevTools) {
           // rome-ignore lint/nursery/noConsoleLog: ok
-          console.log('Looked in:', { theme, tokensParsed, fontsParsed })
+          console.log('Looked in:', { theme, tokensParsed })
         }
       }
       return null

package/src/helpers/expandStyles.ts

@@ -1,10 +1,10 @@
 import { isWeb } from '@tamagui/constants'
 
-import { getConfig } from '../config.js'
-import { expandStyle } from './expandStyle.js'
+import { getConfig } from '../config'
+import { expandStyle } from './expandStyle'
 import { normalizeShadow } from './normalizeShadow'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
-import { pseudoDescriptors } from './pseudoDescriptors.js'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { pseudoDescriptors } from './pseudoDescriptors'
 
 let shorthands: Record<string, string> | null = null
 

package/src/helpers/extendStaticConfig.ts

@@ -5,9 +5,9 @@ import type {
   StaticConfig,
   StaticConfigParsed,
   StylableComponent,
-} from '../types.js'
-import { createPropMapper } from './createPropMapper.js'
-import { mergeProps } from './mergeProps.js'
+} from '../types'
+import { createPropMapper } from './createPropMapper'
+import { mergeProps } from './mergeProps'
 
 export function extendStaticConfig(
   config: Partial<StaticConfig>,

package/src/helpers/getAnimationDriver.tsx

@@ -1,4 +1,4 @@
-import { getConfig } from '../config.js'
+import { getConfig } from '../config'
 
 /**
  * @deprecated use the `useAnimationDriver` hook instead

package/src/helpers/getExpandedShorthands.ts

@@ -1,5 +1,5 @@
-import { getConfig } from '../config.js'
-import { Shorthands } from '../types.js'
+import { getConfig } from '../config'
+import { Shorthands } from '../types'
 
 export function getExpandedShorthands<A extends Object>(
   props: A

package/src/helpers/getSplitStyles.tsx

@@ -16,15 +16,15 @@ import {
 } from '@tamagui/helpers'
 import { useInsertionEffect } from 'react'
 
-import { getConfig, getFont } from '../config.js'
-import { isDevTools } from '../constants/isDevTools.js'
+import { getConfig, getFont } from '../config'
+import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   mediaState as globalMediaState,
   mediaKeysWithAndWithout$,
   mediaQueryConfig,
   mergeMediaByImportance,
-} from '../hooks/useMedia.js'
+} from '../hooks/useMedia'
 import type {
   ClassNamesObject,
   DebugProp,
@@ -41,14 +41,14 @@ import type {
   TextStyleProps,
   ThemeParsed,
   ViewStyleWithPseudos,
-} from '../types.js'
+} from '../types'
 import type {
   FontLanguageProps,
   LanguageContextType,
-} from '../views/FontLanguage.types.js'
-import { createMediaStyle } from './createMediaStyle.js'
-import { getPropMappedFontFamily } from './createPropMapper.js'
-import { fixStyles } from './expandStyles.js'
+} from '../views/FontLanguage.types'
+import { createMediaStyle } from './createMediaStyle'
+import { getPropMappedFontFamily } from './createPropMapper'
+import { fixStyles } from './expandStyles'
 import { generateAtomicStyles, getStylesAtomic, styleToCSS } from './getStylesAtomic'
 import {
   insertStyleRules,
@@ -56,12 +56,12 @@ import {
   scanAllSheets,
   shouldInsertStyleRules,
   updateRules,
-} from './insertStyleRule.js'
+} from './insertStyleRule'
 import {
   normalizeValueWithProperty,
   reverseMapClassNameToValue,
-} from './normalizeValueWithProperty.js'
-import { pseudoDescriptors } from './pseudoDescriptors.js'
+} from './normalizeValueWithProperty'
+import { pseudoDescriptors } from './pseudoDescriptors'
 
 type GetStyleState = {
   style: TextStyleProps
@@ -633,6 +633,7 @@ export const getSplitStyles: StyleSplitter = (
         isVariant,
         shouldPassProp,
         isHOCShouldPassThrough,
+        theme,
       })
       if (!isServer && isDevTools) {
         // rome-ignore lint/nursery/noConsoleLog: ok

package/src/helpers/getStylesAtomic.ts

@@ -5,11 +5,11 @@
 
 import { StyleObject, simpleHash } from '@tamagui/helpers'
 
-import { getConfig } from '../config.js'
-import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types.js'
-import { defaultOffset } from './defaultOffset.js'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
-import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors.js'
+import { getConfig } from '../config'
+import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
+import { defaultOffset } from './defaultOffset'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'
 
 // refactor this file away next...
 

package/src/helpers/getThemeCSSRules.ts

@@ -1,9 +1,9 @@
 import { simpleHash } from '@tamagui/helpers'
 
-import { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'
-import { Variable, variableToString } from '../createVariable.js'
-import type { CreateTamaguiProps, ThemeParsed } from '../types.js'
-import { tokensValueToVariable } from './registerCSSVariable.js'
+import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
+import { Variable, variableToString } from '../createVariable'
+import type { CreateTamaguiProps, ThemeParsed } from '../types'
+import { tokensValueToVariable } from './registerCSSVariable'
 
 export function getThemeCSSRules({
   config,

package/src/helpers/getVariantExtras.tsx

@@ -1,7 +1,7 @@
-import { getConfig } from '../config.js'
-import { GenericFonts } from '../types.js'
-import { LanguageContextType } from '../views/FontLanguage.types.js'
-import { createProxy } from './createProxy.js'
+import { getConfig } from '../config'
+import { GenericFonts } from '../types'
+import { LanguageContextType } from '../views/FontLanguage.types'
+import { createProxy } from './createProxy'
 
 const extrasCache = new WeakMap()
 

package/src/helpers/insertStyleRule.tsx

@@ -1,6 +1,6 @@
 import { isClient } from '@tamagui/constants'
 
-import type { RulesToInsert, StyleObject } from '../types.js'
+import type { RulesToInsert, StyleObject } from '../types'
 
 const allSelectors: Record<string, string> = {}
 const allRules: Record<string, string> = {}

package/src/helpers/isTamaguiComponent.tsx

@@ -1,4 +1,4 @@
-import { StaticConfig, StaticConfigParsed } from '../types.js'
+import { StaticConfig, StaticConfigParsed } from '../types'
 
 export function isTamaguiComponent<A>(
   comp: A,

package/src/helpers/isTamaguiElement.tsx

@@ -1,7 +1,7 @@
 import { isValidElement } from 'react'
 
-import { TamaguiReactElement } from '../types.js'
-import { isTamaguiComponent } from './isTamaguiComponent.js'
+import { TamaguiReactElement } from '../types'
+import { isTamaguiComponent } from './isTamaguiComponent'
 
 export const isTamaguiElement = (
   child: any,

package/src/helpers/matchMedia.native.ts

@@ -1,4 +1,4 @@
-import { MatchMedia, MediaQueryList } from '../types.js'
+import { MatchMedia, MediaQueryList } from '../types'
 
 let matchMediaImpl: MatchMedia = matchMediaFallback
 

package/src/helpers/matchMedia.ts

@@ -1,4 +1,4 @@
-import { MatchMedia, MediaQueryList } from '../types.js'
+import { MatchMedia, MediaQueryList } from '../types'
 
 export const matchMedia =
   (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback

package/src/helpers/memoizeFunctionByArgumentsReference.ts

@@ -0,0 +1,38 @@
+/**
+ * Unused for now but useful function and could replace various caches we use with some testing
+ */
+
+function isObject(arg) {
+  const t = typeof arg
+  return (t === 'object' || t === 'function') && arg !== null
+}
+
+class FunctionArgumentCache {
+  map = new Map()
+  weakmap = new WeakMap()
+
+  get(args: any[]): any {
+    let cache = this
+    for (let value of args) {
+      const map = cache[isObject(value) ? 'weakmap' : 'map']
+      cache = map.get(value) || map.set(value, new FunctionArgumentCache()).get(value)
+    }
+    return cache
+  }
+}
+
+function memoize<Fn extends Function>(fn: Fn): Fn {
+  const cache = new FunctionArgumentCache()
+
+  return function (this: any, ...args: any[]) {
+    // get (or create) a cache item
+    const item = cache.get(args)
+
+    if (item.hasOwnProperty('value')) {
+      console.warn('cached')
+      return item.value
+    }
+
+    return (item.value = fn.apply(this, args))
+  } as any as Fn
+}

package/src/helpers/normalizeShadow.native.ts

@@ -1,8 +1,8 @@
 import { normalizeCSSColor } from '@tamagui/normalize-css-color'
 
-import { defaultOffset } from './defaultOffset.js'
-import { rgba } from './normalizeColor.js'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
+import { defaultOffset } from './defaultOffset'
+import { rgba } from './normalizeColor'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 
 export function normalizeShadow({
   shadowColor,

package/src/helpers/normalizeShadow.ts

@@ -1,5 +1,5 @@
-import { defaultOffset } from './defaultOffset.js'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
+import { defaultOffset } from './defaultOffset'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 
 export function normalizeShadow({
   shadowColor,

package/src/helpers/normalizeValueWithProperty.ts

@@ -5,8 +5,8 @@
 
 import { isWeb } from '@tamagui/constants'
 
-import { getAllSelectors } from './insertStyleRule.js'
-import { names, normalizeColor } from './normalizeColor.js'
+import { getAllSelectors } from './insertStyleRule'
+import { names, normalizeColor } from './normalizeColor'
 import { normalizeStylePropKeys } from './normalizeStylePropKeys'
 
 const colorCache = new Map()

package/src/helpers/proxyThemeVariables.tsx

@@ -1,4 +1,4 @@
-import { createProxy } from './createProxy.js'
+import { createProxy } from './createProxy'
 
 export function proxyThemeVariables<A extends Object>(obj: A): A {
   return createProxy<A>(obj || {}, {

package/src/helpers/registerCSSVariable.ts

@@ -1,4 +1,4 @@
-import { Variable, createCSSVariable } from '../createVariable.js'
+import { Variable, createCSSVariable } from '../createVariable'
 
 export const registerCSSVariable = (v: Variable) => {
   tokensValueToVariable.set(v.val, v)

package/src/helpers/themeable.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 
-import { DebugProp, StaticConfig, ThemeName } from '../types.js'
-import { Theme } from '../views/Theme.js'
+import { DebugProp, StaticConfig, ThemeName } from '../types'
+import { Theme } from '../views/Theme'
 
 export interface ThemeableProps {
   theme?: ThemeName | null
@@ -17,6 +17,7 @@ export function themeable<Component extends (props: any) => any>(
 ) {
   const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
     const { themeInverse, theme, componentName, themeReset, ...rest } = props
+
     const element = React.createElement(component, { ...rest, ref } as any)
 
     return (
@@ -26,7 +27,7 @@ export function themeable<Component extends (props: any) => any>(
         name={(theme as any) || null}
         disable-child-theme
         debug={props.debug}
-        reset={props.themeReset}
+        reset={themeReset}
       >
         {element}
       </Theme>

package/src/helpers/themes.ts

@@ -1,6 +1,6 @@
-import { createVariable, isVariable } from '../createVariable.js'
-import { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped.js'
-import { CreateTamaguiProps } from '../types.js'
+import { createVariable, isVariable } from '../createVariable'
+import { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'
+import { CreateTamaguiProps } from '../types'
 
 // mutates, freeze after
 // shared by createTamagui so extracted here

package/src/helpers/useShallowSetState.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import { DebugProp, TamaguiComponentState } from '../types.js'
+import { DebugProp, TamaguiComponentState } from '../types'
 
 export function useShallowSetState<State extends TamaguiComponentState>(
   setter: React.Dispatch<React.SetStateAction<State>>,

package/src/hooks/useAnimationDriver.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
-import { AnimationDriverContext } from '../contexts/AnimationDriverContext.js'
-import { getAnimationDriver } from '../helpers/getAnimationDriver.js'
+import { AnimationDriverContext } from '../contexts/AnimationDriverContext'
+import { getAnimationDriver } from '../helpers/getAnimationDriver'
 import { isRSC } from '@tamagui/constants'
 
 export const useAnimationDriver = () => {

package/src/hooks/useMedia.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useSyncExternalStore } from 'react'
 
-import { getConfig } from '../config.js'
-import { createProxy } from '../helpers/createProxy.js'
+import { getConfig } from '../config'
+import { createProxy } from '../helpers/createProxy'
 import { matchMedia } from '../helpers/matchMedia'
 import type {
   MediaQueries,
@@ -9,8 +9,8 @@ import type {
   MediaQueryObject,
   MediaQueryState,
   TamaguiInternalConfig,
-} from '../types.js'
-import { useSafeRef } from './useSafeRef.js'
+} from '../types'
+import { useSafeRef } from './useSafeRef'
 
 export let mediaState: MediaQueryState =
   // development only safeguard

package/src/hooks/useProps.tsx

@@ -1,4 +1,4 @@
-import { useMediaPropsActive } from './useMedia.js'
+import { useMediaPropsActive } from './useMedia'
 
 /**
  * Will flatten any media styles down + expand all shorthands.

package/src/hooks/useStyle.tsx

@@ -1,9 +1,9 @@
 import { isRSC, isWeb } from '@tamagui/constants'
 import { useContext } from 'react'
 
-import { FontLanguageContext } from '../contexts/FontLanguageContext.js'
-import { TextAncestorContext } from '../contexts/TextAncestorContext.js'
-import { useSplitStyles } from '../helpers/getSplitStyles.js'
+import { FontLanguageContext } from '../contexts/FontLanguageContext'
+import { TextAncestorContext } from '../contexts/TextAncestorContext'
+import { useSplitStyles } from '../helpers/getSplitStyles'
 import {
   DebugProp,
   GetProps,
@@ -11,8 +11,8 @@ import {
   TamaguiComponent,
   TextNonStyleProps,
 } from '../types'
-import { useMedia } from './useMedia.js'
-import { useTheme } from './useTheme.js'
+import { useMedia } from './useMedia'
+import { useTheme } from './useTheme'
 
 export function useStyle<
   Component extends TamaguiComponent,

package/src/hooks/useTheme.tsx

@@ -2,18 +2,18 @@
 import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
 import { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 
-import { getConfig } from '../config.js'
-import { isDevTools } from '../constants/isDevTools.js'
-import { createProxy } from '../helpers/createProxy.js'
+import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
+import { createProxy } from '../helpers/createProxy'
 import {
   ThemeManager,
   ThemeManagerState,
   getNonComponentParentManager,
-} from '../helpers/ThemeManager.js'
-import { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'
-import type { ThemeParsed, ThemeProps } from '../types.js'
-import { GetThemeUnwrapped } from './getThemeUnwrapped.js'
-import { useServerRef } from './useServerHooks.js'
+} from '../helpers/ThemeManager'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import type { ThemeParsed, ThemeProps } from '../types'
+import { GetThemeUnwrapped } from './getThemeUnwrapped'
+import { useServerRef } from './useServerHooks'
 
 export type ChangedThemeResponse = {
   isNewTheme: boolean

package/src/hooks/useThemeName.tsx

@@ -1,9 +1,9 @@
 import { isRSC, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useContext, useState } from 'react'
 
-import { getConfig } from '../config.js'
-import { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'
-import { ThemeName } from '../types.js'
+import { getConfig } from '../config'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { ThemeName } from '../types'
 
 export function useThemeName(opts?: { parent?: true }): ThemeName {
   if (isRSC) {