@tamagui/web 3.0.0-beta.924.1 → 3.0.0

package/src/helpers/resolveSizing.ts

@@ -0,0 +1,167 @@
+import { getConfig } from '../config'
+import { getVariableValue } from '../createVariable'
+import type {
+  ComponentSize,
+  Font,
+  GenericSizing,
+  SizeRecipe,
+  TamaguiConfig,
+  TokensParsed,
+} from '../types'
+
+/** the env slice resolveSizing reads: a styled.dynamic env or hand-built */
+export type SizingEnv = {
+  sizing: GenericSizing
+  fonts: TamaguiConfig['fonts']
+  tokens: TokensParsed
+  font?: Font
+}
+
+/**
+ * the default control ladder, transcribed from the Button frame/text tables
+ * so the derived px are identical by construction. v6 re-exports this;
+ * resolveSizing falls back to it when a config carries no `sizing`.
+ */
+export const defaultSizing = {
+  default: 'md',
+  sizes: {
+    xs: {
+      fontSize: 'xs',
+      controlFontSize: 'xs',
+      paddingInline: '2',
+      paddingBlock: '1',
+      gap: '1',
+      radius: 'sm',
+    },
+    sm: {
+      fontSize: 'sm',
+      controlFontSize: 'sm',
+      paddingInline: '3',
+      paddingBlock: '1.5',
+      gap: '1.5',
+      radius: 'md',
+    },
+    md: {
+      fontSize: 'sm',
+      controlFontSize: 'base',
+      paddingInline: '4',
+      paddingBlock: '2',
+      gap: '2',
+      radius: 'md',
+    },
+    lg: {
+      fontSize: 'base',
+      controlFontSize: 'lg',
+      paddingInline: '6',
+      paddingBlock: '2',
+      gap: '2',
+      radius: 'md',
+    },
+    xl: {
+      fontSize: 'lg',
+      controlFontSize: 'xl',
+      paddingInline: '8',
+      paddingBlock: '2.5',
+      gap: '2.5',
+      radius: 'lg',
+    },
+  },
+} as const satisfies GenericSizing
+
+/** a rung resolved: token keys stay keys, geometry is px */
+export type ResolvedSizing = {
+  /** the rung that rendered (degrades to the default in production) */
+  name: string
+  fontSize: string
+  lineHeight: string
+  paddingInline: string
+  paddingBlock: string
+  gap: string
+  radius: string
+  /** text line box plus vertical padding, before any border */
+  height: number
+  /** icon px for the rung */
+  icon: number
+  /** the square controls: checkbox box, radio circle, switch track height */
+  square: number
+}
+
+const toPx = (value: unknown): number =>
+  typeof value === 'number' ? value : Number.parseFloat(value as string)
+
+/**
+ * a size name -> its rung resolved to pixels, against the sizing in `env`.
+ * `true`/absent resolve to the default rung, `false` to no styles. Without
+ * an env (plain render code, no styled.dynamic callback) it reads the active
+ * config and default font: a sync global read, not a subscription, so static
+ * sizes never re-render on media or theme changes. Unknown names resolve to
+ * no styles, exactly like a miss in the old static tables: numeric sizes and
+ * cascaded values pass through variants that do not know them, and must never
+ * throw. A rung pointing at missing tokens is a broken config: it warns in
+ * development and resolves to no styles.
+ */
+export function resolveSizing(size: false, env?: SizingEnv): undefined
+export function resolveSizing(
+  size: ComponentSize | true | undefined,
+  env?: SizingEnv
+): ResolvedSizing
+export function resolveSizing(
+  size: ComponentSize | boolean | undefined,
+  env?: SizingEnv
+): ResolvedSizing | undefined
+export function resolveSizing(
+  size: ComponentSize | boolean | undefined,
+  env?: SizingEnv
+): ResolvedSizing | undefined {
+  if (size === false) return undefined
+  const conf = env?.fonts && env?.tokens ? undefined : getConfig()
+  const sizing = { ...defaultSizing, ...(env?.sizing ?? conf?.sizing) }
+  const name = size === true || size == null ? sizing.default : size
+  const rung: SizeRecipe | undefined = sizing.sizes[name]
+  if (!rung) return undefined
+
+  const keys = {
+    fontSize: rung.fontSize,
+    lineHeight: rung.fontSize,
+    paddingInline: rung.paddingInline,
+    paddingBlock: rung.paddingBlock,
+    gap: rung.gap,
+    radius: rung.radius,
+  }
+  // an explicit rung geometry wins over derivation (v5 pins its heights)
+  if (rung.px) {
+    return {
+      name,
+      ...keys,
+      height: rung.px.height,
+      icon: rung.px.icon,
+      square: rung.px.square,
+    }
+  }
+
+  const fonts = env?.fonts ?? conf?.fontsParsed
+  const tokens = env?.tokens ?? conf?.tokensParsed
+  const font = env?.font ?? fonts?.[conf?.defaultFontToken ?? 'body']
+  const px = {
+    fontSize: toPx(getVariableValue(font?.size?.[rung.fontSize])),
+    control: toPx(getVariableValue(font?.size?.[rung.controlFontSize])),
+    lineHeight: toPx(getVariableValue(font?.lineHeight?.[rung.fontSize])),
+    paddingBlock: toPx(getVariableValue(tokens?.space?.[rung.paddingBlock])),
+  }
+  if (!Object.values(px).every(Number.isFinite)) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(
+        `[tamagui] size "${name}" references a missing token (fontSize "${rung.fontSize}", controlFontSize "${rung.controlFontSize}", paddingBlock "${rung.paddingBlock}"); resolving to no styles`
+      )
+    }
+    return undefined
+  }
+
+  return {
+    name,
+    ...keys,
+    height: px.lineHeight + px.paddingBlock * 2,
+    icon: Math.ceil(px.fontSize / 4) * 4,
+    square: Math.round(px.control * 1.4),
+  }
+}

package/src/helpers/resolveVariableValue.ts

@@ -6,26 +6,30 @@ export function resolveVariableValue(
   valOrVar: Variable | any,
   resolveValues?: ResolveVariableAs
 ) {
-  if (resolveValues === 'none') {
+  if (resolveValues === 'none' || !isVariable(valOrVar)) {
     return valOrVar
   }
-  if (isVariable(valOrVar)) {
-    if (resolveValues === 'value') {
-      return valOrVar.val
-    }
-
+  let value
+  if (resolveValues === 'value') {
+    value = valOrVar.val
+  } else {
     // @ts-expect-error dynamic variables may expose a platform-aware getter
-    const get = valOrVar?.get
-
-    // shadowColor doesn't support dynamic style
-    if (process.env.TAMAGUI_TARGET !== 'native' || key !== 'shadowColor') {
-      if (typeof get === 'function') {
-        const resolveDynamicFor = resolveValues === 'web' ? 'web' : undefined
-        return get(resolveDynamicFor)
-      }
-    }
+    const get = valOrVar.get
 
-    return process.env.TAMAGUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
+    // compound CSS strings cannot contain native dynamic color objects.
+    const needsLiteralColor =
+      key === 'shadowColor' ||
+      key === 'boxShadow' ||
+      key === 'textShadow' ||
+      key === 'backgroundImage'
+    value =
+      (process.env.TAMAGUI_TARGET !== 'native' || !needsLiteralColor) &&
+      typeof get === 'function'
+        ? get(resolveValues === 'web' ? 'web' : undefined)
+        : process.env.TAMAGUI_TARGET === 'native'
+          ? valOrVar.val
+          : valOrVar.variable
   }
-  return valOrVar
+  // compiler variables can return native literals from a web-built resolver.
+  return key === 'lineHeight' && typeof value === 'number' ? `${value}px` : value
 }

package/src/helpers/skipProps.ts

@@ -10,7 +10,6 @@ export const skipProps = {
   untilMeasured: 1,
   transition: 1,
   space: 1,
-  animateOnly: 1,
   animatedBy: 1,
   displayName: 1,
   disableClassName: 1,

package/src/helpers/styleFrontend.ts

@@ -66,6 +66,33 @@ export type FrontendClassPlan =
 
 export type FrontendClassSink = (entry: FrontendClassPlanEntry) => void
 
+/**
+ * Fold one contribution into whatever a frontend already collected for the same
+ * property. A value already present becomes the `default` arm, so
+ * `ring-2 hover:ring-4` reads as `{ default, hover }`, and a later unconditional
+ * `ring-8` restates that `default` without dropping the `hover` arm.
+ *
+ * Both class-walk sinks use this: the one in `getSplitStyles` and the one the
+ * Tailwind frontend runs when it composes a class string statically.
+ */
+export function mergeFrontendCondition(
+  previous: unknown,
+  value: unknown,
+  condition: string | undefined
+): unknown {
+  const merged =
+    previous !== null && typeof previous === 'object' && !Array.isArray(previous)
+  if (condition === undefined) {
+    return merged ? { ...(previous as Record<string, unknown>), default: value } : value
+  }
+  if (merged) {
+    return { ...(previous as Record<string, unknown>), [condition]: value }
+  }
+  return previous === undefined
+    ? { [condition]: value }
+    : { default: previous, [condition]: value }
+}
+
 /**
  * A component's authoring syntax. It is chosen by the package the component was
  * imported from and frozen onto its static config when the component is created:
@@ -95,6 +122,18 @@ export type StyleFrontend = {
     staticConfig: Config,
     config: StyleFrontendConfig
   ) => FrontendStaticConfigNormalization
+
+  /**
+   * Composes the N-to-1 utilities a class walk collected under `__`-prefixed keys
+   * (ring width plus ring color into one `boxShadow`, gradient stops into one
+   * `backgroundImage`, filter parts into one `filter`) into ordinary styles.
+   *
+   * Called once per pass and only when the walk actually collected such a key, so
+   * a component with no className, or none carrying a composed utility, never runs
+   * it. The output contributes at the className's own authored position, which is
+   * why an unrelated `ring-2` cannot change which layer owns `backgroundColor`.
+   */
+  compose?: (collected: Record<string, any>) => Record<string, any> | null | undefined
 }
 
 /**

package/src/helpers/styleProvenance.ts

@@ -24,7 +24,7 @@ export const STYLE_TOKEN_PROVENANCE_KEY = 'tamagui.styleTokenProvenance'
 const provenanceSymbol = /* @__PURE__ */ Symbol.for(STYLE_TOKEN_PROVENANCE_KEY)
 
 export type StyleTokenBinding = {
-  /** original token string before resolution, e.g. 'background' or 'color9' */
+  /** original token string before resolution, e.g. 'background' or 'color-9' */
   token: string
   /** full resolved theme name that produced the value, e.g. 'light_accent' */
   theme: string

package/src/helpers/styleStaticConfigCore.ts

@@ -28,6 +28,8 @@ export function resolveStyleStaticConfig(
   const variants = normalized ? normalized.variants : staticConfig.variants
   const authoredBaseStyle = normalized ? normalized.baseStyle : staticConfig.baseStyle
   const authoredDefaultProps = staticConfig.defaultProps
+  const keys = staticConfig.contextProps || staticConfig.context?.propKeys
+  const styledContextKeys = keys ? new Set(keys) : null
   let baseStyle: Record<string, any> | undefined
   let baseVariantProps: Record<string, any> | undefined
   let defaultProps: Record<string, any> | undefined
@@ -47,7 +49,12 @@ export function resolveStyleStaticConfig(
         ;(baseStyle ||= authoredBaseStyle ? { ...authoredBaseStyle } : {})[key] =
           authoredDefaultProps[key]
       }
-      if (isVariant || !isStyle) {
+      if (
+        isVariant ||
+        !isStyle ||
+        staticConfig.inlineProps?.has(key) ||
+        styledContextKeys?.has(key)
+      ) {
         ;(defaultProps ||= {})[key] = authoredDefaultProps[key]
       }
       if (isVariant) {
@@ -74,7 +81,12 @@ export function resolveStyleStaticConfig(
     }
     for (const key in resolvedBaseStyle) {
       const expanded = conf.shorthands[key] || key
-      if (key !== 'transition' && !variants?.[key] && expanded in validStyles) {
+      if (
+        key !== 'transition' &&
+        !variants?.[key] &&
+        !staticConfig.inlineProps?.has(expanded) &&
+        expanded in validStyles
+      ) {
         ;(directBaseStyle ||= {})[key] = resolvedBaseStyle[key]
         ;(directBaseKeys ||= []).push(key)
       } else {
@@ -86,14 +98,13 @@ export function resolveStyleStaticConfig(
     }
     flushDirectBaseStyle()
   }
-  const keys = staticConfig.contextProps || staticConfig.context?.propKeys
   const value: StyleStaticConfig = {
     baseStyle: resolvedBaseStyle,
     baseVariantProps,
     baseStylePiece,
     baseStylePieces,
     defaultProps,
-    styledContextKeys: keys ? new Set(keys) : null,
+    styledContextKeys,
     variants,
     variantStyleResolver: (staticConfig as any).variantStyleResolver,
     passthroughClassName: normalized

package/src/helpers/styledDynamic.ts

@@ -1,5 +1,6 @@
 import { getSetting } from '../config'
 import { getVariableValue } from '../createVariable'
+import { defaultSizing } from './resolveSizing'
 import type {
   GenericFonts,
   GetStyleState,
@@ -151,7 +152,7 @@ export function styledDynamic(fn?: any) {
 
 /**
  * the env for `styled.dynamic` callbacks and `.resolve` resolvers: tokens,
- * theme, fonts, and the active font. Built once per style pass.
+ * theme, fonts, sizing, and the active font. Built once per style pass.
  */
 export function getDynamicEnv(styleState: GetStyleState): StyledDynamicEnv {
   const cached = (styleState as any).flatDynamicEnv
@@ -167,6 +168,7 @@ export function getDynamicEnv(styleState: GetStyleState): StyledDynamicEnv {
     fonts,
     tokens: conf.tokensParsed,
     theme,
+    sizing: { ...defaultSizing, ...conf.sizing },
     get fontFamily() {
       return (
         getVariableValue(styleState.fontFamily || props.fontFamily) ||

package/src/helpers/subscribeToContextGroup.tsx

@@ -96,13 +96,22 @@ const createGroupListener = (
           Object.assign(group.pseudo, pseudo)
           didChange = true
         }
-      } else if (layout && mediaGroups) {
-        group.media ||= {}
-        const mediaState = getMediaState(mediaGroups, layout)
-        const next = mergeIfNotShallowEqual(group.media, mediaState)
-        if (next !== group.media) {
-          Object.assign(group.media, next)
-          didChange = true
+      } else if (layout) {
+        if (mediaGroups) {
+          group.media ||= {}
+          const mediaState = getMediaState(mediaGroups, layout)
+          const next = mergeIfNotShallowEqual(group.media, mediaState)
+          if (next !== group.media) {
+            Object.assign(group.media, next)
+            didChange = true
+          }
+        }
+        if (layout.width !== undefined) {
+          const prevWidth = group.layout?.width
+          if (prevWidth === undefined || Math.abs(prevWidth - layout.width) >= 0.5) {
+            group.layout = layout
+            didChange = true
+          }
         }
       }
 

package/src/helpers/themes.ts

@@ -1,22 +1,38 @@
 import { createVariable, isVariable } from '../createVariable'
 
+const schemeKey = /* @__PURE__ */ Symbol.for('tamagui.theme.scheme')
+
+export function getAuthoredThemeScheme(theme: any): 'light' | 'dark' | undefined {
+  const scheme = theme[schemeKey]
+  return scheme === 'light' || scheme === 'dark' ? scheme : undefined
+}
+
+export function setAuthoredThemeScheme<T>(target: T, scheme: 'light' | 'dark'): T {
+  Object.defineProperty(target, schemeKey, { value: scheme })
+  return target
+}
+
+export function copyAuthoredThemeScheme<T>(target: T, source: any): T {
+  const scheme = getAuthoredThemeScheme(source)
+  if (scheme) setAuthoredThemeScheme(target, scheme)
+  return target
+}
+
+// a client that rebuilds its themes from the generated css has no theme
+// objects to read the authored scheme from, so each authored theme's rule
+// carries it as a selector that never matches an element.
+export const themeSchemeSelectorPrefix = '.tm_scheme_'
+
 // mutates, freeze after
 // shared by createTamagui so extracted here
 export function ensureThemeVariable(theme: any, key: string) {
   const val = theme[key]
-  const value = isVariable(val) ? val.val : val
-  if (!isVariable(val)) {
-    theme[key] = createVariable({
-      key,
-      name: key,
-      val: value,
-    })
-  } else if (val.name !== key) {
-    // rename to theme name
+  const variable = isVariable(val)
+  if (!variable || val.name !== key) {
     theme[key] = createVariable({
-      key: val.name,
+      key: variable ? val.name : key,
       name: key,
-      val: value,
+      val: variable ? val.val : val,
     })
   }
 }

package/src/helpers/tokenCategories.ts

@@ -1,5 +1,10 @@
 export type StyleTokenCategory = 'size' | 'space' | 'radius' | 'zIndex' | 'fontSize'
-export type RuntimeTokenCategory = StyleTokenCategory | 'color' | 'font' | 'fontFamily'
+export type RuntimeTokenCategory =
+  | StyleTokenCategory
+  | 'color'
+  | 'font'
+  | 'fontFamily'
+  | (string & {})
 
 export function getTokenCategoryForProperty(
   property: string
@@ -14,7 +19,13 @@ export function getTokenCategoryForProperty(
     return 'font'
   }
   if (property === 'zIndex') return 'zIndex'
-  if (property === 'color' || property.endsWith('Color')) return 'color'
+  if (
+    property === 'color' ||
+    property === 'fill' ||
+    property === 'stroke' ||
+    property.endsWith('Color')
+  )
+    return 'color'
   if (property.endsWith('Radius')) {
     return property === 'shadowRadius' ? 'size' : 'radius'
   }
@@ -23,7 +34,8 @@ export function getTokenCategoryForProperty(
     property.endsWith('BlockSize') ||
     property.endsWith('InlineSize') ||
     property === 'blockSize' ||
-    property === 'inlineSize'
+    property === 'inlineSize' ||
+    property === 'flexBasis'
   ) {
     return 'size'
   }

package/src/helpers/variables.ts

@@ -278,7 +278,7 @@ export function getVariablesCSSRules(
   props: InlineValues,
   conf: TamaguiInternalConfig
 ): VariablesCSS | null {
-  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return null
+  if (process.env.TAMAGUI_RUNTIME === 'island') return null
   const cycleDropped = getCycleDroppedKeys(props)
   const themes = props.themes as
     | Record<string, InlineValues['values'] | undefined>
@@ -417,7 +417,7 @@ export const getInlineValuesKey = (inline: InlineValues): string => {
   return key
 }
 
-// ---- flat theme-value props: <ThemeUpdate background-hover="blue4 dark:blue2"> ----
+// ---- flat theme-value props: <ThemeUpdate background-hover="blue-4 dark:blue-2"> ----
 
 /**
  * One authored theme-value clause the parser could not use. The runtime warns

package/src/helpers/warnOnce.ts

@@ -22,6 +22,12 @@ export function warnOnce(key: string, message = key) {
   }
 }
 
+export function resetWarned() {
+  if (process.env.NODE_ENV !== 'production') {
+    warned?.clear()
+  }
+}
+
 /**
  * A value the flat-value scanner refused, reported where the author can act on
  * it. Item 5b left refusal silent, matching the clause scanner, so an author

package/src/helpers/webPropsToSkip.native.ts

@@ -3,14 +3,21 @@ import { webOnlyStylePropsText, webOnlyStylePropsView } from '@tamagui/helpers'
 // textOverflow is in webOnlyStylePropsText for web CSS, but on native we map
 // textOverflow="ellipsis" to numberOfLines={1} + ellipsizeMode="tail" on Text.
 // Handled specially in getSplitStyles.tsx so we exclude it from the skip list.
-const { textOverflow: __, ...webOnlyStylePropsTextWithoutTextOverflow } =
+const { textOverflow: _textOverflow, ...webOnlyStylePropsTextWithoutTextOverflow } =
   webOnlyStylePropsText
 
+// userSelect is in webOnlyStylePropsView for web CSS, but on native it is the
+// authoring name for Text's selectable prop, mapped in getSplitStyles.tsx. the
+// skip check runs before that mapping, so leaving it in the list dropped the prop
+// on native with no error.
+const { userSelect: _userSelect, ...webOnlyStylePropsViewWithoutUserSelect } =
+  webOnlyStylePropsView
+
 /**
  * Web-only props and event handlers that should be skipped on native
  */
 export const webPropsToSkip = {
-  ...webOnlyStylePropsView,
+  ...webOnlyStylePropsViewWithoutUserSelect,
   ...webOnlyStylePropsTextWithoutTextOverflow,
 
   // Web-only event handlers
@@ -44,7 +51,6 @@ export const webPropsToSkip = {
   onChange: 1,
   onInput: 1,
   onBeforeInput: 1,
-  onScroll: 1,
   onCopy: 1,
   onCut: 1,
   onPaste: 1,

package/src/helpers/wrapStyleTags.tsx

@@ -67,7 +67,10 @@ function getCachedStyleTag(styleObject: StyleObject) {
 }
 
 export function getStyleTags(styles: StyleObject[]) {
-  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET !== 'native') {
+  if (
+    process.env.TAMAGUI_RUNTIME !== 'island' &&
+    process.env.TAMAGUI_TARGET !== 'native'
+  ) {
     if (styles.length) {
       queueStyleTagCacheClear()
       return <>{styles.map(getCachedStyleTag)}</>