@tamagui/core 1.0.1-beta.167 → 1.0.1-beta.169

package/src/helpers/getSplitStyles.tsx

@@ -1,11 +1,11 @@
 import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
-import { useInsertionEffect, useMemo } from 'react'
+import { useInsertionEffect } from 'react'
 import type { ViewStyle } from 'react-native'
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
+import { mediaState as globalMediaState, mediaQueryConfig } from '../hooks/useMedia'
 import type {
   DebugProp,
   MediaQueryKey,
@@ -15,7 +15,7 @@ import type {
   StackProps,
   StaticConfigParsed,
   TamaguiInternalConfig,
-  ThemeObject,
+  ThemeParsed,
 } from '../types'
 import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
@@ -30,6 +30,7 @@ import {
   updateInserted,
   updateRules,
 } from './insertStyleRule'
+import { mergeProps } from './mergeProps'
 import { mergeTransform } from './mergeTransform'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
 import { pseudoDescriptors } from './pseudoDescriptors'
@@ -66,7 +67,7 @@ let conf: TamaguiInternalConfig
 type StyleSplitter = (
   props: { [key: string]: any },
   staticConfig: StaticConfigParsed,
-  theme: ThemeObject,
+  theme: ThemeParsed,
   state: SplitStyleState,
   defaultClassNames?: any,
   languageContext?: LanguageContextType,
@@ -114,10 +115,14 @@ export const getSplitStyles: StyleSplitter = (
   const viewProps: StackProps = {}
   const pseudos: PseudoStyles = {}
   const medias: Record<MediaQueryKey, ViewStyle> = {}
+  const mediaState = state.mediaState || globalMediaState
   const usedKeys = new Set<string>()
   const propKeys = Object.keys(props)
   const shouldDoClasses =
-    (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames && !props.animation
+    staticConfig.acceptsClassName &&
+    (isWeb || process.env.IS_STATIC === 'is_static') &&
+    !state.noClassNames &&
+    !props.animation
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const style: ViewStyle = {}
@@ -126,7 +131,7 @@ export const getSplitStyles: StyleSplitter = (
     // parity with react-native-web
     style.display = 'inline-flex' as any
   }
-  let classNames: ClassNamesObject = {}
+  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)"]
   const transforms: Record<TransformNamespaceKey, [string, string]> = {}
@@ -346,10 +351,18 @@ export const getSplitStyles: StyleSplitter = (
       // media
       if (isMedia) {
         const mediaKey = key
-        mediaKeys.push(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
@@ -376,7 +389,7 @@ export const getSplitStyles: StyleSplitter = (
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log('  🔹 mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })
+          console.log(`  📺 ${mediaKey}`, mediaState[mediaKeyShort], { mediaKey, mediaStyle, props, shouldDoClasses, mediaState: { ...mediaState } })
         }
 
         if (shouldDoClasses) {
@@ -391,7 +404,7 @@ export const getSplitStyles: StyleSplitter = (
             }
           }
         } else {
-          if (mediaState[mediaKey]) {
+          if (mediaState[mediaKeyShort]) {
             if (process.env.NODE_ENV === 'development' && debug) {
               // eslint-disable-next-line no-console
               console.log('apply media style', mediaKey, mediaState)
@@ -447,9 +460,10 @@ export const getSplitStyles: StyleSplitter = (
 
   // add in defaults if not set:
   if (defaultClassNames) {
-    classNames = {
-      ...defaultClassNames,
-      ...classNames,
+    for (const key in defaultClassNames) {
+      if (!(key in classNames)) {
+        classNames[key] = defaultClassNames[key]
+      }
     }
   }
 
@@ -646,7 +660,7 @@ export const getSubStyle = (
   subKey: string,
   styleIn: Object,
   staticConfig: StaticConfigParsed,
-  theme: ThemeObject,
+  theme: ThemeParsed,
   props: any,
   state: SplitStyleState,
   conf: TamaguiInternalConfig,

package/src/helpers/getThemeCSSRules.ts

@@ -1,6 +1,6 @@
 import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
 import { Variable, variableToString } from '../createVariable'
-import { CreateTamaguiProps, ThemeObject } from '../types'
+import { CreateTamaguiProps, ThemeParsed } from '../types'
 import { tokensValueToVariable } from './registerCSSVariable'
 
 export function getThemeCSSRules({
@@ -11,7 +11,7 @@ export function getThemeCSSRules({
 }: {
   config: CreateTamaguiProps
   themeName: string
-  theme: ThemeObject
+  theme: ThemeParsed
   names: string[]
 }) {
   const cssRuleSets: string[] = []

package/src/hooks/useIsSSR.tsx

@@ -1,20 +1,25 @@
 import { useState } from 'react'
 
-import { isSSR, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { startTransition } from '../helpers/startTransition'
 
 // because any change before first useEffect causes hydration / mismatch issues
 
-export const useIsSSR = () => {
+export const useIsSSR = (props?: { immediate?: boolean }) => {
   const [val, setVal] = useState(true)
 
-  useIsomorphicLayoutEffect(() => {
-    if (isWeb && !isSSR) {
-      startTransition(() => {
+  if (isWeb && !isServer) {
+    useIsomorphicLayoutEffect(() => {
+      // could also have a global tamagui `config.immediateSSRTransition`
+      if (props?.immediate) {
         setVal(false)
-      })
-    }
-  }, [])
+      } else {
+        startTransition(() => {
+          setVal(false)
+        })
+      }
+    }, [])
+  }
 
   return val
 }

package/src/hooks/useIsTouchDevice.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react'
 
-import { isSSR, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 
 // ssr friendly
 
 export const useIsTouchDevice = () => {
   const [touchOnly, setTouchOnly] = useState(false)
 
-  if (isWeb && !isSSR) {
+  if (isWeb && !isServer) {
     // only ever false on web SSR (env), so run effect conditionally
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useIsomorphicLayoutEffect(() => {

package/src/hooks/useMedia.tsx

@@ -1,26 +1,47 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { matchMedia } from '../helpers/matchMedia'
 import {
-  ConfigureMediaQueryOptions,
   MediaQueries,
   MediaQueryKey,
   MediaQueryObject,
   MediaQueryState,
+  TamaguiInternalConfig,
 } from '../types'
 import { useSafeRef } from './useSafeRef'
 
-export const mediaState: MediaQueryState = {} as any
-const mediaQueryListeners: { [key: string]: Set<Function> } = {}
+export const mediaState: MediaQueryState =
+  // development time safeguard
+  process.env.NODE_ENV === 'development'
+    ? new Proxy(
+        {},
+        {
+          get(target, key) {
+            if (typeof key === 'string' && key[0] === '$') {
+              throw new Error(`Access of mediaState should never include $`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
+type MediaListener = (next: boolean) => void
+
+const mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}
 
-export function addMediaQueryListener(key: MediaQueryKey, cb: any) {
+export function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
+  if (process.env.NODE_ENV === 'development' && key[0] === '$') {
+    // eslint-disable-next-line no-console
+    console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`)
+  }
   mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
   mediaQueryListeners[key].add(cb)
   return () => removeMediaQueryListener(key, cb)
 }
 
-export function removeMediaQueryListener(key: MediaQueryKey, cb: any) {
+export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
   mediaQueryListeners[key]?.delete(cb)
 }
 
@@ -35,37 +56,40 @@ const dispose = new Set<Function>()
 // for SSR capture it at time of startup
 let initialMediaState: MediaQueryState | null
 
-export const configureMedia = ({
-  queries,
-  defaultActive = {},
-}: ConfigureMediaQueryOptions = {}) => {
-  if (!queries) return
-
-  // support hot reload
-  if (initialMediaState) {
-    if (process.env.NODE_ENV === 'development') {
-      if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
-        // hmr avoid update
-        return
-      }
-    }
-    setupMediaListeners()
-  }
-
-  Object.assign(mediaQueryConfig, queries)
-  // start in the initial state
-  for (const key in queries) {
-    mediaState[key] = defaultActive[key] || false
+export const configureMedia = (config: TamaguiInternalConfig) => {
+  const { media, mediaQueryDefaultActive } = config
+  if (!media) return
+  for (const key in media) {
+    mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
+  Object.assign(mediaQueryConfig, media)
   initialMediaState = { ...mediaState }
+  if (config.disableSSR) {
+    setupMediaListeners()
+  }
 }
 
+export const getInitialMediaState = () => initialMediaState
+
 function unlisten() {
   dispose.forEach((cb) => cb())
   dispose.clear()
 }
 
+/**
+ * Note: This should *not* set the state on the first render!
+ * Because to avoid hydration issues SSR must match the server
+ * *and then* re-render with the actual media query state.
+ */
+let configuredKey = ''
 function setupMediaListeners() {
+  // avoid setting up more than once per config
+  const nextKey = JSON.stringify(mediaQueryConfig)
+  if (nextKey === configuredKey) {
+    return
+  }
+  configuredKey = nextKey
+
   // hmr, undo existing before re-binding
   unlisten()
 
@@ -79,6 +103,7 @@ function setupMediaListeners() {
     // react native needs these deprecated apis for now
     match.addListener(update)
     dispose.add(() => match.removeListener(update))
+
     update()
 
     function update() {
@@ -87,16 +112,18 @@ function setupMediaListeners() {
       mediaState[key] = next
       const listeners = mediaQueryListeners[key]
       if (listeners?.size) {
-        for (const cb of [...listeners]) {
-          cb()
-        }
+        listeners.forEach((cb) => cb(next))
       }
     }
   }
 }
 
-export function useMediaQueryListeners() {
-  useIsomorphicLayoutEffect(() => {
+export function useMediaQueryListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) {
+    return
+  }
+
+  useEffect(() => {
     setupMediaListeners()
     return unlisten
   }, [])
@@ -105,7 +132,7 @@ export function useMediaQueryListeners() {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState(initialMediaState!)
+  const [state, setState] = useState(initialMediaState || {})
   const keys = useSafeRef({} as Record<string, boolean>)
 
   function updateState() {
@@ -120,13 +147,12 @@ export function useMedia(): {
   }
 
   useIsomorphicLayoutEffect(() => {
-    const listeners: Function[] = []
-    for (const key in keys.current) {
-      listeners.push(addMediaQueryListener(key, updateState))
-    }
+    const disposes: Function[] = Object.keys(keys.current).map((key) =>
+      addMediaQueryListener(key, updateState)
+    )
     updateState()
     return () => {
-      listeners.forEach((cb) => cb())
+      disposes.forEach((cb) => cb())
     }
   })
 
@@ -134,8 +160,15 @@ export function useMedia(): {
     () =>
       new Proxy(state, {
         get(_, key: string) {
+          if (process.env.NODE_ENV === 'development') {
+            if (!initialMediaState) {
+              throw new Error(
+                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
+              )
+            }
+          }
           if (!keys.current[key]) {
-            keys.current = { ...keys.current, [key]: true }
+            keys.current[key] = true
           }
           return Reflect.get(state, key)
         },

package/src/hooks/useTheme.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'r
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
 import {
@@ -12,7 +12,7 @@ import {
   ThemeManagerContext,
   emptyManager,
 } from '../helpers/ThemeManager'
-import { ThemeName, ThemeObject } from '../types'
+import { ThemeName, ThemeParsed } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 import { useConstant } from './useConstant'
 import { useServerRef } from './useServerHooks'
@@ -38,7 +38,7 @@ export const useTheme = (
   componentName?: string,
   props?: ThemeProps,
   forceUpdate?: any
-): ThemeObject => {
+): ThemeParsed => {
   // TODO this can use useChangeThemeEffect almost ready
   if (isRSC) {
     const config = getConfig()
@@ -195,10 +195,10 @@ export const useChangeThemeEffect = (
   forceUpdateProp?: any,
   uuid?: Object
 ): {
-  themes: Record<string, ThemeObject>
+  themes: Record<string, ThemeParsed>
   themeManager: ThemeManager | null
   name: string
-  theme: ThemeObject | null
+  theme: ThemeParsed | null
   className?: string
 } => {
   const { themes } = getConfig()
@@ -236,10 +236,9 @@ export const useChangeThemeEffect = (
     return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
   })
 
-  if (!isSSR) {
+  if (!isServer) {
     useLayoutEffect(() => {
       themeManager.update(next)
-
       activeThemeManagers.add(themeManager)
 
       const disposeParentOnChange = parentManager.onChangeTheme(() => {

package/src/styled.tsx

@@ -48,6 +48,7 @@ export function styled<
     variants?: Variants | undefined
     // thought i had this typed, but can't get it linked
     defaultVariants?: { [key: string]: any }
+    acceptsClassName?: boolean
   },
   staticExtractionOptions?: Partial<StaticConfig>
 ) {
@@ -73,7 +74,13 @@ export function styled<
     }
 
     if (options) {
-      const { variants, name, defaultVariants, ...defaultProps } = options
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants)
       }
@@ -84,12 +91,7 @@ export function styled<
           RNComponents.add(Component)
           isReactNativeWeb = true
         } else {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`
-            )
-          }
+          // assuming some sort of non-tamagui non-rn view, will always use style={}
         }
       }
       const reactNativeWebComponent = isReactNativeWeb
@@ -107,6 +109,8 @@ export function styled<
         isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text
       )
 
+      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb)
+
       const conf: Partial<StaticConfig> = {
         ...staticExtractionOptions,
         ...(!isTamagui && {
@@ -125,10 +129,12 @@ export function styled<
         isInput,
         isText,
         isImage,
+        acceptsClassName,
       }
 
       // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)
-      if (defaultProps.children) {
+      // bail on non className views as well
+      if (defaultProps.children || !acceptsClassName) {
         conf.neverFlatten = true
       }
 

package/src/types.tsx

@@ -162,7 +162,12 @@ export type CreateTamaguiConfig<
   fonts: RemoveLanguagePostfixes<F>
   fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]
   tokens: A
-  themes: B
+  // parsed
+  themes: {
+    [Name in keyof B]: {
+      [Key in keyof B[Name]]: Variable
+    }
+  }
   shorthands: C
   media: D
   animations: AnimationDriver<E>
@@ -230,13 +235,16 @@ export type GenericTamaguiConfig = CreateTamaguiConfig<
 >
 
 // since TamaguiConfig will be re-declared, these will all be typed globally
-export type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type ThemeDefinition = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type ThemeKeys = keyof ThemeDefinition
+export type ThemeParsed = {
+  [key in ThemeKeys]: Variable
+}
 export type Tokens = TamaguiConfig['tokens']
 export type Shorthands = TamaguiConfig['shorthands']
 export type Media = TamaguiConfig['media']
 export type Themes = TamaguiConfig['themes']
 export type ThemeName = GetAltThemeNames<keyof Themes>
-export type ThemeKeys = keyof ThemeObject
 export type ThemeTokens = `$${ThemeKeys}`
 export type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>
 export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>
@@ -264,6 +272,26 @@ export type CreateTamaguiProps = {
   }
 
   defaultTheme?: string
+
+  /**
+   * *Advanced use case* For all CSS extracted views, this has no effect.
+   *
+   * For SSR compatibility on the web, Tamagui will render once with the settings
+   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render
+   * again after the initial render using the proper media query values. This is so that
+   * hydration will match perfectly with the server.
+   *
+   * Setting disableSSR will avoid this second render by setting the media query state
+   * to the actual browser dimensions on initial load. This is only useful for client-only
+   * apps.
+   *
+   */
+  disableSSR?: boolean
+
+  /**
+   * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.
+   * For custom use cases like integration with next-theme.
+   */
   disableRootThemeClass?: boolean
 
   defaultProps?: Record<string, any> & {
@@ -314,9 +342,6 @@ export type TamaguiInternalConfig<
     getCSS: () => string
     parsed: boolean
     inverseShorthands: Record<string, string>
-
-    // just passed in from CreateTamaguiProps
-    themeClassNameOnRoot?: boolean
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']
@@ -352,10 +377,6 @@ export type MediaProps<A> = {
 export type MediaQueries = {
   [key in MediaQueryKey]: MediaQueryObject
 }
-export type ConfigureMediaQueryOptions = {
-  queries?: MediaQueries
-  defaultActive?: Record<MediaQueryKey, boolean>
-}
 
 export type TransformStyleProps = {
   x?: number
@@ -423,7 +444,7 @@ export type SizeTokens = GetTokenString<keyof Tokens['size']> | number
 export type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean
 export type ColorTokens =
   | GetTokenString<keyof Tokens['color']>
-  | GetTokenString<keyof ThemeObject>
+  | GetTokenString<keyof ThemeParsed>
   | CSSColorNames
 export type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number
 export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
@@ -640,7 +661,7 @@ export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>>
 export type PropMapper = (
   key: string,
   value: any,
-  theme: ThemeObject,
+  theme: ThemeParsed,
   props: Record<string, any>,
   state: Partial<SplitStyleState>,
   languageContext?: FontLanguageProps,
@@ -773,6 +794,13 @@ export type StaticConfig = {
    * Used insternally to attach default props to names
    */
   parentNames?: string[]
+
+  /**
+   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,
+   * it will assume the passed in component only accepts style={} for react-native compatibility.
+   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.
+   */
+  acceptsClassName?: boolean
 }
 
 /**
@@ -1183,6 +1211,7 @@ export type TamaguiComponentState = {
   pressIn: boolean
   focus: boolean
   mounted: boolean
+  mediaState?: null | Record<string, boolean>
   animation?: null | {
     style?: any
     avoidClasses?: boolean

package/src/updateTheme.ts

@@ -1,8 +1,8 @@
 import { addTheme } from './addTheme'
 import { activeThemeManagers } from './hooks/useTheme'
-import { ThemeObject } from './types'
+import { ThemeDefinition } from './types'
 
-export function updateTheme({ name, theme }: { name: string; theme: ThemeObject }) {
+export function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {
   const next = addTheme({ name, theme, insertCSS: true, update: true })
 
   if (process.env.TAMAGUI_TARGET === 'native') {

package/src/views/TamaguiProvider.tsx

@@ -1,7 +1,6 @@
-import { useForceUpdate } from '@tamagui/use-force-update'
 import * as React from 'react'
 
-import { isClient, isRSC, isSSR } from '../constants/platform'
+import { isClient, isRSC, isServer } from '../constants/platform'
 import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
 import { TextAncestorProvider } from '../contexts/TextAncestorContext'
 import { useMediaQueryListeners } from '../hooks/useMedia'
@@ -22,8 +21,8 @@ export function TamaguiProvider({
     )
   }
 
-  if (!isSSR) {
-    useMediaQueryListeners()
+  if (!isServer) {
+    useMediaQueryListeners(config)
   }
 
   if (isClient) {

package/types/addTheme.d.ts

@@ -1,7 +1,7 @@
-import { ThemeObject } from './types';
+import { ThemeDefinition } from './types';
 export declare function addTheme({ name: themeName, theme: themeIn, insertCSS, update, }: {
     name: string;
-    theme: ThemeObject;
+    theme: ThemeDefinition;
     insertCSS?: boolean;
     update?: boolean;
 }): {