@tamagui/web 1.88.18 → 1.88.20

package/dist/esm/helpers/getSplitStyles.mjs

@@ -2,6 +2,7 @@ import { currentPlatform, isClient, isServer, isWeb, useIsomorphicLayoutEffect }
 import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles, validStylesOnBaseProps } from "@tamagui/helpers";
 import { useInsertionEffect } from "react";
 import { getConfig } from "../config.mjs";
+import { skipProps } from "./skipProps.mjs";
 import { accessibilityDirectMap } from "../constants/accessibilityDirectMap.mjs";
 import { webViewFlexCompatStyles } from "../constants/constants.mjs";
 import { isDevTools } from "../constants/isDevTools.mjs";
@@ -208,9 +209,14 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       parentStaticConfig
     })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !styleProps.noSkip && keyInit in skipProps) continue;
     (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
-    const expanded = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit ? [[keyInit, valInit]] : propMapper(keyInit, valInit, styleState),
-      next = getPropMappedFontFamily(expanded);
-    if (next && (styleState.fontFamily = next), process.env.NODE_ENV === "development" && debug === "verbose") {
+    const avoidPropMap = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit,
+      expanded = avoidPropMap ? null : propMapper(keyInit, valInit, styleState);
+    if (!avoidPropMap) {
+      if (!expanded) continue;
+      const next = getPropMappedFontFamily(expanded);
+      next && (styleState.fontFamily = next);
+    }
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
       console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
       try {
         !isServer && isDevTools && (log({
@@ -238,185 +244,189 @@ current`, {
       } catch {}
       console.groupEnd();
     }
-    if (expanded) {
-      for (const [key, val] of expanded) {
-        if (val == null || key in usedKeys) continue;
-        if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps?.has(key) || IS_STATIC && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
-          passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), log({
-            val,
-            after: {
-              ...viewProps[key]
-            }
-          }), console.groupEnd());
+    let key = keyInit,
+      val = valInit;
+    const max = expanded ? expanded.length : 1;
+    for (let i = 0; i < max; i++) {
+      if (expanded) {
+        const [k, v] = expanded[i];
+        key = k, val = v;
+      }
+      if (val == null || key in usedKeys) continue;
+      if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps?.has(key) || IS_STATIC && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
+        passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), log({
+          val,
+          after: {
+            ...viewProps[key]
+          }
+        }), console.groupEnd());
+        continue;
+      }
+      if (isPseudo) {
+        if (!val) continue;
+        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames),
+          descriptor = pseudoDescriptors[key],
+          isEnter = key === "enterStyle",
+          isExit = key === "exitStyle";
+        if (!descriptor) continue;
+        if ((!shouldDoClasses || IS_STATIC) && (pseudos ||= {}, pseudos[key] ||= {}, IS_STATIC)) {
+          Object.assign(pseudos[key], pseudoStyleObject);
           continue;
         }
-        if (isPseudo) {
-          if (!val) continue;
-          const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames),
-            descriptor = pseudoDescriptors[key],
-            isEnter = key === "enterStyle",
-            isExit = key === "exitStyle";
-          if (!descriptor) continue;
-          if ((!shouldDoClasses || IS_STATIC) && (pseudos ||= {}, pseudos[key] ||= {}, IS_STATIC)) {
-            Object.assign(pseudos[key], pseudoStyleObject);
-            continue;
+        if (shouldDoClasses && !isExit) {
+          const pseudoStyles = generateAtomicStyles(pseudoStyleObject, descriptor);
+          process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), log({
+            pseudoStyleObject,
+            pseudoStyles
+          }), console.groupEnd());
+          for (const psuedoStyle of pseudoStyles) {
+            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo, !0));
           }
-          if (shouldDoClasses && !isExit) {
-            const pseudoStyles = generateAtomicStyles(pseudoStyleObject, descriptor);
-            process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), log({
-              pseudoStyleObject,
-              pseudoStyles
-            }), console.groupEnd());
-            for (const psuedoStyle of pseudoStyles) {
-              const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
-              fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo, !0));
+        }
+        if (!shouldDoClasses || isExit || isEnter) {
+          const descriptorKey = descriptor.stateKey || descriptor.name;
+          let isDisabled = componentState[descriptorKey] === !1;
+          isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, {
+            isDisabled
+          }), log({
+            pseudoStyleObject,
+            isDisabled,
+            descriptor,
+            componentState
+          }), console.groupEnd());
+          const importance = descriptor.priority;
+          for (const pkey in pseudoStyleObject) {
+            const val2 = pseudoStyleObject[pkey];
+            if (isDisabled) {
+              const defaultValues = animatableDefaults[pkey];
+              defaultValues != null && !(pkey in usedKeys) && !(pkey in styleState.style) && mergeStyle(styleState, pkey, defaultValues);
+            } else {
+              const curImportance = usedKeys[pkey] || 0,
+                shouldMerge = importance >= curImportance;
+              shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && log("    subKey", pkey, shouldMerge, {
+                importance,
+                curImportance,
+                pkey,
+                val: val2,
+                transforms: {
+                  ...styleState.transforms
+                }
+              });
             }
           }
-          if (!shouldDoClasses || isExit || isEnter) {
-            const descriptorKey = descriptor.stateKey || descriptor.name;
-            let isDisabled = componentState[descriptorKey] === !1;
-            isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, {
-              isDisabled
-            }), log({
-              pseudoStyleObject,
-              isDisabled,
-              descriptor,
-              componentState
-            }), console.groupEnd());
-            const importance = descriptor.priority;
-            for (const pkey in pseudoStyleObject) {
-              const val2 = pseudoStyleObject[pkey];
-              if (isDisabled) {
-                const defaultValues = animatableDefaults[pkey];
-                defaultValues != null && !(pkey in usedKeys) && !(pkey in styleState.style) && mergeStyle(styleState, pkey, defaultValues);
-              } else {
-                const curImportance = usedKeys[pkey] || 0,
-                  shouldMerge = importance >= curImportance;
-                shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && log("    subKey", pkey, shouldMerge, {
-                  importance,
-                  curImportance,
-                  pkey,
-                  val: val2,
-                  transforms: {
-                    ...styleState.transforms
-                  }
-                });
-              }
-            }
-            if (!isDisabled) for (const key2 in val) {
-              const k = shorthands[key2] || key2;
-              usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
-            }
+          if (!isDisabled) for (const key2 in val) {
+            const k = shorthands[key2] || key2;
+            usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
           }
-          continue;
         }
-        if (isMedia) {
-          if (!val) continue;
-          if (isMedia === "platform") {
-            const platform = key.slice(10);
-            if (
-            // supports web, ios, android
-            platform !== currentPlatform &&
-            // supports web, native
-            platform !== "web") continue;
+        continue;
+      }
+      if (isMedia) {
+        if (!val) continue;
+        if (isMedia === "platform") {
+          const platform = key.slice(10);
+          if (
+          // supports web, ios, android
+          platform !== currentPlatform &&
+          // supports web, native
+          platform !== "web") continue;
+        }
+        hasMedia ||= !0;
+        const mediaStyle = getSubStyle(styleState, key, val,
+          // TODO try true like pseudo
+          !1),
+          mediaKeyShort = key.slice(1);
+        process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
+          key,
+          val,
+          mediaStyle,
+          props,
+          shouldDoClasses,
+          componentState
+        });
+        const hasSpace = val.space;
+        if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+          if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+            const importance = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
+            importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && log(`Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`));
           }
-          hasMedia ||= !0;
-          const mediaStyle = getSubStyle(styleState, key, val,
-            // TODO try true like pseudo
-            !1),
-            mediaKeyShort = key.slice(1);
-          process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
-            key,
-            val,
-            mediaStyle,
-            props,
-            shouldDoClasses,
-            componentState
-          });
-          const hasSpace = val.space;
-          if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
-            if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
-              const importance = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
-              importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && log(`Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`));
+          const mediaStyles = getStylesAtomic(mediaStyle, debug),
+            priority = mediaStylesSeen;
+          mediaStylesSeen += 1;
+          for (const style2 of mediaStyles) {
+            const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig, isMedia, !1, priority);
+            process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
+            const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey, out.identifier, !0, !0));
+          }
+        } else {
+          const isThemeMedia = isMedia === "theme",
+            isGroupMedia = isMedia === "group";
+          if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia && !mediaState[mediaKeyShort]) continue;
+          let importanceBump = 0;
+          if (isThemeMedia) {
+            dynamicThemeAccess = !0;
+            const mediaThemeName = mediaKeyShort.slice(6);
+            if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName))) continue;
+          } else if (isGroupMedia) {
+            const groupInfo = getGroupPropParts(mediaKeyShort),
+              groupName = groupInfo.name,
+              groupContext = context?.groups.state[groupName];
+            if (!groupContext) {
+              process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
+              continue;
             }
-            const mediaStyles = getStylesAtomic(mediaStyle, debug),
-              priority = mediaStylesSeen;
-            mediaStylesSeen += 1;
-            for (const style2 of mediaStyles) {
-              const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig, isMedia, !1, priority);
-              process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
-              const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
-              fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey, out.identifier, !0, !0));
+            const groupPseudoKey = groupInfo.pseudo,
+              groupMediaKey = groupInfo.media,
+              componentGroupState = componentState.group?.[groupName];
+            if (groupMediaKey) {
+              mediaGroups ||= /* @__PURE__ */new Set(), mediaGroups.add(groupMediaKey);
+              const mediaState2 = componentGroupState?.media;
+              let isActive = mediaState2?.[groupMediaKey];
+              if (!mediaState2 && groupContext.layout && (isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)), !isActive) continue;
+              importanceBump = 2;
             }
-          } else {
-            const isThemeMedia = isMedia === "theme",
-              isGroupMedia = isMedia === "group";
-            if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia && !mediaState[mediaKeyShort]) continue;
-            let importanceBump = 0;
-            if (isThemeMedia) {
-              dynamicThemeAccess = !0;
-              const mediaThemeName = mediaKeyShort.slice(6);
-              if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName))) continue;
-            } else if (isGroupMedia) {
-              const groupInfo = getGroupPropParts(mediaKeyShort),
-                groupName = groupInfo.name,
-                groupContext = context?.groups.state[groupName];
-              if (!groupContext) {
-                process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
-                continue;
-              }
-              const groupPseudoKey = groupInfo.pseudo,
-                groupMediaKey = groupInfo.media,
-                componentGroupState = componentState.group?.[groupName];
-              if (groupMediaKey) {
-                mediaGroups ||= /* @__PURE__ */new Set(), mediaGroups.add(groupMediaKey);
-                const mediaState2 = componentGroupState?.media;
-                let isActive = mediaState2?.[groupMediaKey];
-                if (!mediaState2 && groupContext.layout && (isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)), !isActive) continue;
-                importanceBump = 2;
-              }
-              if (groupPseudoKey) {
-                if (pseudoGroups ||= /* @__PURE__ */new Set(), pseudoGroups.add(groupName), !(componentGroupState ||
-                // fallback to context initially
-                context.groups.state[groupName]).pseudo?.[groupPseudoKey]) continue;
-                importanceBump = pseudoPriorities[groupPseudoKey];
-              }
+            if (groupPseudoKey) {
+              if (pseudoGroups ||= /* @__PURE__ */new Set(), pseudoGroups.add(groupName), !(componentGroupState ||
+              // fallback to context initially
+              context.groups.state[groupName]).pseudo?.[groupPseudoKey]) continue;
+              importanceBump = pseudoPriorities[groupPseudoKey];
             }
-            for (const subKey in mediaStyle) {
-              if (subKey === "space") {
-                space = valInit.space;
-                continue;
-              }
-              mergeMediaByImportance(style, mediaKeyShort, subKey, mediaStyle[subKey], usedKeys, mediaState[mediaKeyShort], importanceBump), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+          }
+          for (const subKey in mediaStyle) {
+            if (subKey === "space") {
+              space = valInit.space;
+              continue;
             }
+            mergeMediaByImportance(style, mediaKeyShort, subKey, mediaStyle[subKey], usedKeys, mediaState[mediaKeyShort], importanceBump), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
           }
-          continue;
-        }
-        if (
-        // is HOC we can just pass through the styles as props
-        // this fixes issues where style prop got merged with wrong priority
-        !isHOC && isValidStyleKey(key, staticConfig)) {
-          mergeStyle(styleState, key, val);
-          continue;
         }
-        isVariant || (viewProps[key] = val);
+        continue;
       }
-      if (process.env.NODE_ENV === "development" && debug === "verbose") {
-        console.groupCollapsed(" \u2714\uFE0F expand complete", keyInit);
-        try {
-          log("style", {
-            ...style
-          }), log("transforms", {
-            ...transforms
-          }), log("viewProps", {
-            ...viewProps
-          });
-        } catch {}
-        console.groupEnd();
+      if (
+      // is HOC we can just pass through the styles as props
+      // this fixes issues where style prop got merged with wrong priority
+      !isHOC && isValidStyleKey(key, staticConfig)) {
+        mergeStyle(styleState, key, val);
+        continue;
       }
+      isVariant || (viewProps[key] = val);
+    }
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      try {
+        log(" \u2714\uFE0F expand complete", keyInit), log("style", {
+          ...style
+        }), log("transforms", {
+          ...transforms
+        }), log("viewProps", {
+          ...viewProps
+        });
+      } catch {}
+      console.groupEnd();
     }
   }
-  if (process.env.NODE_ENV === "development" && console.groupEnd(), props.style) if (isHOC) viewProps.style = props.style;else for (const style2 of [].concat(props.style)) style2 && (style2.$$css ? Object.assign(styleState.classNames, style2) : Object.assign(styleState.style, style2));
+  if (props.style) if (isHOC) viewProps.style = props.style;else for (const style2 of [].concat(props.style)) style2 && (style2.$$css ? Object.assign(styleState.classNames, style2) : Object.assign(styleState.style, style2));
   if (!(styleProps.noNormalize === !1) && (fixStyles(style), isWeb && !staticConfig.isReactNative && styleToCSS(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
     mergeTransform(style, key, val, !0);
   }), !staticConfig.isReactNative && !staticConfig.isHOC && !(styleProps.isAnimated && !conf.animations.supportsCSSVars) && Array.isArray(style.transform) && (style.transform = transformsToString(style.transform)), parentSplitStyles)) {
@@ -574,55 +584,14 @@ const animatableDefaults = {
     x: "translateX",
     y: "translateY"
   },
-  skipProps = {
-    untilMeasured: 1,
-    animation: 1,
-    space: 1,
-    animateOnly: 1,
-    disableClassName: 1,
-    debug: 1,
-    componentName: 1,
-    disableOptimization: 1,
-    tag: 1,
-    style: 1,
-    // handled after loop so pseudos set usedKeys and override it if necessary
-    group: 1
+  accessibilityRoleToWebRole = {
+    adjustable: "slider",
+    header: "heading",
+    image: "img",
+    link: "link",
+    none: "presentation",
+    summary: "region"
   };
-process.env.NODE_ENV === "test" && (skipProps["data-test-renders"] = 1);
-process.env.NODE_ENV !== "production" && Object.assign(skipProps, {
-  accessibilityElementsHidden: 1,
-  accessibilityIgnoresInvertColors: 1,
-  accessibilityLanguage: 1,
-  adjustsFontSizeToFit: 1,
-  allowFontScaling: 1,
-  dataDetectorType: 1,
-  dynamicTypeRamp: 1,
-  elevationAndroid: 1,
-  hapticFeedback: 1,
-  importantForAccessibility: 1,
-  lineBreakStrategyIOS: 1,
-  maxFontSizeMultiplier: 1,
-  minimumFontScale: 1,
-  needsOffscreenAlphaCompositing: 1,
-  nextFocusDown: 1,
-  nextFocusForward: 1,
-  nextFocusLeft: 1,
-  nextFocusRight: 1,
-  nextFocusUp: 1,
-  onMagicTap: 1,
-  selectionColor: 1,
-  shouldRasterizeIOS: 1,
-  suppressHighlighting: 1,
-  textBreakStrategy: 1
-});
-const accessibilityRoleToWebRole = {
-  adjustable: "slider",
-  header: "heading",
-  image: "img",
-  link: "link",
-  none: "presentation",
-  summary: "region"
-};
 function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
   if (shouldMergeObject) {
     const next = {