@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/animationDriverTypes.test-d.ts

@@ -1,332 +0,0 @@
-/**
- * Type tests for animatedBy prop and animation driver configuration.
- *
- * These tests ensure type-safe inference for:
- * 1. Single animation driver config
- * 2. Multiple animation drivers config
- * 3. TypeOverride for lazy-loaded drivers
- * 4. Combination scenarios
- *
- * Run with: yarn test:types
- */
-
-import { expectTypeOf, describe, test } from 'vitest'
-import type {
-  AnimationDriver,
-  AnimationDriverKeys,
-  AnimationsConfig,
-  AnimationsConfigObject,
-  CreateTamaguiConfig,
-  TransitionKeys,
-  TypeOverride,
-  TamaguiComponentPropsBaseBase,
-} from './types'
-
-// =============================================================================
-// Mock types for testing
-// =============================================================================
-
-type MockCSSAnimations = { slow: any; fast: any }
-type MockSpringAnimations = { bouncy: any; stiff: any }
-
-type MockCSSDriver = AnimationDriver<MockCSSAnimations>
-type MockSpringDriver = AnimationDriver<MockSpringAnimations>
-
-// =============================================================================
-// Test: AnimationsConfig types
-// =============================================================================
-
-describe('AnimationsConfig types', () => {
-  test('AnimationsConfig accepts single driver', () => {
-    expectTypeOf<MockCSSDriver>().toMatchTypeOf<AnimationsConfig>()
-  })
-
-  test('AnimationsConfig accepts multi-driver object', () => {
-    type MultiDriver = {
-      default: MockCSSDriver
-      spring: MockSpringDriver
-    }
-    expectTypeOf<MultiDriver>().toMatchTypeOf<AnimationsConfig>()
-  })
-
-  test('AnimationsConfigObject requires default key', () => {
-    type ValidConfig = {
-      default: MockCSSDriver
-      spring: MockSpringDriver
-    }
-    expectTypeOf<ValidConfig>().toMatchTypeOf<AnimationsConfigObject>()
-
-    // This should fail - no default key
-    type InvalidConfig = {
-      spring: MockSpringDriver
-    }
-    // @ts-expect-error - missing default key
-    expectTypeOf<InvalidConfig>().toMatchTypeOf<AnimationsConfigObject>()
-  })
-})
-
-// =============================================================================
-// Test: CreateTamaguiConfig preserves animation shape
-// =============================================================================
-
-describe('CreateTamaguiConfig animation types', () => {
-  test('CreateTamaguiConfig.animations accepts single driver', () => {
-    type Config = CreateTamaguiConfig<any, any, any, any, MockCSSAnimations, any>
-    type Animations = Config['animations']
-
-    // Should be a union of AnimationDriver<E> | AnimationsConfigObject
-    // Single driver should be assignable to this union
-    const _driver: Animations = {} as MockCSSDriver
-  })
-
-  test('CreateTamaguiConfig.animations accepts multi-driver object', () => {
-    type Config = CreateTamaguiConfig<any, any, any, any, MockCSSAnimations, any>
-    type Animations = Config['animations']
-
-    // Multi-driver object should also be assignable
-    type MultiDriver = {
-      default: MockCSSDriver
-      spring: MockSpringDriver
-    }
-    const _multi: Animations = {} as MultiDriver
-  })
-})
-
-// =============================================================================
-// Test: TransitionKeys inference
-// =============================================================================
-
-describe('TransitionKeys inference', () => {
-  test('TransitionKeys type exists and is string-based', () => {
-    // TransitionKeys should be a string union of animation names
-    expectTypeOf<TransitionKeys>().toMatchTypeOf<string>()
-  })
-})
-
-// =============================================================================
-// Test: AnimationDriverKeys inference
-// =============================================================================
-
-describe('AnimationDriverKeys inference', () => {
-  test('AnimationDriverKeys is string or string union', () => {
-    // Should be at least 'default'
-    expectTypeOf<'default'>().toMatchTypeOf<AnimationDriverKeys>()
-  })
-
-  test('TypeOverride.animationDrivers exists in interface', () => {
-    // TypeOverride should have animationDrivers method
-    type AnimDriversFn = TypeOverride['animationDrivers']
-    expectTypeOf<AnimDriversFn>().toBeFunction()
-  })
-
-  /**
-   * FIXED: AnimationDriverKeys now combines inferred keys with TypeOverride.
-   *
-   * New implementation:
-   *   'default'
-   *   | InferredAnimationDriverKeys
-   *   | (ReturnType<TypeOverride['animationDrivers']> extends 1 ? never : ReturnType<...>)
-   *
-   * This ensures both config-defined drivers AND lazy-loaded drivers are available.
-   */
-  test('AnimationDriverKeys always includes default', () => {
-    // 'default' is always available regardless of config
-    expectTypeOf<'default'>().toMatchTypeOf<AnimationDriverKeys>()
-  })
-})
-
-// =============================================================================
-// Test: animatedBy prop on components
-// =============================================================================
-
-describe('animatedBy prop', () => {
-  test('animatedBy exists on TamaguiComponentPropsBaseBase', () => {
-    type Props = TamaguiComponentPropsBaseBase
-    expectTypeOf<Props>().toHaveProperty('animatedBy')
-  })
-
-  test('animatedBy accepts null', () => {
-    type Props = TamaguiComponentPropsBaseBase
-    type AnimatedBy = Props['animatedBy']
-    expectTypeOf<null>().toMatchTypeOf<AnimatedBy>()
-  })
-
-  test('animatedBy accepts "default"', () => {
-    type Props = TamaguiComponentPropsBaseBase
-    type AnimatedBy = NonNullable<Props['animatedBy']>
-    expectTypeOf<'default'>().toMatchTypeOf<AnimatedBy>()
-  })
-
-  /**
-   * IMPORTANT: This test verifies the full type inference chain for multi-driver configs.
-   *
-   * When user configures: animations: { default: motionDriver, css: cssDriver }
-   * The animatedBy prop should accept: 'default' | 'css' | null
-   *
-   * The type flow is:
-   * 1. CreateTamaguiProps.animations accepts multi-driver object
-   * 2. InferTamaguiConfig extracts driver keys via ExtractAnimationDriverKeys
-   * 3. TamaguiInternalConfig stores keys in AnimDriverKeys generic param
-   * 4. TamaguiCustomConfig extends the inferred config type
-   * 5. TamaguiConfig merges with TamaguiCustomConfig
-   * 6. InferredAnimationDriverKeys reads from TamaguiConfig['animationDriverKeys']
-   * 7. AnimationDriverKeys combines inferred + TypeOverride
-   * 8. animatedBy uses AnimationDriverKeys
-   */
-  test('multi-driver config type flow preserves all driver keys', () => {
-    // internal helper mirrors the one in types.tsx
-    type ExtractAnimationDriverKeys<E> =
-      E extends AnimationDriver<any>
-        ? 'default'
-        : E extends { default: AnimationDriver<any> }
-          ? Extract<keyof E, string>
-          : 'default'
-
-    // simulate multi-driver config
-    type MultiDriverConfig = {
-      default: MockCSSDriver
-      css: MockSpringDriver
-    }
-
-    // should extract both keys
-    type ExtractedKeys = ExtractAnimationDriverKeys<MultiDriverConfig>
-    expectTypeOf<'default'>().toMatchTypeOf<ExtractedKeys>()
-    expectTypeOf<'css'>().toMatchTypeOf<ExtractedKeys>()
-  })
-})
-
-// =============================================================================
-// Test: Type regression scenarios
-// =============================================================================
-
-describe('Type regression scenarios', () => {
-  /**
-   * Scenario 1: Single driver config
-   * User sets: animations: cssDriver
-   * Expected animatedBy values: 'default' only
-   * Expected transition values: keys from cssDriver's animations
-   */
-  test('single driver config scenario', () => {
-    // animatedBy should only allow 'default' since there's one driver
-    // This is correct behavior
-  })
-
-  /**
-   * Scenario 2: Multiple drivers config
-   * User sets: animations: { default: css, spring: moti, physics: reanimated }
-   * Expected animatedBy values: 'default' | 'spring' | 'physics'
-   * Expected transition values: keys from default driver's animations
-   *
-   * FIXED: CreateTamaguiConfig.animations now accepts AnimationsConfigObject
-   * which preserves the multi-driver shape for type inference.
-   */
-  test('multiple drivers config scenario - CreateTamaguiConfig accepts it', () => {
-    type Config = CreateTamaguiConfig<any, any, any, any, MockCSSAnimations, any>
-    type Animations = Config['animations']
-
-    // Multi-driver config is now accepted
-    type MultiDriverConfig = {
-      default: MockCSSDriver
-      spring: MockSpringDriver
-    }
-    const _config: Animations = {} as MultiDriverConfig
-  })
-
-  /**
-   * Scenario 3: TypeOverride for lazy loading
-   * User uses TypeOverride to add 'lazySpring' driver loaded at runtime
-   * Expected animatedBy values: inferred keys + 'lazySpring'
-   *
-   * FIXED: AnimationDriverKeys now always includes:
-   * - 'default' (always)
-   * - InferredAnimationDriverKeys (from config)
-   * - TypeOverride keys (when defined)
-   */
-  test('TypeOverride combines with inferred', () => {
-    // Both inferred and override keys should be included
-    // 'default' is always available
-    expectTypeOf<'default'>().toMatchTypeOf<AnimationDriverKeys>()
-  })
-
-  /**
-   * Scenario 4: Both multiple drivers + TypeOverride
-   * Config: { default: css, spring: moti }
-   * Override: 'physics'
-   * Expected: 'default' | 'spring' | 'physics'
-   *
-   * FIXED: The union type combines all sources
-   */
-  test('combined multiple drivers and override', () => {
-    // All keys should be available from both sources
-    // Note: actual inference depends on user's TamaguiConfig setup
-    expectTypeOf<'default'>().toMatchTypeOf<AnimationDriverKeys>()
-  })
-})
-
-// =============================================================================
-// Documentation: Applied fixes
-// =============================================================================
-
-// =============================================================================
-// Test: ExtractAnimationDriverKeys helper
-// =============================================================================
-
-describe('ExtractAnimationDriverKeys helper', () => {
-  // Internal helper type for testing - mirrors the one in types.tsx
-  type ExtractAnimationDriverKeys<E> =
-    E extends AnimationDriver<any>
-      ? 'default'
-      : E extends { default: AnimationDriver<any> }
-        ? Extract<keyof E, string>
-        : 'default'
-
-  test('single driver returns "default"', () => {
-    type Result = ExtractAnimationDriverKeys<MockCSSDriver>
-    expectTypeOf<Result>().toEqualTypeOf<'default'>()
-  })
-
-  test('multi-driver returns all keys', () => {
-    type MultiDriverConfig = {
-      default: MockCSSDriver
-      spring: MockSpringDriver
-    }
-    type Result = ExtractAnimationDriverKeys<MultiDriverConfig>
-    expectTypeOf<'default'>().toMatchTypeOf<Result>()
-    expectTypeOf<'spring'>().toMatchTypeOf<Result>()
-  })
-
-  test('multi-driver with css key returns all keys', () => {
-    type MultiDriverConfig = {
-      default: MockCSSDriver
-      css: MockSpringDriver
-    }
-    type Result = ExtractAnimationDriverKeys<MultiDriverConfig>
-    expectTypeOf<'default'>().toMatchTypeOf<Result>()
-    expectTypeOf<'css'>().toMatchTypeOf<Result>()
-  })
-})
-
-/**
- * SUMMARY OF APPLIED TYPE FIXES:
- *
- * 1. CreateTamaguiConfig (line ~737):
- *    FIXED: Changed from `animations: AnimationDriver<E>`
- *    To: `animations: AnimationDriver<E> | AnimationsConfigObject`
- *    This preserves the multi-driver object shape for type inference.
- *
- * 2. AnimationDriverKeys (line ~888-895):
- *    FIXED: Changed from conditional (inferred OR override)
- *    To: Union of all sources:
- *      | 'default'
- *      | InferredAnimationDriverKeys
- *      | (TypeOverride extends 1 ? never : TypeOverride)
- *    This ensures both config-defined AND lazy-loaded drivers are available.
- *
- * 3. InferredAnimationDriverKeys (line 879-886):
- *    No changes needed - works correctly with the above fixes.
- *    Properly infers 'default' for single driver and keyof for multi-driver.
- *
- * 4. TransitionKeys (line 868-876):
- *    No changes needed - already handles both single and multi-driver cases.
- *    Uses default driver's config for animation names.
- */

package/src/helpers/createMediaStyle.ts

@@ -1,167 +0,0 @@
-import { getSetting } from '../config'
-import { mediaObjectToString } from './mediaObjectToString'
-import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
-import { getGroupPropParts, type GroupParts } from './getGroupPropParts'
-
-// TODO have this be used by extractMediaStyle in tamagui static
-// not synced to static/constants for now
-export const MEDIA_SEP = '_'
-
-let prefixes: Record<string, string> | null = null
-let selectors: Record<string, string> | null = null
-
-// call this when media config changes to reset cached prefixes/selectors
-export function resetMediaStyleCache() {
-  prefixes = null
-  selectors = null
-}
-
-const groupPseudoToPseudoCSSMap = {
-  press: 'active',
-  focusVisible: 'focus-visible',
-  focusWithin: 'focus-within',
-}
-
-const specificities = new Array(12)
-  .fill(0)
-  .map((_, i) => new Array(i).fill(':root').join(''))
-
-function getThemeOrGroupSelector(
-  name: string,
-  styleInner: string,
-  isGroup: boolean,
-  groupParts: GroupParts,
-  isTheme = false,
-  precedenceImportancePrefix = ''
-) {
-  const selectorStart = styleInner.lastIndexOf(':root') + 5
-  const selectorEnd = styleInner.lastIndexOf('{')
-  const selector = styleInner.slice(selectorStart, selectorEnd)
-  const precedenceSpace = getSetting('addThemeClassName') !== false && isTheme ? '' : ' '
-  const pseudoSelectorName = groupParts.pseudo
-    ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo
-    : undefined
-
-  const pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : ''
-  const presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`
-  const mediaSelector = `.t_${isGroup ? 'group_' : ''}${name}${pseudoSelector}`
-  return [
-    selector,
-    `${presedencePrefix}${mediaSelector} ${selector.replaceAll(':root', '')}`,
-  ] as const
-}
-
-export const createMediaStyle = (
-  styleObject: StyleObject,
-  mediaKeyIn: string,
-  mediaQueries: MediaQueries,
-  type: IsMediaType,
-  negate?: boolean,
-  priority?: number
-): MediaStyleObject => {
-  const [property, , identifier, pseudoIn, rules] = styleObject
-  const isTheme = type === 'theme'
-  const isPlatform = type === 'platform'
-  const isGroup = type === 'group'
-  const isNonWindowMedia = isTheme || isPlatform || isGroup
-  const negKey = negate ? '0' : ''
-  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
-  const id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace('-', '')}${negKey}${MEDIA_SEP}`
-
-  let styleRule = ''
-  let groupPriority = ''
-  let groupMediaKey: string | undefined
-  let containerName: string | undefined
-  let nextIdentifier = identifier.replace(ogPrefix, id)
-  let styleInner = rules
-    .map((rule) => rule.replaceAll(identifier, nextIdentifier))
-    .join(';')
-  let isHover = false
-
-  if (isNonWindowMedia) {
-    let specificity = (priority || 0) + (isGroup || isPlatform ? 1 : 0)
-
-    if (isTheme || isGroup) {
-      const groupParts = getGroupPropParts(isTheme ? 'theme-' + mediaKeyIn : mediaKeyIn)
-      const { name, media, pseudo } = groupParts
-      groupMediaKey = media
-      if (isGroup) {
-        containerName = name
-      }
-      if (pseudo === 'press' || pseudoIn === 'active') {
-        specificity += 2
-      }
-      if (pseudo === 'hover') {
-        isHover = true
-      }
-      const [selector, nextSelector] = getThemeOrGroupSelector(
-        name,
-        styleInner,
-        isGroup,
-        groupParts,
-        isTheme,
-        specificities[specificity]
-      )
-      // const selectors = `${nextSelector}, :root${nextSelector}`
-      // add back in the { we used to split
-      styleRule = styleInner.replace(selector, nextSelector)
-    } else {
-      const prefix = specificities[specificity]
-      // when styleInner is wrapped in @media (eg hover), inject specificity
-      // inside the block — `:root@media ...` is invalid CSS
-      styleRule =
-        prefix && styleInner[0] === '@'
-          ? styleInner.replace('{', `{${prefix}`)
-          : `${prefix}${styleInner}`
-    }
-  }
-
-  if (!isNonWindowMedia || groupMediaKey) {
-    // one time cost:
-    // TODO MOVE THIS INTO SETUP AREA AND EXPORT IT
-    if (!selectors) {
-      const mediaKeys = Object.keys(mediaQueries)
-      selectors = Object.fromEntries(
-        mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
-      )
-      prefixes = Object.fromEntries(
-        mediaKeys.map((k, index) => [k, new Array(index + 1).fill(':root').join('')])
-      )
-    }
-
-    const mediaKey = groupMediaKey || mediaKeyIn
-    const mediaSelector = selectors[mediaKey]
-    const screenStr = negate ? 'not all and ' : ''
-    const mediaQuery = `${screenStr}${mediaSelector}`
-    const precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes![mediaKey]
-    const prefix = groupMediaKey ? `@container ${containerName}` : '@media'
-
-    if (groupMediaKey) {
-      styleInner = styleRule
-    }
-
-    // combines media queries if they already exist
-    if (styleInner.includes(prefix)) {
-      // combine
-      styleRule = styleInner
-        .replace('{', ` and ${mediaQuery} {`)
-        // temp bugfix can be better done
-        .replace(`and screen and`, `and`)
-    } else {
-      styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`
-    }
-
-    // add @supports for legacy browser support to not break container queries
-    if (groupMediaKey) {
-      styleRule = `@supports (contain: ${
-        getSetting('webContainerType') || 'inline-size'
-      }) {${styleRule}}`
-    }
-  }
-
-  if (isHover) {
-    styleRule = `@media (hover:hover){${styleRule}}`
-  }
-
-  return [property, undefined, nextIdentifier, undefined, [styleRule]]
-}

package/src/helpers/getGroupPropParts.ts

@@ -1,46 +0,0 @@
-import { getMedia } from './mediaState'
-import { pseudoPriorities } from './pseudoDescriptors'
-
-export type GroupParts = { name: string; pseudo?: string; media?: string }
-
-// convert kebab-case to camelCase (e.g. "focus-visible" -> "focusVisible")
-function kebabToCamel(str: string): string {
-  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
-}
-
-// validate that a string is a known pseudo selector
-function isValidPseudo(str: string | undefined): str is string {
-  if (!str) return false
-  // pseudoPriorities uses camelCase keys, but parsed candidates may be kebab-case
-  return kebabToCamel(str) in pseudoPriorities
-}
-
-export function getGroupPropParts(groupProp: string): GroupParts {
-  const m = getMedia()
-  const [_, name, a, b, c] = groupProp.split('-')
-  // check 2-part media key first (e.g. "max-md"), then 1-part
-  const m2 = a && b ? `${a}-${b}` : ''
-  const media = (m2 && m2 in m && m2) || (a && a in m && a) || undefined
-  let pseudoCandidate = media
-    ? media === m2
-      ? c
-      : b
-        ? `${b}${c ? `-${c}` : ''}`
-        : undefined
-    : a
-      ? `${a}${b ? `-${b}` : ''}${c ? `-${c}` : ''}`
-      : undefined
-
-  // only treat as pseudo if it's a known pseudo selector
-  // otherwise it might be an unrecognized media query
-  if (pseudoCandidate && !isValidPseudo(pseudoCandidate)) {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn(
-        `Unknown group prop part "${pseudoCandidate}" in "${groupProp}". If this is a media query, ensure it's defined in your tamagui config.`
-      )
-    }
-    pseudoCandidate = undefined
-  }
-
-  return { name, pseudo: pseudoCandidate, media }
-}