@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/getThemeCSSRules.ts

@@ -44,7 +44,11 @@ export function getThemeCSSRules(props: {
 
     for (const themeKey in theme) {
       const variable = theme[themeKey] as Variable
-      const value = variableCreator(variable.val).variable
+      // needsPx values (px() config variables, "Npx" theme strings) must keep
+      // their unit in CSS while staying numeric for native
+      const value = variableCreator(
+        variable.needsPx ? `${variable.val}px` : variable.val
+      ).variable
       // Hash themeKey in case it has invalid chars too
       vars += `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(
         themeKey,
@@ -57,6 +61,17 @@ export function getThemeCSSRules(props: {
     const baseSelectors = names.map((name) => `${CNP}${name}`)
     const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : [])
 
+    // The full resolved name is authoritative. `:not(#t_theme_full_name)` is
+    // an always-matching specificity anchor: a bounded relative selector for
+    // another scheme can also match through intervening Theme scopes, but it
+    // must never override this exact name. The relative family below remains
+    // only for markup emitted by older runtimes/extractors that lacks the full
+    // class. It can go once mixed-version and previously extracted markup no
+    // longer need that class-shape compatibility.
+    for (const name of names) {
+      selectorsSet.add(`${CNP}${name}:not(#t_theme_full_name)`)
+    }
+
     // since we dont specify dark/light in classnames we have to do an awkward specificity war
     // hardcoded to support 2 levels of nesting (e.g. light > dark or dark > light)
     if (hasDarkLight) {

package/src/helpers/getVariantExtras.tsx

@@ -30,12 +30,27 @@ export const getVariantExtras = (styleState: GetStyleState) => {
       )
     },
     get font() {
-      return (
-        fonts[this.fontFamily] ||
-        (!props.fontFamily || props.fontFamily[0] === '$'
-          ? fonts[getSetting('defaultFont') || '']
-          : undefined)
-      )
+      const found = fonts[this.fontFamily]
+      if (found) return found
+
+      // When a component re-processes already-resolved props (useProps -> inner
+      // render), fontFamily arrives as the opaque var(--f-family) reference. The
+      // font identity survives in the font_<name> class.
+      const className = props.className
+      if (typeof className === 'string') {
+        const match = /(?:^|\s)font_([A-Za-z0-9_-]+)/.exec(className)
+        if (match && fonts[match[1]]) {
+          return fonts[match[1]]
+        }
+      }
+
+      // Anything else is a font this config does not define — a bare var()
+      // reference to the root --f-family, or a real CSS family like
+      // `fontFamily: 'monospace'`. Neither has a configured type scale, so size
+      // resolution falls back to the default font's. Returning undefined here
+      // instead crashed every size variant that reads `font.size`, because each
+      // caller passes `extras.font!` straight into resolveTokenSize.
+      return fonts[conf.defaultFontToken]
     },
     props,
   }
@@ -58,8 +73,8 @@ export function getFontsForLanguage(fonts: GenericFonts, language: LanguageConte
         if (lang === 'default') {
           return []
         }
-        const langKey = `$${name}_${lang}`
-        return [[`$${name}`, fonts[langKey]]]
+        const langKey = `${name}_${lang}`
+        return [[name, fonts[langKey]]]
       })
     ),
   }

package/src/helpers/grammarConfig.ts

@@ -0,0 +1,78 @@
+import { simpleHash } from '@tamagui/helpers'
+
+import type { TamaguiInternalConfig } from '../types'
+import { mediaObjectToString } from './mediaObjectToString'
+
+export type ConfigRevisionPart =
+  | 'media'
+  | 'themeNames'
+  | 'themeVariables'
+  | 'tokens'
+  | 'fonts'
+  | 'shorthands'
+
+export type ConfigRevisionParts = Readonly<Record<ConfigRevisionPart, string>>
+
+export interface ConfigRevisionSnapshot {
+  revision: string
+  parts: ConfigRevisionParts
+}
+
+const revisions = new WeakMap<TamaguiInternalConfig, ConfigRevisionSnapshot>()
+
+export function getConfigRevisionSnapshot(
+  config: TamaguiInternalConfig
+): ConfigRevisionSnapshot {
+  const cached = revisions.get(config)
+  if (cached) return cached
+
+  const sections: Record<ConfigRevisionPart, string[]> = {
+    media: [],
+    themeNames: [],
+    themeVariables: [],
+    tokens: [],
+    fonts: [],
+    shorthands: [],
+  }
+  const media = config.media || {}
+  for (const key of Object.keys(media).sort()) {
+    sections.media.push(`m:${key}=${mediaObjectToString(media[key])}`)
+  }
+  const themes = config.themes || {}
+  const themeNames = Object.keys(themes).sort()
+  sections.themeNames.push(`t:${themeNames.join(',')}`)
+  const themeKeys = new Set<string>()
+  for (const name of themeNames) {
+    for (const key of Object.keys(themes[name] || {})) themeKeys.add(key)
+  }
+  sections.themeVariables.push(`v:${[...themeKeys].sort().join(',')}`)
+  for (const category of ['color', 'space', 'size', 'radius', 'zIndex']) {
+    const tokens = config.tokensParsed[category]
+    sections.tokens.push(
+      `${category}:${tokens ? Object.keys(tokens).sort().join(',') : ''}`
+    )
+  }
+  for (const family of Object.keys(config.fontsParsed || {}).sort()) {
+    const font = config.fontsParsed[family]
+    sections.fonts.push(`f:${family}=${font ? Object.keys(font).sort().join(',') : ''}`)
+  }
+  const shorthands = config.shorthands || {}
+  sections.shorthands.push(
+    `s:${Object.keys(shorthands)
+      .sort()
+      .map((key) => `${key}>${shorthands[key]}`)
+      .join(',')}`
+  )
+
+  const snapshot: ConfigRevisionSnapshot = {
+    revision: simpleHash(Object.values(sections).flat().join('|'), 'strict') || '0',
+    parts: Object.fromEntries(
+      Object.entries(sections).map(([name, values]) => [
+        name,
+        simpleHash(values.join('|'), 'strict') || '0',
+      ])
+    ) as Record<ConfigRevisionPart, string>,
+  }
+  revisions.set(config, snapshot)
+  return snapshot
+}

package/src/helpers/insertStyleRule.tsx

@@ -1,5 +1,6 @@
 import { StyleObjectIdentifier, StyleObjectRules } from '@tamagui/helpers'
 import { createVariable } from '../createVariable'
+import { formatDiagnostic } from './formatDiagnostic'
 import type {
   DedupedTheme,
   DedupedThemes,
@@ -16,15 +17,29 @@ const allSelectors: Record<string, string> = {}
 const allRules: Record<string, string> = {}
 
 export const getAllSelectors = () => allSelectors
+
+// updateRules is the only writer, so one flag there covers every change
+let sortedRules: string[] = []
+let sortedRulesStale = true
+
 export const getAllRules = () => {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
-    // Sort by identifier to ensure deterministic CSS output order
-    const sortedKeys = Object.keys(allRules).sort()
-    return sortedKeys.map((key) => allRules[key])
+    if (sortedRulesStale) {
+      // Sort by identifier to ensure deterministic CSS output order
+      const sortedKeys = Object.keys(allRules).sort()
+      sortedRules = sortedKeys.map((key) => allRules[key])
+      sortedRulesStale = false
+    }
+    return sortedRules
   }
   return []
 }
 
+export function wrapStyleRules(css: string): string {
+  const layer = process.env.TAMAGUI_CSS_LAYER
+  return layer && css ? `@layer ${layer} {\n${css}\n}` : css
+}
+
 // once react 19 onyl supported we can remove most of this
 // gets existing ones (client side)
 // takes ~0.1ms for a fairly large page
@@ -44,6 +59,7 @@ export function scanAllSheets(
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     if (process.env.NODE_ENV === 'test') return
     if (process.env.TAMAGUI_TARGET !== 'web') return
+    if (typeof document === 'undefined') return
 
     let themes: DedupedThemes | undefined
 
@@ -91,12 +107,12 @@ function updateSheetStyles(
 ): DedupedThemes | undefined {
   // avoid errors on cross origin sheets
   // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
-  let rules: CSSRuleList
+  let rules: CSSRule[]
   try {
-    rules = sheet.cssRules
-    if (!rules) {
+    if (!sheet.cssRules) {
       return
     }
+    rules = flattenCSSRules(sheet.cssRules)
   } catch {
     return
   }
@@ -166,6 +182,21 @@ function updateSheetStyles(
   return dedupedThemes
 }
 
+function flattenCSSRules(rules: CSSRuleList, output: CSSRule[] = []): CSSRule[] {
+  for (let index = 0; index < rules.length; index++) {
+    const rule = rules[index]
+    if (rule instanceof CSSStyleRule) {
+      output.push(rule)
+      continue
+    }
+    if ('cssRules' in rule) {
+      const nested = (rule as CSSGroupingRule).cssRules
+      if (nested) flattenCSSRules(nested, output)
+    }
+  }
+  return output
+}
+
 let colorVarToVal: Record<string, string>
 let rootComputedStyle: CSSStyleDeclaration | null = null
 
@@ -231,16 +262,8 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
 
   // loop selectors and build deduped
   for (const selector of selectors) {
-    if (selector === ' .tm_xxt') continue
-    const lastThemeSelectorIndex = selector.lastIndexOf('.t_')
-    const name = selector.slice(lastThemeSelectorIndex).slice(3)
-    const [schemeChar] = selector[lastThemeSelectorIndex - 5]
-    const scheme = schemeChar === 'd' ? 'dark' : schemeChar === 'i' ? 'light' : ''
-    const themeName = scheme && scheme !== name ? `${scheme}_${name}` : name
-    if (!themeName || themeName === 'light_dark' || themeName === 'dark_light') {
-      continue
-    }
-    names.add(themeName)
+    const themeName = getThemeNameFromSelector(selector)
+    if (themeName) names.add(themeName)
   }
 
   return {
@@ -249,6 +272,24 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
   } satisfies DedupedTheme
 }
 
+export function getThemeNameFromSelector(selector: string): string | undefined {
+  if (selector === ' .tm_xxt') return
+  const lastThemeSelectorIndex = selector.lastIndexOf('.t_')
+  if (lastThemeSelectorIndex === -1) return
+
+  // A selector may qualify the class for specificity, for example
+  // `.t_light_blue:not(#t_theme_full_name)`. Only the class identifier is a
+  // theme name; retaining the pseudo-class would double the client theme set.
+  const name = selector.slice(lastThemeSelectorIndex + 3).match(/^[\w-]+/)?.[0]
+  if (!name) return
+
+  const schemeChar = selector[lastThemeSelectorIndex - 5]
+  const scheme = schemeChar === 'd' ? 'dark' : schemeChar === 'i' ? 'light' : ''
+  const themeName = scheme && scheme !== name ? `${scheme}_${name}` : name
+  if (themeName === 'light_dark' || themeName === 'dark_light') return
+  return themeName
+}
+
 const tamaguiSelectorRegex = /\.tm_xxt/
 
 function getTamaguiSelector(
@@ -281,16 +322,23 @@ const getIdentifierFromTamaguiSelector = (selector: string) => {
   return selector.slice(7)
 }
 
-let sheet: CSSStyleSheet | null = null
+let sheet: Pick<CSSStyleSheet, 'cssRules' | 'insertRule'> | null = null
 
+let mountedProviders = 0
 let trackAllRules = true
 export function stopAccumulatingRules() {
+  mountedProviders++
   trackAllRules = false
+  return () => {
+    mountedProviders--
+    trackAllRules = mountedProviders === 0
+  }
 }
 
 export function updateRules(identifier: string, rules: string[]) {
   if (trackAllRules) {
     allRules[identifier] = rules.join(' ')
+    sortedRulesStale = true
   }
   return true
 }
@@ -309,7 +357,18 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
     if (nonce) {
       styleTag.nonce = nonce
     }
-    sheet = document.head.appendChild(styleTag).sheet
+    const rootSheet = document.head.appendChild(styleTag).sheet
+    const layer = process.env.TAMAGUI_CSS_LAYER
+    if (rootSheet && layer) {
+      rootSheet.insertRule(`@layer ${layer} {}`, rootSheet.cssRules.length)
+      const layerRule = rootSheet.cssRules[rootSheet.cssRules.length - 1]
+      sheet =
+        'cssRules' in layerRule && 'insertRule' in layerRule
+          ? (layerRule as CSSGroupingRule)
+          : rootSheet
+    } else {
+      sheet = rootSheet
+    }
   }
 
   if (!sheet) return
@@ -333,7 +392,26 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
       }
     } catch (err) {
       if (process.env.NODE_ENV === 'production') {
-        console.error(`Error inserting style rule`, rules)
+        const rule = rules[0] || ''
+        const selectorEnd = rule.indexOf('{')
+        const owner =
+          'ownerNode' in sheet ? (sheet.ownerNode as HTMLElement | null) : null
+        console.error(
+          formatDiagnostic(
+            'TAMAGUI_STYLE_INSERT',
+            'insertStyleRules',
+            'the stylesheet rejected a generated rule',
+            'Fix or remove the invalid style declaration',
+            'identifier,selector,target',
+            {
+              identifier,
+              selector: (selectorEnd === -1 ? rule : rule.slice(0, selectorEnd)).trim(),
+              target: owner
+                ? `${owner.nodeName.toLowerCase()}${owner.id ? `#${owner.id}` : ''}`
+                : sheet.constructor?.name || 'CSSStyleSheet',
+            }
+          )
+        )
       }
       // in dev throw to show error clearly
     }

package/src/helpers/isObj.ts

@@ -1 +1,9 @@
 export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'
+
+export function isPlainObject(value: unknown): value is Record<string, any> {
+  if (!isObj(value)) {
+    return false
+  }
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}

package/src/helpers/isTamaguiComponent.tsx

@@ -1,11 +1,8 @@
 import type { StaticConfig } from '../types'
 
-export function isTamaguiComponent<A>(
-  comp: A,
-  name?: string
-): comp is A & {
+export function isTamaguiComponent<A>(comp: A): comp is A & {
   staticConfig: StaticConfig
 } {
   const config = comp?.['staticConfig'] as StaticConfig | undefined
-  return Boolean(config && (name ? name === config.componentName : true))
+  return Boolean(config)
 }

package/src/helpers/isTamaguiElement.tsx

@@ -4,8 +4,7 @@ import type { StaticConfig } from '../types'
 import { isTamaguiComponent } from './isTamaguiComponent'
 
 export const isTamaguiElement = (
-  child: any,
-  name?: string
+  child: any
 ): child is React.ReactElement<any> & { type: { staticConfig: StaticConfig } } => {
-  return React.isValidElement(child) && isTamaguiComponent(child.type, name)
+  return React.isValidElement(child) && isTamaguiComponent(child.type)
 }

package/src/helpers/matchMedia.native.ts

@@ -1,4 +1,7 @@
 import type { MatchMedia, MediaQueryList } from '../types'
+import { formatDiagnostic } from './formatDiagnostic'
+import { mediaObjectToString } from './mediaObjectToString'
+import { mediaQueryConfig } from './mediaState'
 
 let matchMediaImpl: MatchMedia = matchMediaFallback
 
@@ -6,7 +9,19 @@ export const matchMedia: MatchMedia = (...args) => matchMediaImpl(...args)
 
 function matchMediaFallback(query: string): MediaQueryList {
   if (!process.env.IS_STATIC && process.env.NODE_ENV === 'development') {
-    console.warn('warning: matchMedia implementation is not provided.')
+    const keys = Object.keys(mediaQueryConfig).filter(
+      (key) => mediaObjectToString(mediaQueryConfig[key]) === query
+    )
+    console.warn(
+      formatDiagnostic(
+        'TAMAGUI_MATCH_MEDIA_NATIVE',
+        'matchMedia',
+        'no native matchMedia implementation is installed',
+        'Call setupMatchMedia before configuring media queries',
+        'keys,query',
+        { keys, query }
+      )
+    )
   }
   return {
     match: (a, b) => false,

package/src/helpers/mediaState.ts

@@ -1,42 +1,13 @@
 import type { MediaQueries, MediaQueryState } from '../types'
 
-export let mediaState: MediaQueryState =
-  // development only safeguard
-  process.env.NODE_ENV === 'development'
-    ? new Proxy(
-        {},
-        {
-          get(target, key) {
-            if (
-              typeof key === 'string' &&
-              key[0] === '$' &&
-              // dont error on $$typeof
-              key[1] !== '$'
-            ) {
-              throw new Error(`Access mediaState should not use "$": ${key}`)
-            }
-            return Reflect.get(target, key)
-          },
-        }
-      )
-    : ({} as any)
+export let mediaState: MediaQueryState = {} as any
 
 export const setMediaState = (next: MediaQueryState) => {
   mediaState = next
 }
 
-export const getMedia = () => mediaState
+export const mediaQueryConfig: MediaQueries = {}
 
-// shared across copies of this package for the same reason setConfig writes
-// globalThis.__tamaguiConfig: an esm import and a cjs require resolve to
-// different files, and only the copy that ran createTamagui fills these.
-// sharing the containers rather than looking them up per read costs nothing.
-const shared = (globalThis.__tamaguiMediaShared ||= {
-  queryConfig: {} as MediaQueries,
-  keys: new Set<string>(), // with $ prefix
-  keysOrdered: [] as string[],
-})
+export const getMedia = () => mediaState
 
-export const mediaQueryConfig: MediaQueries = shared.queryConfig
-export const mediaKeys: Set<string> = shared.keys
-export const mediaKeysOrdered: string[] = shared.keysOrdered
+export const mediaKeys = new Set<string>()

package/src/helpers/mergeProps.ts

@@ -6,8 +6,6 @@
  * are merging defaultProps, givenProps, but we started using it elsewhere and now its a bit confusing
  * Should look into refactoring this to match common usage
  *
- * Merges sub-objects if they start are pseudo-keys or media-key-like (start with "$")
- *
  *    Given:
  *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })
  *    The final key order will be:
@@ -15,8 +13,6 @@
  *
  */
 
-import { pseudoDescriptors } from './pseudoDescriptors'
-
 export type GenericProps = Record<string, any>
 
 export const mergeProps = (defaultProps: object, props: object) => {
@@ -36,7 +32,7 @@ export const mergeProps = (defaultProps: object, props: object) => {
   }
 
   for (const key in props) {
-    mergeProp(out, defaultProps, props, key)
+    out[key] = props[key]
   }
 
   return out
@@ -84,7 +80,7 @@ export const mergeComponentProps = (
   }
 
   for (const key in props) {
-    mergeProp(out, defaultProps, props, key)
+    out[key] = props[key]
     if (contextProps && key in contextProps) {
       overriddenContext ||= {}
       overriddenContext[key] = props[key]
@@ -93,29 +89,3 @@ export const mergeComponentProps = (
 
   return [out, overriddenContext] as const
 }
-
-function mergeProp(
-  out: object,
-  defaultProps: object | undefined | null,
-  props: object,
-  key: string
-) {
-  let val = props[key]
-
-  // one special case - we merge tamagui style sub-objects
-  if (
-    defaultProps &&
-    key in defaultProps &&
-    (key in pseudoDescriptors || key[0] === '$') &&
-    val &&
-    typeof val === 'object'
-  ) {
-    const defaultVal = defaultProps[key]
-    if (defaultVal && typeof defaultVal === 'object') {
-      // use merge props so we prefer the key ordering the the last merged
-      val = mergeProps(defaultVal, val)
-    }
-  }
-
-  out[key] = val
-}

package/src/helpers/mergeVariants.ts

@@ -1,34 +1,56 @@
+import { mergeFlatValues } from '@tamagui/style-grammar/runtime'
+
 import type { GenericVariantDefinitions } from '../types'
+import { isPlainObject } from './isObj'
 
-// deep merge variants
-// except for functions which override any parents
+// same key ordering as mergeProps (parent keys first, then ours), but a key
+// present on both sides merges its clauses instead of being replaced outright
+function mergeStyleBranch(
+  parentBranch: Record<string, any>,
+  ourBranch: Record<string, any>
+) {
+  const out: Record<string, any> = {}
+  for (const key in parentBranch) {
+    if (key in ourBranch) continue
+    out[key] = parentBranch[key]
+  }
+  for (const key in ourBranch) {
+    out[key] =
+      key in parentBranch
+        ? mergeFlatValues(parentBranch[key], ourBranch[key])
+        : ourBranch[key]
+  }
+  return out
+}
 
 export const mergeVariants = (
-  parentVariants: GenericVariantDefinitions,
-  ourVariants: GenericVariantDefinitions,
+  parentVariants?: GenericVariantDefinitions | Record<string, any>,
+  ourVariants?: GenericVariantDefinitions | Record<string, any>,
   level = 0
 ) => {
-  const variants = {}
+  if (!ourVariants) {
+    return parentVariants || {}
+  }
+  if (!parentVariants) {
+    return ourVariants || {}
+  }
+
+  const variants: Record<string, any> = {}
 
   for (const key in ourVariants) {
     const parentVariant = parentVariants?.[key]
     const ourVariant = ourVariants[key]
-    if (!parentVariant || typeof ourVariant === 'function') {
+    if (!isPlainObject(parentVariant) || !isPlainObject(ourVariant)) {
       variants[key] = ourVariant
-    } else if (parentVariant && !ourVariant) {
-      variants[key] = parentVariant[key]
     } else {
       if (level === 0) {
-        variants[key] = mergeVariants(
-          parentVariant as Record<string, any>,
-          ourVariant as Record<string, any>,
-          level + 1
-        )
+        variants[key] = mergeVariants(parentVariant, ourVariant, level + 1)
       } else {
-        variants[key] = {
-          ...parentVariant,
-          ...ourVariant,
-        }
+        // A branch is a style object. Merge per property, and per clause within
+        // a property: a child restating `borderColor="green"` overrides the
+        // parent's base without erasing the parent's `press:transparent`, which
+        // a plain key-level override silently dropped.
+        variants[key] = mergeStyleBranch(parentVariant, ourVariant)
       }
     }
   }