@tamagui/web 3.0.18 → 3.1.0

package/src/config.ts

@@ -12,13 +12,15 @@ import type {
 import { formatDiagnostic } from './helpers/formatDiagnostic'
 import { prepareConfigRevision } from './helpers/grammarConfig'
 
+const isProd = process.env.NODE_ENV === 'production'
+
 export type StyleCompat = 'legacy' | 'react-native' | 'web'
 
 let conf: TamaguiInternalConfig | null
 let setConfigCalledByThisInstance = false
 
 const haventCalledErrorMessage =
-  process.env.NODE_ENV === 'development'
+  !isProd && process.env.NODE_ENV === 'development'
     ? `
 Haven't called createTamagui yet. ${MISSING_THEME_MESSAGE}
 `
@@ -36,6 +38,7 @@ const getConfigFromGlobalOrLocal = (): TamaguiInternalConfig | null => {
     // defer warning - if createTamagui runs in THIS instance, it's HMR (safe)
     // if it never runs, it's a true duplicate (warn)
     if (
+      !isProd &&
       process.env.NODE_ENV === 'development' &&
       globalThis.__tamaguiEvaluationConfig !== globalThis.__tamaguiConfig &&
       !globalThis.__tamaguiHasWarnedGlobalFallback &&
@@ -69,7 +72,7 @@ export const getSetting = <Key extends keyof GenericTamaguiSettings>(
   key: Key
 ): GenericTamaguiSettings[Key] => {
   const config = getConfigFromGlobalOrLocal()
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     if (!config) throw new Error(haventCalledErrorMessage)
   }
   return config!.settings[key]
@@ -95,7 +98,7 @@ export const setConfig = (next: TamaguiInternalConfig) => {
 
 export const setConfigFont = (name: string, font: any, fontParsed: any) => {
   const config = getConfigFromGlobalOrLocal()
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     if (!config) throw new Error(haventCalledErrorMessage)
   }
   config!.fonts[name] = font
@@ -136,7 +139,7 @@ const getTokensParsed = (): TokensParsed =>
   getConfigFromGlobalOrLocal()?.tokensParsed ?? tokens
 
 export const getTokens = (): TokensParsed => {
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     if (!getConfigFromGlobalOrLocal()) throw new Error(haventCalledErrorMessage)
   }
   return getTokensParsed()
@@ -199,7 +202,7 @@ type DevConfig = {
 export let devConfig: DevConfig | undefined
 
 export function setupDev(conf: DevConfig) {
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     devConfig = conf
   }
 }
@@ -220,7 +223,7 @@ export function setupDev(conf: DevConfig) {
 export function loadAnimationDriver(name: string, driver: AnimationDriver) {
   const config = getConfigFromGlobalOrLocal()
   if (!config) {
-    if (process.env.NODE_ENV === 'development') {
+    if (!isProd && process.env.NODE_ENV === 'development') {
       console.warn('loadAnimationDriver called before createTamagui')
     }
     return

package/src/constants/constants.ts

@@ -1,11 +1,13 @@
 import type { StackStyle } from '../types'
 
+const isProd = process.env.NODE_ENV === 'production'
+
 export const THEME_NAME_SEPARATOR = '_'
 export const THEME_CLASSNAME_PREFIX = 't_'
 export const FONT_DATA_ATTRIBUTE_NAME = 'data-tamagui-font'
 
 export const MISSING_THEME_MESSAGE =
-  process.env.NODE_ENV === 'development'
+  !isProd && process.env.NODE_ENV === 'development'
     ? `Can't find Tamagui configuration.
     
 Most of the time this is due to having mis-matched versions of Tamagui dependencies, or bundlers somehow duplicating them.

package/src/constants/isDevTools.ts

@@ -1,7 +1,8 @@
+const isProd = process.env.NODE_ENV === 'production'
 // for verbose logging outside node/cli
 
 export const isDevTools = (() => {
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     try {
       return new Function('try {return this===window;}catch(e){ return false;}')()
     } catch {

package/src/createComponent.tsx

@@ -75,6 +75,9 @@ import { Slot } from './views/Slot'
 import { getThemedChildren } from './views/Theme'
 import type { ViewProps } from './views/View'
 
+// cache production mode for node; retain inline checks for client dead-code removal.
+const isProd = process.env.NODE_ENV === 'production'
+
 /**
  * All things that need one-time setup after createTamagui is called
  */
@@ -146,7 +149,7 @@ if (process.env.TAMAGUI_TARGET !== 'native' && typeof window !== 'undefined') {
   addEventListener('touchcancel', cancelTouches)
 
   // hold option to see debug visualization
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     startVisualizer = () => {
       const devVisualizerConfig = devConfig?.visualizer
 
@@ -266,7 +269,7 @@ export function createComponent<
   // a const, a config read) makes it unfoldable.
   if (process.env.TAMAGUI_RUNTIME === 'zero') {
     throw new Error(
-      process.env.NODE_ENV !== 'production'
+      !isProd && process.env.NODE_ENV !== 'production'
         ? `[tamagui zero-runtime] createComponent ran in a zero-runtime graph. No Tamagui component renderer ships in this mode, so a component reference survived compilation. Fix the site or move the owning module to a declared full-runtime island.`
         : '❌ Error 010'
     )
@@ -332,9 +335,10 @@ export function createComponent<
     const styleStaticConfig = resolvedStyleStaticConfig!
     const styledContextKeys = styleStaticConfig.styledContextKeys
 
-    const internalID = process.env.NODE_ENV === 'development' ? React.useId() : ''
+    const internalID =
+      !isProd && process.env.NODE_ENV === 'development' ? React.useId() : ''
 
-    if (process.env.NODE_ENV === 'development') {
+    if (!isProd && process.env.NODE_ENV === 'development') {
       if (startVisualizer) {
         startVisualizer()
         startVisualizer = undefined
@@ -354,7 +358,7 @@ export function createComponent<
     }
 
     // test only
-    if (process.env.NODE_ENV === 'test') {
+    if (!isProd && process.env.NODE_ENV === 'test') {
       const testRenderCount = propsIn['data-test-renders']
       if (
         testRenderCount &&
@@ -393,10 +397,16 @@ export function createComponent<
         : false
 
     // pick up globalThis.time if set externally (e.g. by a profiling harness)
-    if (process.env.NODE_ENV === 'development' && !time && (globalThis as any).time) {
+    if (
+      !isProd &&
+      process.env.NODE_ENV === 'development' &&
+      !time &&
+      (globalThis as any).time
+    ) {
       time = (globalThis as any).time
     }
-    if (process.env.NODE_ENV === 'development' && time) time`non-tamagui time (ignore)`
+    if (!isProd && process.env.NODE_ENV === 'development' && time)
+      time`non-tamagui time (ignore)`
 
     // React inserts default props after your props for some reason...
     // order important so we do loops, you can't just spread because JS does weird things
@@ -413,7 +423,7 @@ export function createComponent<
     props = nextProps as ViewProps | TextProps
     overriddenContextProps = overrides
 
-    if (process.env.NODE_ENV === 'development' && isClient) {
+    if (!isProd && process.env.NODE_ENV === 'development' && isClient) {
       React.useEffect(() => {
         let node: HTMLElement | undefined
         let overlay: HTMLSpanElement | null = null
@@ -606,7 +616,7 @@ export function createComponent<
     // but still stores the current state and applies if it it needs to during render
     let setStateShallow = componentState.setStateShallow
 
-    if (process.env.NODE_ENV === 'development' && time) time`use-state`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`use-state`
 
     // web-only - string-style not valid for native
     const renderProp = props.render
@@ -654,7 +664,7 @@ export function createComponent<
       process.env.TAMAGUI_TARGET === 'native' && isHOC && 'theme' in props
     const disableTheme = disableThemeProp || (isHOC && !hocThemesSelf)
 
-    if (process.env.NODE_ENV === 'development' && time) time`theme-props`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`theme-props`
 
     const themeStateProps: UseThemeWithStateProps = {
       disable: disableTheme,
@@ -684,7 +694,7 @@ export function createComponent<
         stateRef.current.nativeStyleUpdate?.(next) ?? false
     }
 
-    if (process.env.NODE_ENV === 'development') {
+    if (!isProd && process.env.NODE_ENV === 'development') {
       if (debugProp && debugProp !== 'profile') {
         const name = `${
           displayName ||
@@ -744,11 +754,11 @@ export function createComponent<
       }
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`pre-theme-media`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`pre-theme-media`
 
     const [theme, themeState] = useThemeWithState(themeStateProps)
 
-    if (process.env.NODE_ENV === 'development' && time) time`theme`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`theme`
 
     // don't replace the animated driver component (set above) with the base element,
     // the render string is forwarded to it via viewProps.render instead
@@ -763,7 +773,7 @@ export function createComponent<
 
     setDidGetVariableValue(false)
 
-    if (process.env.NODE_ENV === 'development' && time) time`media`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`media`
 
     const resolveValues =
       // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
@@ -787,7 +797,8 @@ export function createComponent<
 
     const themeName = themeState?.name || ''
 
-    if (process.env.NODE_ENV === 'development' && time) time`split-styles-prepare`
+    if (!isProd && process.env.NODE_ENV === 'development' && time)
+      time`split-styles-prepare`
 
     const splitStyles = useSplitStyles(
       props,
@@ -1240,6 +1251,7 @@ export function createComponent<
 
         if (canAvoidReRender) {
           if (
+            !isProd &&
             process.env.NODE_ENV === 'development' &&
             debugProp &&
             debugProp !== 'profile'
@@ -1256,6 +1268,7 @@ export function createComponent<
           stateRef.current.updateStyleListener?.()
         } else {
           if (
+            !isProd &&
             process.env.NODE_ENV === 'development' &&
             debugProp &&
             debugProp !== 'profile'
@@ -1272,7 +1285,7 @@ export function createComponent<
       }
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`split-styles`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`split-styles`
 
     // hide strategy will set this opacity = 0 until measured
     if (splitStyles) {
@@ -1297,7 +1310,7 @@ export function createComponent<
     const mediaListeningKeys = hasRuntimeMediaKeys
       ? (splitStyles.hasMedia as Set<string>)
       : null
-    if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+    if (!isProd && process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
       console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys)
     }
 
@@ -1463,20 +1476,25 @@ export function createComponent<
         }
       }
 
-      if (process.env.NODE_ENV === 'development' && time) time`animations`
+      if (!isProd && process.env.NODE_ENV === 'development' && time) time`animations`
     }
 
     if (isWeb && isExiting) {
       viewProps.className = `t_exiting ${viewProps.className || ''}`
     }
 
-    if (process.env.NODE_ENV === 'development' && props.untilMeasured && !isContainer) {
+    if (
+      !isProd &&
+      process.env.NODE_ENV === 'development' &&
+      props.untilMeasured &&
+      !isContainer
+    ) {
       console.warn(
         `You set untilMeasured without establishing a container. Set it on the parent with container or container="name", not on the child using a container clause.`
       )
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`destructure`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`destructure`
 
     if (
       !isPassthrough &&
@@ -1565,7 +1583,7 @@ export function createComponent<
     // handle pointer events (native: maps to touch events, web: no-op)
     usePointerEvents(props, viewProps)
 
-    if (process.env.NODE_ENV === 'development') {
+    if (!isProd && process.env.NODE_ENV === 'development') {
       if (!isText && isWeb && !isHOC) {
         React.Children.toArray(props.children).forEach((item) => {
           // allow newlines because why not its annoying with mdx
@@ -1579,13 +1597,13 @@ export function createComponent<
       }
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`events-hooks`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`events-hooks`
 
     const unPress = () => {
       setStateShallow({ press: false, pressIn: false })
     }
 
-    if (process.env.NODE_ENV === 'development' && isWeb) {
+    if (!isProd && process.env.NODE_ENV === 'development' && isWeb) {
       useIsomorphicLayoutEffect(() => {
         if (debugProp === 'verbose') {
           function cssStyleDeclarationToObject(style: CSSStyleDeclaration) {
@@ -1754,9 +1772,9 @@ export function createComponent<
 
     const needsPressState = Boolean(hasDynamicGroupChildren || runtimePressStyle)
 
-    if (process.env.NODE_ENV === 'development' && time) time`events-setup`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`events-setup`
 
-    if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+    if (!isProd && process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
       log(`🪩 events()`, {
         runtimeFocusStyle,
         runtimePressStyle,
@@ -1920,9 +1938,9 @@ export function createComponent<
       Object.assign(viewProps, getWebEvents(events))
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`events`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`events`
 
-    if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+    if (!isProd && process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
       log(`events`, { events, attachHover, attachPress })
     }
 
@@ -1960,7 +1978,7 @@ export function createComponent<
       )
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`hooks`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`hooks`
 
     if (asChild && !isHOC) {
       elementType = Slot
@@ -1988,7 +2006,7 @@ export function createComponent<
       }
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`spaced-as-child`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`spaced-as-child`
 
     let content: ReactNode | undefined
 
@@ -2078,7 +2096,7 @@ export function createComponent<
         }
       }
 
-      if (process.env.NODE_ENV === 'development' && time) time`use-children`
+      if (!isProd && process.env.NODE_ENV === 'development' && time) time`use-children`
     }
 
     // wrap with GestureDetector for RNGH press handling (native only, no-op on web)
@@ -2121,7 +2139,7 @@ export function createComponent<
       content = <ResetPresence disabled={!needsReset}>{content}</ResetPresence>
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`create-element`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`create-element`
 
     if (process.env.TAMAGUI_TARGET === 'web' && conditionalStates?.has('focus-within')) {
       content = (
@@ -2188,14 +2206,14 @@ export function createComponent<
       )
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`group-context`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`group-context`
 
     content =
       disableTheme || !splitStyles
         ? content
         : getThemedChildren(themeState, content, themeStateProps, false, stateRef)
 
-    if (process.env.NODE_ENV === 'development' && time) time`themed-children`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`themed-children`
 
     if (overriddenContextProps && contextForOverride) {
       const Provider = contextForOverride.Provider!
@@ -2214,7 +2232,7 @@ export function createComponent<
       )
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`context-override`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`context-override`
 
     // SSR style support - for non compiled styles we render them inline until client takes over
     // on client we then switch over to our global sheet insert, because rendering inline is expensive
@@ -2233,9 +2251,9 @@ export function createComponent<
       )
     }
 
-    if (process.env.NODE_ENV === 'development' && time) time`style-tags`
+    if (!isProd && process.env.NODE_ENV === 'development' && time) time`style-tags`
 
-    if (process.env.NODE_ENV === 'development') {
+    if (!isProd && process.env.NODE_ENV === 'development') {
       if (debugProp && debugProp !== 'profile') {
         const element = typeof elementType === 'string' ? elementType : 'Component'
         const title = `render <${element} /> (${internalID}) with props`
@@ -2292,7 +2310,7 @@ export function createComponent<
       }
     }
 
-    if (process.env.NODE_ENV === 'development' && time) {
+    if (!isProd && process.env.NODE_ENV === 'development' && time) {
       time`rest`
       if (!globalThis['willPrint']) {
         globalThis['willPrint'] = true

package/src/createTamagui.ts

@@ -38,6 +38,8 @@ import type {
   Variable,
 } from './types'
 
+const isProd = process.env.NODE_ENV === 'production'
+
 /**
  * Determines if a token category should have px units added.
  * Following the principle: only add px to predefined categories that need them.
@@ -315,7 +317,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
   initializeTamaguiConfig(config)
 
-  if (process.env.NODE_ENV !== 'development') {
+  if (isProd || process.env.NODE_ENV !== 'development') {
     return config as any
   }
 

package/src/createTokens.ts

@@ -1,8 +1,10 @@
 import { createVariables } from './createVariables'
 import type { CreateTokens, Variable } from './types'
 
+const isProd = process.env.NODE_ENV === 'production'
+
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
-  if (process.env.NODE_ENV !== 'production') {
+  if (!isProd && process.env.NODE_ENV !== 'production') {
     validateNoTrueTokenKeys(tokens)
   }
   return createVariables(tokens, process.env.TAMAGUI_TOKEN_PREFIX ?? 't') as any

package/src/createVariable.ts

@@ -4,6 +4,8 @@ import { simpleHash } from '@tamagui/helpers'
 import { getConfig } from './config'
 import type { PxValue, TokenCategories, Variable } from './types'
 
+const isProd = process.env.NODE_ENV === 'production'
+
 /**
  * Should rename this to Token
  * Moving to objects for React Server Components support
@@ -102,7 +104,7 @@ export function getVariableValue(v: Variable | any, group?: TokenCategories) {
 
 // bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):
 export const createCSSVariable = (nameProp: string, includeVar = true) => {
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     if (!nameProp || typeof nameProp !== 'string') {
       throw new Error(`createCSSVariable expected string, got: ${nameProp}`)
     }

package/src/helpers/createDesignSystem.ts

@@ -11,6 +11,8 @@ import { htmlResetCSS } from '../dom/htmlReset'
 import { getThemeCSSRules } from './getThemeCSSRules'
 import { getAllRules, wrapStyleRules } from './insertStyleRule'
 
+const isProd = process.env.NODE_ENV === 'production'
+
 type ThemeConfig = {
   cssRuleSets: string[]
   getThemeRulesSets: () => string[]
@@ -96,7 +98,7 @@ export function buildCSSRuleSets(
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
-    const developmentWhitespace = process.env.NODE_ENV === 'development'
+    const developmentWhitespace = !isProd && process.env.NODE_ENV === 'development'
     const sep = developmentWhitespace ? ' ' : ''
 
     function declarationsToRuleSet(decs: string[], selector = '') {
@@ -251,7 +253,7 @@ ${htmlResetCSS}
 ${pointerEventsCSS}
 ${hideScrollBarsCSS}`
   const designSystem = `${
-    process.env.NODE_ENV === 'production'
+    isProd || process.env.NODE_ENV === 'production'
       ? baseDesignSystem
           .replaceAll(' {', '{')
           .replaceAll('{ ', '{')

package/src/helpers/formatDiagnostic.ts

@@ -1,3 +1,4 @@
+const isProd = process.env.NODE_ENV === 'production'
 const maxDiagnosticValueLength = 160
 
 function formatDiagnosticValue(
@@ -56,7 +57,7 @@ export function formatDiagnostic(
   prop?: string,
   received?: unknown
 ) {
-  if (process.env.NODE_ENV === 'development') {
+  if (!isProd && process.env.NODE_ENV === 'development') {
     const formattedValue = prop ? formatDiagnosticValue(received) : ''
     const boundedValue =
       formattedValue.length > maxDiagnosticValueLength