@tamagui/web 2.0.0-rc.3 → 2.0.0-rc.31

package/src/helpers/getSplitStyles.tsx

@@ -10,6 +10,7 @@ import {
   StyleObjectProperty,
   StyleObjectPseudo,
   StyleObjectRules,
+  nonAnimatableStyleProps,
   stylePropsText,
   stylePropsTransform,
   tokenCategories,
@@ -22,12 +23,12 @@ import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   getMediaKey,
-  mediaState as globalMediaState,
   mediaKeyMatch,
-  mediaQueryConfig,
 } from '../hooks/useMedia'
+import { mediaState as globalMediaState, mediaQueryConfig } from './mediaState'
 import type {
   AllGroupContexts,
+  AnimationDriver,
   ClassNamesObject,
   ComponentContextI,
   DebugProp,
@@ -95,7 +96,9 @@ type StyleSplitter = (
   // web-only
   elementType?: string,
   startedUnhydrated?: boolean,
-  debug?: DebugProp
+  debug?: DebugProp,
+  // resolved animation driver (respects animatedBy prop)
+  animationDriver?: AnimationDriver | null
 ) => null | GetStyleResult
 
 export const PROP_SPLIT = '-'
@@ -114,7 +117,7 @@ function normalizeGroupKey(
     (plen === 3 && pseudoPriorities[parts[parts.length - 1]])
   ) {
     const name = parts[1]
-    if (groupContext && !groupContext[name]) {
+    if (name !== 'true' && groupContext && !groupContext[name]) {
       return key.replace('$group-', '$group-true-')
     }
   }
@@ -162,10 +165,15 @@ export const getSplitStyles: StyleSplitter = (
   groupContext,
   elementType,
   startedUnhydrated,
-  debug
+  debug,
+  animationDriver
 ) => {
   conf = conf || getConfig()
-  const animationDriver = componentContext?.animationDriver || conf.animations
+  // use passed animationDriver or fall back to context/config
+  const driver =
+    animationDriver ||
+    componentContext?.animationDriver ||
+    (conf.animations as AnimationDriver)
 
   if (props.passThrough) {
     return null
@@ -175,7 +183,7 @@ export const getSplitStyles: StyleSplitter = (
   if (
     isWeb &&
     styleProps.isAnimated &&
-    animationDriver.isReactNative &&
+    driver?.isReactNative &&
     !styleProps.noNormalize
   ) {
     styleProps.noNormalize = 'values'
@@ -216,7 +224,10 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig.validStyles ||
     (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView)
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-setup`
   }
@@ -237,6 +248,8 @@ export const getSplitStyles: StyleSplitter = (
     viewProps,
     context: componentContext,
     debug,
+    // resolved animation driver (respects animatedBy prop)
+    animationDriver: driver,
   }
 
   // only used by compiler
@@ -254,7 +267,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`style-state`
   }
@@ -289,7 +305,10 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
-    if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+    if (
+      process.env.NODE_ENV === 'development' &&
+      (debug === 'profile' || (globalThis as any).time)
+    ) {
       // @ts-expect-error
       time`before-prop-${keyInit}`
     }
@@ -351,7 +370,17 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, containerCSS)
         }
       }
-      continue
+      // transition prop is skipped when it's a named animation (e.g. 'quick')
+      // but raw CSS values (from $platform-web) should pass through as style
+      if (
+        keyInit === 'transition' &&
+        typeof valInit === 'string' &&
+        !driver?.animations?.[valInit]
+      ) {
+        // not a known animation name, treat as raw CSS
+      } else {
+        continue
+      }
     }
 
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept)
@@ -409,7 +438,16 @@ export const getSplitStyles: StyleSplitter = (
         }
 
         if (keyInit === 'testID') {
-          viewProps[isReactNative ? keyInit : 'data-testid'] = valInit
+          if (isReactNative) {
+            viewProps.testID = valInit
+          } else {
+            viewProps['data-testid'] = valInit
+            // also keep testID when using RN animation driver (Animated.View
+            // from react-native-web only forwards testID, not data-testid)
+            if (styleProps.isAnimated && driver?.isReactNative) {
+              viewProps.testID = valInit
+            }
+          }
           continue
         }
 
@@ -515,7 +553,14 @@ export const getSplitStyles: StyleSplitter = (
 
     // after shouldPassThrough
     if (!noSkip) {
-      if (keyInit in skipProps) {
+      if (
+        keyInit in skipProps &&
+        !(
+          keyInit === 'transition' &&
+          typeof valInit === 'string' &&
+          !driver?.animations?.[valInit]
+        )
+      ) {
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           console.groupEnd()
         }
@@ -763,12 +808,9 @@ export const getSplitStyles: StyleSplitter = (
         const priority = mediaStylesSeen
         mediaStylesSeen += 1
 
-        // for theme media ($theme-light, $theme-dark), always generate CSS classes for proper SSR
-        // even when noClass is set (animation drivers with inline output still need theme CSS)
-        const shouldDoClassesForThisMedia =
-          shouldDoClasses || (isWeb && isMedia === 'theme')
-
-        if (shouldDoClassesForThisMedia) {
+        // for theme media ($theme-light, $theme-dark), generate CSS classes for proper SSR
+        // when noClass is set (inline animation drivers), de-opt to inline styles so the
+        if (shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, false)
           const mediaStyles = getCSSStylesAtomic(mediaStyle)
 
@@ -978,6 +1020,14 @@ export const getSplitStyles: StyleSplitter = (
 
           const mediaOriginalValues = styleOriginalValues.get(mediaStyle)
 
+          // extract transition from group pseudo styles (e.g., $group-scenario4-hover.transition)
+          if (isGroupMedia && mediaStyle.transition) {
+            styleState.pseudoTransitions ||= {}
+            styleState.pseudoTransitions[
+              `$${mediaKeyShort}` as keyof typeof styleState.pseudoTransitions
+            ] = mediaStyle.transition as any
+          }
+
           function mergeMediaStyle(key: string, val: any, originalVal?: any) {
             styleState.style ||= {}
             const didMerge = mergeMediaByImportance(
@@ -1044,7 +1094,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   } // end prop loop
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-propsend`
   }
@@ -1059,7 +1112,7 @@ export const getSplitStyles: StyleSplitter = (
 
       if (!styleProps.noExpand && !styleProps.noMergeStyle) {
         // shouldn't this be better? but breaks some tests weirdly, need to check
-        if (isWeb && (isReactNative ? !animationDriver.supportsCSS : true)) {
+        if (isWeb && (isReactNative ? driver?.inputStyle !== 'css' : true)) {
           styleToCSS(styleState.style)
         }
       }
@@ -1110,7 +1163,7 @@ export const getSplitStyles: StyleSplitter = (
       !styleProps.noNormalize &&
       !staticConfig.isReactNative &&
       !staticConfig.isHOC &&
-      (!styleProps.isAnimated || animationDriver.supportsCSS)
+      (!styleProps.isAnimated || driver?.inputStyle === 'css')
 
     if (shouldStringifyTransforms && Array.isArray(styleState.style?.transform)) {
       styleState.style.transform = transformsToString(styleState.style!.transform) as any
@@ -1129,16 +1182,20 @@ export const getSplitStyles: StyleSplitter = (
 
         for (const atomicStyle of atomic) {
           const [key, value, identifier] = atomicStyle
+
           const isAnimatedAndTransitionOnly =
             styleProps.isAnimated &&
             styleProps.noClass &&
             props.animateOnly?.includes(key)
 
-          // or not animated but you have animateOnly
-          // (moves it to style={}, nice to avoid generating lots of classnames)
+          // animateOnly properties should always use className on server and initial
+          // client render to avoid hydration mismatch (server has isAnimated=false but
+          // client has isAnimated=true for CSS driver, causing different style output)
           const nonAnimatedTransitionOnly =
             !isAnimatedAndTransitionOnly &&
             !styleProps.isAnimated &&
+            isClient &&
+            driver?.outputStyle === 'css' &&
             props.animateOnly?.includes(key)
 
           if (isAnimatedAndTransitionOnly) {
@@ -1167,6 +1224,38 @@ export const getSplitStyles: StyleSplitter = (
         }
       }
     }
+
+    // when noClass is true (inline animation driver) extract non-animatable
+    // base styles to atomic CSS classNames so the driver doesn't manage them
+    // skip for RNW animation drivers since their AnimatedView doesn't forward classNames
+    if (
+      !styleProps.noMergeStyle &&
+      styleState.style &&
+      !shouldDoClasses &&
+      styleProps.isAnimated &&
+      !driver?.isReactNative
+    ) {
+      if (!styleState.style['$$css']) {
+        const toConvert: Record<string, any> = {}
+        let hasProps = false
+        const animateOnly = props.animateOnly as string[] | undefined
+        for (const key in styleState.style) {
+          if (key in nonAnimatableStyleProps) {
+            toConvert[key] = styleState.style[key]
+            delete styleState.style[key]
+            hasProps = true
+          }
+        }
+        if (hasProps) {
+          const atomic = getCSSStylesAtomic(toConvert)
+          for (const atomicStyle of atomic) {
+            addStyleToInsertRules(rulesToInsert, atomicStyle)
+            classNames[atomicStyle[StyleObjectProperty]] =
+              atomicStyle[StyleObjectIdentifier]
+          }
+        }
+      }
+    }
   }
 
   // merge after the prop loop - and always keep it on style dont turn into className except if RN gives us
@@ -1219,7 +1308,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-pre-result`
   }
@@ -1236,6 +1328,7 @@ export const getSplitStyles: StyleSplitter = (
     pseudoGroups,
     mediaGroups,
     overriddenContextProps: styleState.overriddenContextProps,
+    pseudoTransitions: styleState.pseudoTransitions,
   }
 
   const asChildExceptStyleLike =
@@ -1247,35 +1340,43 @@ export const getSplitStyles: StyleSplitter = (
 
       if (process.env.TAMAGUI_TARGET === 'web') {
         // merge className and style back into viewProps:
-        let fontFamily =
-          isText || isInput
-            ? styleState.fontFamily || staticConfig.defaultProps?.fontFamily
-            : null
+        // only emit font class if fontFamily was explicitly in props (not from defaults)
+        let fontFamily = isText || isInput ? styleState.fontFamily : null
         if (fontFamily && fontFamily[0] === '$') {
           fontFamily = fontFamily.slice(1)
         }
         const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
         const groupClassName = props.group ? `t_group_${props.group}` : ''
         const componentNameFinal = props.componentName || staticConfig.componentName
-        const componentClassName =
-          props.asChild || !componentNameFinal ? '' : `is_${componentNameFinal}`
+        const componentNameClassName =
+          props.asChild || !componentNameFinal || componentNameFinal === 'Text'
+            ? ''
+            : `is_${componentNameFinal}`
 
         let classList: string[] = []
-        if (componentClassName) classList.push(componentClassName)
+        if (componentNameClassName) classList.push(componentNameClassName)
+        // is_View gets base flex styles + font reset, is_Text gets base text styles
+        if (!isText) classList.push('is_View')
+        else classList.push('is_Text')
         if (fontFamilyClassName) classList.push(fontFamilyClassName)
         if (classNames) classList.push(Object.values(classNames).join(' '))
         if (groupClassName) classList.push(groupClassName)
         if (props.className) classList.push(props.className)
         const finalClassName = classList.join(' ')
 
-        if (styleProps.isAnimated && isReactNative) {
+        // use $$css for RNW components OR when animated with RNW driver
+        // (driver's AnimatedView doesn't forward className)
+        const needsCssStyles =
+          isReactNative || (styleProps.isAnimated && driver?.isReactNative)
+
+        if (styleProps.isAnimated && driver?.inputStyle === 'css') {
+          // CSS animation driver uses className directly
+          viewProps.className = finalClassName
           if (style) {
             viewProps.style = style as any
           }
-          if (animationDriver?.supportsCSS) {
-            viewProps.className = finalClassName
-          }
-        } else if (isReactNative) {
+        } else if (needsCssStyles) {
+          // RNW or RNW-animated: apply classNames via $$css
           let cnStyles: Record<string, unknown> | undefined
           for (const name of finalClassName.split(' ')) {
             cnStyles ||= { $$css: true }
@@ -1285,6 +1386,7 @@ export const getSplitStyles: StyleSplitter = (
             ? [...(Array.isArray(style) ? style : [style]), cnStyles]
             : [style]
         } else {
+          // regular web: use className directly
           if (finalClassName) {
             viewProps.className = finalClassName
           }
@@ -1327,7 +1429,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-done`
   }
@@ -1410,6 +1515,33 @@ export const getSubStyle = (
     const val = styleIn[key]
     key = conf.shorthands[key] || key
 
+    // extract transition from pseudo-style props (e.g., hoverStyle.transition)
+    // store it separately for animation drivers to use for enter/exit timing
+    if (key === 'transition') {
+      styleState.pseudoTransitions ||= {}
+      styleState.pseudoTransitions[subKey as keyof typeof styleState.pseudoTransitions] =
+        val
+      // for CSS driver, also add transition to CSS output so native CSS transitions work
+      // group styles ($group-*) need !important to override inline base transition
+      const driver = styleState.animationDriver
+      if (driver?.outputStyle === 'css') {
+        const animationConfig = driver.animations?.[val as string]
+        if (animationConfig) {
+          const important = subKey[0] === '$' ? ' !important' : ''
+          styleOut['transition'] = `all ${animationConfig}${important}`
+        }
+      }
+      // not a known animation name, pass through as raw CSS
+      if (
+        !styleOut['transition'] &&
+        typeof val === 'string' &&
+        !driver?.animations?.[val]
+      ) {
+        styleOut['transition'] = val
+      }
+      continue
+    }
+
     const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
     if (shouldSkip) {
       continue
@@ -1498,8 +1630,10 @@ const useInsertEffectCompat = isWeb
   : () => {}
 
 // perf: ...args a bit expensive on native
-export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l) => {
-  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l)
+export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+  'use no memo'
+
+  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m)
 
   if (process.env.TAMAGUI_TARGET !== 'native') {
     useInsertEffectCompat(() => {

package/src/helpers/getThemeCSSRules.ts

@@ -113,13 +113,10 @@ export function getThemeCSSRules(props: {
     const selectorsString =
       selectors
         .map((x) => {
-          const rootSep =
-            isBaseTheme(x) &&
-            (getSetting('addThemeClassName') === 'html' ||
-              getSetting('addThemeClassName') === 'body')
-              ? ''
-              : ' '
-          return `:root${rootSep}${x}`
+          const addTo = getSetting('addThemeClassName')
+          const isOnRoot = isBaseTheme(x) && (addTo === 'html' || addTo === 'body')
+          if (!isOnRoot) return `:root ${x}`
+          return `${addTo === 'body' ? 'body' : ':root'}${x}`
         })
         .join(', ') + `, .tm_xxt`
 
@@ -127,11 +124,6 @@ export function getThemeCSSRules(props: {
     cssRuleSets.push(css)
 
     if (getSetting('shouldAddPrefersColorThemes')) {
-      const bgString = theme.background
-        ? `background:${variableToString(theme.background)};`
-        : ''
-      const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
-      const bodyRules = `body{${bgString}${fgString}}`
       const isDark = themeName.startsWith('dark')
       const baseName = isDark ? 'dark' : 'light'
       const lessSpecificSelectors = selectors
@@ -148,10 +140,20 @@ export function getThemeCSSRules(props: {
         .filter(Boolean)
         .join(', ')
 
+      // only emit body background/color for base themes, not every sub-theme
+      const isBase = !themeName.includes('_')
+      let bodyRulesString = ''
+      if (isBase) {
+        const bgString = theme.background
+          ? `background:${variableToString(theme.background)};`
+          : ''
+        const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
+        bodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}\n    ` : ''
+      }
+
       const themeRules = `${lessSpecificSelectors} {${vars}}`
       const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
-    ${bodyRules}
-    ${themeRules}
+    ${bodyRulesString}${themeRules}
   }`
       cssRuleSets.push(prefersMediaSelectors)
     }