@tamagui/web 1.129.12 → 1.129.13

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -65,7 +65,7 @@ const PROP_SPLIT = "-";
 function isValidStyleKey(key, validStyles, accept) {
   return key in validStyles ? !0 : accept && key in accept;
 }
-const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, elementType, startedUnhydrated, debug) => {
+const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug) => {
   conf = conf || (0, import_config.getConfig)();
   const animationDriver = componentContext?.animationDriver || conf.animations;
   import_constants.isWeb && styleProps.isAnimated && animationDriver.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
@@ -85,7 +85,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     } = staticConfig,
     viewProps = {},
     mediaState = styleProps.mediaState || import_useMedia.mediaState,
-    usedKeys = {},
     shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass && !styleProps.isAnimated,
     rulesToInsert = {},
     classNames = {};
@@ -108,7 +107,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     staticConfig,
     style: null,
     theme,
-    usedKeys,
+    usedKeys: {},
     viewProps,
     context: componentContext,
     debug
@@ -123,7 +122,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       }
     }));
   }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && import_isDevTools.isDevTools && (console.groupCollapsed("\u{1F539} getSplitStyles \u{1F447}"), (0, import_log.log)({
     props,
     staticConfig,
     shouldDoClasses,
@@ -134,7 +133,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     theme: {
       ...theme
     }
-  }), console.groupEnd());
+  }));
   const {
       asChild
     } = props,
@@ -165,7 +164,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         continue;
       }
     }
-    if (process.env.NODE_ENV, disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit) continue;
+    if (process.env.NODE_ENV, disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit) continue;
     if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
       if (keyInit === "group") {
         const identifier = `t_group_${valInit}`,
@@ -174,7 +173,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       }
       continue;
     }
-    const valInitType = typeof valInit;
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
     if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
       keyInit = keyInit.replace("data-", ""), viewProps.dataSet ||= {}, viewProps.dataSet[keyInit] = valInit;
@@ -251,12 +249,13 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit),
       isMediaOrPseudo = !!(isMedia || isPseudo);
     if (isMediaOrPseudo && keyInit.startsWith("$group-")) {
-      const parts = keyInit.split("-");
+      const parts = keyInit.split("-"),
+        plen = parts.length;
       if (
       // check if its actually a simple group selector to avoid breaking selectors
-      parts.length === 2 || parts.length === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
+      plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
         const name = parts[1];
-        componentContext?.groups.subscribe && !componentContext?.groups.state[name] && (keyInit = keyInit.replace("$group-", "$group-true-"));
+        groupContext && !groupContext?.[name] && (keyInit = keyInit.replace("$group-", "$group-true-"));
       }
     }
     const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
@@ -276,6 +275,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       variant: variants?.[keyInit],
       isVariant,
       isHOCShouldPassThrough,
+      usedKeys: {
+        ...styleState.usedKeys
+      },
       parentStaticConfig
     })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !noSkip && keyInit in import_skipProps.skipProps) continue;
     (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
@@ -286,9 +288,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         viewProps[key] = val;
         return;
       }
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key), (0, import_log.log)(val), console.groupEnd()), val == null || key in usedKeys) return;
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key), (0, import_log.log)(val), console.groupEnd()), val == null) return;
       if (!isHOC && isValidStyleKey(key, validStyles, accept)) {
-        mergeStyle(styleState, key, val);
+        mergeStyle(styleState, key, val, 1);
         return;
       }
       if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
@@ -316,7 +318,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           process.env.NODE_ENV === "development" && debug === "verbose" && console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier]);
+            addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier];
           }
         }
         if (!shouldDoClasses || isExit || isEnter) {
@@ -334,9 +336,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           for (const pkey in pseudoStyleObject) {
             const val2 = pseudoStyleObject[pkey];
             if (isDisabled) applyDefaultStyle(pkey, styleState);else {
-              const curImportance = usedKeys[pkey] || 0,
+              const curImportance = styleState.usedKeys[pkey] || 0,
                 shouldMerge = importance >= curImportance;
-              shouldMerge && (process.env.IS_STATIC === "is_static" && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2), mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
+              shouldMerge && (process.env.IS_STATIC === "is_static" && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2), mergeStyle(styleState, pkey, val2, importance)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
                 importance,
                 curImportance,
                 pkey,
@@ -346,7 +348,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           }
           if (!isDisabled) for (const key2 in val) {
             const k = shorthands[key2] || key2;
-            usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
+            styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
           }
         }
         return;
@@ -356,7 +358,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         const hasSpace = val.space,
           mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
         if (hasMedia ||= !0, (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !(0, import_isActivePlatform.isActivePlatform)(key)) return;
-        if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
+        process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
           key,
           val,
           props,
@@ -364,15 +366,15 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           acceptsClassName,
           componentState,
           mediaState
-        }), shouldDoClasses) {
+        });
+        const priority = mediaStylesSeen;
+        if (mediaStylesSeen += 1, shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, !1);
           if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
-            const importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
-            importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`));
+            const importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", styleState, !0);
+            importance && (space = val.space, styleState.usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`));
           }
-          const mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle),
-            priority = mediaStylesSeen;
-          mediaStylesSeen += 1;
+          const mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle);
           for (const style of mediaStyles) {
             const property = style[import_helpers.StyleObjectProperty],
               isSubStyle = property[0] === "$";
@@ -381,11 +383,11 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
             process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
             const subKey = isSubStyle ? style[2] : "",
               fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), classNames[fullKey] = out[import_helpers.StyleObjectIdentifier]);
+            addStyleToInsertRules(rulesToInsert, out), classNames[fullKey] = out[import_helpers.StyleObjectIdentifier];
           }
         } else {
           let mergeMediaStyle = function (key2, val2) {
-            styleState.style ||= {}, mergeMediaByImportance(styleState, mediaKeyShort, key2, val2, usedKeys, mediaState[mediaKeyShort], importanceBump, debug) && key2 === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+            styleState.style ||= {}, mergeMediaByImportance(styleState, mediaKeyShort, key2, val2, mediaState[mediaKeyShort], importanceBump, debug) && key2 === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
           };
           const isThemeMedia = isMedia === "theme",
             isGroupMedia = isMedia === "group";
@@ -410,14 +412,14 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
                   scheme,
                   val: val2,
                   oppositeVal
-                }), mergeStyle(styleState, subKey, mediaStyle[subKey]);
+                }), mergeStyle(styleState, subKey, mediaStyle[subKey], priority);
               }
             } else if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
           } else if (isGroupMedia) {
             const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort),
               groupName = groupInfo.name,
-              groupContext = componentContext?.groups.state[groupName];
-            if (!groupContext) {
+              groupState = groupContext?.[groupName]?.state;
+            if (!groupState) {
               process.env.NODE_ENV === "development" && debug && (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
               return;
             }
@@ -428,7 +430,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
               mediaGroups ||= /* @__PURE__ */new Set(), mediaGroups.add(groupMediaKey);
               const mediaState2 = componentGroupState?.media;
               let isActive = mediaState2?.[groupMediaKey];
-              if (!mediaState2 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`), !isActive) {
+              if (!mediaState2 && groupState.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupState.layout)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
+                ...mediaState2,
+                usedKeys: {
+                  ...styleState.usedKeys
+                }
+              }), !isActive) {
                 for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
                 return;
               }
@@ -436,15 +443,23 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
             }
             if (groupPseudoKey) {
               pseudoGroups ||= /* @__PURE__ */new Set(), pseudoGroups.add(groupName);
-              const isActive = (componentGroupState ||
+              const componentGroupPseudoState = (componentGroupState ||
                 // fallback to context initially
-                componentContext.groups.state[groupName]).pseudo?.[groupPseudoKey],
-                priority = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-              if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`), !isActive) {
+                groupContext?.[groupName].state)?.pseudo,
+                isActive = componentGroupPseudoState?.[groupPseudoKey],
+                priority2 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
+              if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority2}`, {
+                componentGroupPseudoState: {
+                  ...componentGroupPseudoState
+                },
+                usedKeys: {
+                  ...styleState.usedKeys
+                }
+              }), !isActive) {
                 for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
                 return;
               }
-              importanceBump = priority;
+              importanceBump = priority2;
             }
           }
           for (const subKey in mediaStyle) {
@@ -470,6 +485,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           ...styleState.style
         }), (0, import_log.log)("viewProps", {
           ...viewProps
+        }), (0, import_log.log)("transforms", {
+          ...styleState.flatTransforms
         });
       } catch {}
       console.groupEnd();
@@ -553,8 +570,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       } else finalClassName && (viewProps.className = finalClassName), style && (viewProps.style = style);
     }
   }
-  if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
-    console.groupCollapsed("\u{1F539} getSplitStyles ===>");
+  if (process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && import_isDevTools.isDevTools) {
+    console.groupEnd(), console.groupCollapsed("\u{1F539} getSplitStyles ===>");
     try {
       const logs = {
         ...result,
@@ -575,16 +592,17 @@ function mergeFlatTransforms(target, flatTransforms) {
     mergeTransform(target, key, val, !0);
   });
 }
-function mergeStyle(styleState, key, val, disableNormalize = !1) {
+function mergeStyle(styleState, key, val, importance, disableNormalize = !1) {
   const {
     viewProps,
     styleProps,
-    staticConfig
+    staticConfig,
+    usedKeys
   } = styleState;
-  if (key in import_helpers.stylePropsTransform) styleState.flatTransforms ||= {}, styleState.flatTransforms[key] = val;else {
+  if (!((usedKeys[key] || 0) > importance)) if (key in import_helpers.stylePropsTransform) styleState.flatTransforms ||= {}, usedKeys[key] = importance, styleState.flatTransforms[key] = val;else {
     const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
     // accept is for props not styles
-    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] =
+    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, usedKeys[key] = importance, styleState.style[key] =
     // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
     // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
     key === "transform" && Array.isArray(out) ? [...out] : out);
@@ -613,8 +631,8 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
     return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
   },
   useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {},
-  useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k) => {
-    const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k);
+  useSplitStyles = (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);
     return useInsertEffectCompat(() => {
       (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
     }, [res.rulesToInsert]), res;
@@ -668,15 +686,16 @@ function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
     delete viewProps[key], viewProps[key] = next;
   } else viewProps[key] = val;
 }
-function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump, debugProp) {
-  let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, importancesUsed, isSizeMedia);
-  if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`), importance === null) return !1;
-  if (importancesUsed[key] = importance, key in import_pseudoDescriptors.pseudoDescriptors) {
+function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, importanceBump, debugProp) {
+  const usedKeys = styleState.usedKeys;
+  let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, styleState, isSizeMedia);
+  if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`), importance === null) return !1;
+  if (key in import_pseudoDescriptors.pseudoDescriptors) {
     const descriptor = import_pseudoDescriptors.pseudoDescriptors[key],
       descriptorKey = descriptor.stateKey || descriptor.name;
     if (styleState.componentState[descriptorKey] === !1) return !1;
-    for (const subKey in value) mergeStyle(styleState, subKey, value[subKey]);
-  } else mergeStyle(styleState, key, value);
+    for (const subKey in value) mergeStyle(styleState, subKey, value[subKey], importance);
+  } else mergeStyle(styleState, key, value, importance);
   return !0;
 }
 function normalizeStyle(style) {
@@ -689,5 +708,5 @@ function normalizeStyle(style) {
 }
 function applyDefaultStyle(pkey, styleState) {
   const defaultValues = animatableDefaults[pkey];
-  defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
+  defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues, 1);
 }