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

package/dist/esm/helpers/getSplitStyles.js

@@ -1,650 +0,0 @@
-import {
-  isClient,
-  isWeb,
-  useIsomorphicLayoutEffect
-} from "@tamagui/constants";
-import {
-  StyleObjectIdentifier,
-  StyleObjectProperty,
-  StyleObjectPseudo,
-  StyleObjectRules,
-  stylePropsText,
-  stylePropsTransform,
-  tokenCategories,
-  validPseudoKeys,
-  validStyles as validStylesView
-} from "@tamagui/helpers";
-import React from "react";
-import { getConfig } from "../config";
-import { isDevTools } from "../constants/isDevTools";
-import {
-  getMediaImportanceIfMoreImportant,
-  getMediaKey,
-  mediaState as globalMediaState,
-  mediaKeyMatch,
-  mediaQueryConfig
-} from "../hooks/useMedia";
-import { createMediaStyle } from "./createMediaStyle";
-import { fixStyles } from "./expandStyles";
-import { getCSSStylesAtomic, getStyleAtomic, styleToCSS } from "./getCSSStylesAtomic";
-import { getDefaultProps } from "./getDefaultProps";
-import "./getDynamicVal";
-import { getGroupPropParts } from "./getGroupPropParts";
-import { insertStyleRules, shouldInsertStyleRules, updateRules } from "./insertStyleRule";
-import { isActivePlatform } from "./isActivePlatform";
-import { isActiveTheme } from "./isActiveTheme";
-import { log } from "./log";
-import { normalizeValueWithProperty } from "./normalizeValueWithProperty";
-import { propMapper } from "./propMapper";
-import {
-  pseudoDescriptors,
-  pseudoPriorities
-} from "./pseudoDescriptors";
-import { skipProps } from "./skipProps";
-import { sortString } from "./sortString";
-import { transformsToString } from "./transformsToString";
-let conf;
-const styleOriginalValues = /* @__PURE__ */ new WeakMap(), PROP_SPLIT = "-";
-function normalizeGroupKey(key, groupContext) {
-  const parts = key.split("-"), plen = parts.length;
-  if (
-    // check if its actually a simple group selector to avoid breaking selectors
-    plen === 2 || plen === 3 && pseudoPriorities[parts[parts.length - 1]]
-  ) {
-    const name = parts[1];
-    if (groupContext && !groupContext[name])
-      return key.replace("$group-", "$group-true-");
-  }
-  return key;
-}
-function isValidStyleKey(key, validStyles, accept) {
-  return key in validStyles ? !0 : accept && key in accept;
-}
-const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug) => {
-  conf = conf || getConfig();
-  const animationDriver = componentContext?.animationDriver || conf.animations;
-  if (props.passThrough)
-    return null;
-  isWeb && styleProps.isAnimated && animationDriver.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-  const { shorthands } = conf, {
-    isHOC,
-    isText,
-    isInput,
-    variants,
-    isReactNative,
-    inlineProps,
-    inlineWhenUnflattened,
-    parentStaticConfig,
-    acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || globalMediaState, shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass, rulesToInsert = {}, classNames = {};
-  let space = props.space, pseudos = null, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0;
-  const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView);
-  process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
-  const styleState = {
-    classNames,
-    conf,
-    props,
-    styleProps,
-    componentState,
-    staticConfig,
-    style: null,
-    theme,
-    usedKeys: {},
-    viewProps,
-    context: componentContext,
-    debug
-  };
-  if (process.env.IS_STATIC === "is_static") {
-    const { fallbackProps } = styleProps;
-    fallbackProps && (styleState.props = new Proxy(props, {
-      get(_, key, val) {
-        return Reflect.has(props, key) ? Reflect.get(props, key) : Reflect.get(fallbackProps, key);
-      }
-    }));
-  }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug === "verbose" && isClient && isDevTools && (console.groupCollapsed("\u{1F539} getSplitStyles \u{1F447}"), log({
-    props,
-    staticConfig,
-    shouldDoClasses,
-    styleProps,
-    rulesToInsert,
-    componentState,
-    styleState,
-    theme: { ...theme }
-  }));
-  const { asChild } = props, { accept } = staticConfig, { noSkip, disableExpandShorthands, noExpand, styledContext } = styleProps, { webContainerType } = conf.settings, parentVariants = parentStaticConfig?.variants;
-  for (const keyOg in props) {
-    let keyInit = keyOg, valInit = props[keyInit];
-    if (keyInit === "children") {
-      viewProps[keyInit] = valInit;
-      continue;
-    }
-    if (process.env.NODE_ENV === "development" && debug === "profile" && time`before-prop-${keyInit}`, process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle")
-      continue;
-    if (accept) {
-      const accepted = accept[keyInit];
-      if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") {
-        viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass);
-        continue;
-      }
-    }
-    if (disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className") continue;
-    if (asChild) {
-      const defaults = getDefaultProps(staticConfig);
-      if (defaults) {
-        const defaultVal = defaults[keyOg] ?? defaults[keyInit];
-        if (defaultVal !== void 0 && valInit === defaultVal)
-          continue;
-      }
-    }
-    if (keyInit in skipProps && !noSkip && !isHOC) {
-      if (keyInit === "group") {
-        const identifier = `t_group_${valInit}`, containerCSS = [
-          "continer",
-          void 0,
-          identifier,
-          void 0,
-          [
-            `.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`
-          ]
-        ];
-        addStyleToInsertRules(rulesToInsert, containerCSS);
-      }
-      continue;
-    }
-    let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
-    if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
-      keyInit = keyInit.replace("data-", ""), viewProps.dataSet ||= {}, viewProps.dataSet[keyInit] = valInit;
-      continue;
-    }
-    if (!noExpand) {
-      if (keyInit === "disabled" && valInit === !0 && (viewProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.disabled = !0), !variants?.disabled))
-        continue;
-      if (keyInit === "testID") {
-        viewProps[isReactNative ? keyInit : "data-testid"] = valInit;
-        continue;
-      }
-      if (keyInit === "id") {
-        viewProps.id = valInit;
-        continue;
-      }
-    }
-    let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
-    const isStyleLikeKey = isValidStyleKeyInit || isVariant;
-    let isPseudo = keyInit in validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo ? getMediaKey(keyInit) : !1, isMediaOrPseudo = !!(isMedia || isPseudo);
-    isMediaOrPseudo && isMedia === "group" && (keyInit = normalizeGroupKey(keyInit, groupContext));
-    const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
-    if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web"))
-      continue;
-    const shouldPassProp = !isStyleProp && isHOC || // is in parent variants
-    isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit), parentVariant = parentVariants?.[keyInit], isHOCShouldPassThrough = !!(isHOC && (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
-      `  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`
-    ), log({ isVariant, valInit, shouldPassProp }), isClient && log({
-      variants,
-      variant: variants?.[keyInit],
-      isVariant,
-      isHOCShouldPassThrough,
-      usedKeys: { ...styleState.usedKeys },
-      parentStaticConfig
-    })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), !isVariant))
-      continue;
-    if (!noSkip && keyInit in skipProps) {
-      process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
-      continue;
-    }
-    (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
-    const disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
-    if (propMapper(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal) => {
-      const isStyledContextProp = styledContext && key in styledContext;
-      if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
-        viewProps[key] = val;
-        return;
-      }
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key), log(val), console.groupEnd()), val == null) return;
-      if (!isHOC && isValidStyleKey(key, validStyles, accept)) {
-        mergeStyle(styleState, key, val, 1, !1, originalVal);
-        return;
-      }
-      if (isPseudo = key in validPseudoKeys, isMedia = isPseudo ? !1 : getMediaKey(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, isMedia === "group" && (key = normalizeGroupKey(key, groupContext)), (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])) {
-        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());
-        return;
-      }
-      if (isPseudo) {
-        if (!val) return;
-        const pseudoStyleObject = getSubStyle(
-          styleState,
-          key,
-          val,
-          styleProps.noClass && process.env.IS_STATIC !== "is_static"
-        );
-        if ((!shouldDoClasses || process.env.IS_STATIC === "is_static") && (pseudos ||= {}, pseudos[key] ||= {}, process.env.IS_STATIC === "is_static")) {
-          Object.assign(pseudos[key], pseudoStyleObject);
-          return;
-        }
-        const descriptor = pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
-        if (!descriptor)
-          return;
-        if (shouldDoClasses && !isExit) {
-          const pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor);
-          process.env.NODE_ENV === "development" && debug === "verbose" && console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
-          for (const psuedoStyle of pseudoStyles) {
-            const fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-            addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[StyleObjectIdentifier];
-          }
-        }
-        if (!shouldDoClasses || isExit || isEnter) {
-          const descriptorKey = descriptor.stateKey || descriptor.name;
-          let isDisabled = componentState[descriptorKey] === !1;
-          isExit && (isDisabled = !styleProps.isExiting), isEnter && componentState.unmounted === !1 && (isDisabled = !0), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), log({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
-          const importance = descriptor.priority, pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
-          for (const pkey in pseudoStyleObject) {
-            const val2 = pseudoStyleObject[pkey];
-            if (isDisabled)
-              applyDefaultStyle(pkey, styleState);
-            else {
-              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,
-                importance,
-                !1,
-                pseudoOriginalValues?.[pkey]
-              )), process.env.NODE_ENV === "development" && debug === "verbose" && log("    subKey", pkey, shouldMerge, {
-                importance,
-                curImportance,
-                pkey,
-                val: val2
-              });
-            }
-          }
-          if (!isDisabled)
-            for (const key2 in val) {
-              const k = shorthands[key2] || key2;
-              styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
-            }
-        }
-        return;
-      }
-      if (isMedia) {
-        if (!val) return;
-        const mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
-        if (hasMedia ||= !0, (val.space || !shouldDoClasses || styleProps.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !isActivePlatform(key))
-          return;
-        process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
-          key,
-          val,
-          props,
-          shouldDoClasses,
-          acceptsClassName,
-          componentState,
-          mediaState
-        });
-        const priority = mediaStylesSeen;
-        if (mediaStylesSeen += 1, shouldDoClasses || isWeb && isMedia === "theme") {
-          const mediaStyle = getSubStyle(styleState, key, val, !1), mediaStyles = getCSSStylesAtomic(mediaStyle);
-          for (const style of mediaStyles) {
-            const property = style[StyleObjectProperty], isSubStyle = property[0] === "$";
-            if (isSubStyle && !isActivePlatform(property))
-              continue;
-            const out = createMediaStyle(
-              style,
-              mediaKeyShort,
-              mediaQueryConfig,
-              isMedia,
-              !1,
-              priority
-            );
-            process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
-            const subKey = isSubStyle ? style[2] : "", fullKey = `${style[StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[StyleObjectPseudo] || ""}`;
-            addStyleToInsertRules(rulesToInsert, out), classNames[fullKey] = out[StyleObjectIdentifier];
-          }
-        } else {
-          let mergeMediaStyle = function(key2, val2, originalVal2) {
-            styleState.style ||= {}, mergeMediaByImportance(
-              styleState,
-              mediaKeyShort,
-              key2,
-              val2,
-              mediaState[mediaKeyShort],
-              importanceBump,
-              debug,
-              originalVal2
-            ) && key2 === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
-          };
-          const isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
-          if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia) {
-            if (!mediaState[mediaKeyShort]) {
-              process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
-              return;
-            }
-            process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
-          }
-          const mediaStyle = getSubStyle(styleState, key, val, !0);
-          let importanceBump = 0;
-          if (isThemeMedia) {
-            if (dynamicThemeAccess = !0, !(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort)))
-              return;
-          } else if (isGroupMedia) {
-            const groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext?.[groupName]?.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
-            if (!groupState) {
-              process.env.NODE_ENV === "development" && debug && log(`No parent with group prop, skipping styles: ${groupName}`), pseudoGroups ||= /* @__PURE__ */ new Set();
-              return;
-            }
-            const componentGroupState = componentState.group?.[groupName];
-            if (groupMediaKey) {
-              mediaGroups ||= /* @__PURE__ */ new Set(), mediaGroups.add(groupMediaKey);
-              const mediaState2 = componentGroupState?.media;
-              let isActive = mediaState2?.[groupMediaKey];
-              if (!mediaState2 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), process.env.NODE_ENV === "development" && debug === "verbose" && log(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
-                ...mediaState2,
-                usedKeys: { ...styleState.usedKeys }
-              }), !isActive) {
-                for (const pkey in mediaStyle)
-                  applyDefaultStyle(pkey, styleState);
-                return;
-              }
-              importanceBump = 2;
-            }
-            if (groupPseudoKey) {
-              pseudoGroups ||= /* @__PURE__ */ new Set(), pseudoGroups.add(groupName);
-              const componentGroupPseudoState = (componentGroupState || // fallback to context initially
-              groupContext?.[groupName].state)?.pseudo, isActive = componentGroupPseudoState?.[groupPseudoKey], priority2 = pseudoPriorities[groupPseudoKey];
-              if (process.env.NODE_ENV === "development" && debug === "verbose" && 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 = priority2;
-            }
-          }
-          const mediaOriginalValues = styleOriginalValues.get(mediaStyle);
-          for (const subKey in mediaStyle)
-            if (subKey !== "space")
-              if (subKey[0] === "$") {
-                if (!isActivePlatform(subKey) || !isActiveTheme(subKey, themeName)) continue;
-                const subOriginalValues = styleOriginalValues.get(
-                  mediaStyle[subKey]
-                );
-                for (const subSubKey in mediaStyle[subKey])
-                  mergeMediaStyle(
-                    subSubKey,
-                    mediaStyle[subKey][subSubKey],
-                    subOriginalValues?.[subSubKey]
-                  );
-              } else
-                mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey]);
-        }
-        return;
-      }
-      if (!isVariant) {
-        if (isStyledContextProp)
-          return;
-        viewProps[key] = val;
-      }
-    }), process.env.NODE_ENV === "development" && debug === "verbose") {
-      try {
-        log(" \u2714\uFE0F expand complete", keyInit), log("style", { ...styleState.style }), log("viewProps", { ...viewProps }), log("transforms", { ...styleState.flatTransforms });
-      } catch {
-      }
-      console.groupEnd();
-    }
-  }
-  if (process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && (fixStyles(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && isWeb && (!isReactNative || !animationDriver.supportsCSS) && styleToCSS(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, mergeFlatTransforms(styleState.style, styleState.flatTransforms)), parentSplitStyles)) {
-    if (shouldDoClasses)
-      for (const key in parentSplitStyles.classNames) {
-        const val = parentSplitStyles.classNames[key];
-        styleState.style && key in styleState.style || key in classNames || (classNames[key] = val);
-      }
-    if (!shouldDoClasses)
-      for (const key in parentSplitStyles.style)
-        key in classNames || styleState.style && key in styleState.style || (styleState.style ||= {}, styleState.style[key] = parentSplitStyles.style[key]);
-  }
-  if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || animationDriver.supportsCSS) && Array.isArray(styleState.style?.transform) && (styleState.style.transform = transformsToString(styleState.style.transform)), !styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
-    let retainedStyles, shouldRetain = !1;
-    if (!styleState.style.$$css) {
-      const atomic = getCSSStylesAtomic(styleState.style);
-      for (const atomicStyle of atomic) {
-        const [key, value, identifier] = atomicStyle, isAnimatedAndTransitionOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key), nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && props.animateOnly?.includes(key);
-        isAnimatedAndTransitionOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedTransitionOnly ? (retainedStyles ||= {}, retainedStyles[key] = value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), classNames[key] = identifier);
-      }
-      process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.info("retainedStyles", retainedStyles), console.groupEnd()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
-    }
-  }
-  const styleProp = props.style;
-  if (!styleProps.noMergeStyle && styleProp)
-    if (isHOC)
-      viewProps.style = normalizeStyle(styleProp);
-    else {
-      const isArray = Array.isArray(styleProp), len = isArray ? styleProp.length : 1;
-      for (let i = 0; i < len; i++) {
-        const style = isArray ? styleProp[i] : styleProp;
-        style && (style.$$css ? Object.assign(styleState.classNames, style) : (styleState.style ||= {}, Object.assign(styleState.style, normalizeStyle(style))));
-      }
-    }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-pre-result`;
-  const result = {
-    hasMedia,
-    fontFamily: styleState.fontFamily,
-    viewProps,
-    style: styleState.style,
-    pseudos,
-    classNames,
-    rulesToInsert,
-    dynamicThemeAccess,
-    pseudoGroups,
-    mediaGroups,
-    overriddenContextProps: styleState.overriddenContextProps
-  }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
-  if (!styleProps.noMergeStyle && !asChildExceptStyleLike) {
-    const style = styleState.style;
-    {
-      let fontFamily = isText || isInput ? styleState.fontFamily || staticConfig.defaultProps?.fontFamily : null;
-      fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
-      const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", groupClassName = props.group ? `t_group_${props.group}` : "", componentNameFinal = props.componentName || staticConfig.componentName, componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`;
-      let classList = [];
-      componentClassName && classList.push(componentClassName), fontFamilyClassName && classList.push(fontFamilyClassName), classNames && classList.push(Object.values(classNames).join(" ")), groupClassName && classList.push(groupClassName), props.className && classList.push(props.className);
-      const finalClassName = classList.join(" ");
-      if (styleProps.isAnimated && isReactNative)
-        style && (viewProps.style = style), animationDriver?.supportsCSS && (viewProps.className = finalClassName);
-      else if (isReactNative) {
-        let cnStyles;
-        for (const name of finalClassName.split(" "))
-          cnStyles ||= { $$css: !0 }, cnStyles[name] = name;
-        viewProps.style = cnStyles ? [...Array.isArray(style) ? style : [style], cnStyles] : [style];
-      } else
-        finalClassName && (viewProps.className = finalClassName), style && (viewProps.style = style);
-    }
-  }
-  if (process.env.NODE_ENV === "development" && debug === "verbose" && isClient && isDevTools) {
-    console.groupEnd(), console.groupCollapsed("\u{1F539} getSplitStyles ===>");
-    try {
-      const logs = {
-        ...result,
-        className,
-        componentState,
-        viewProps,
-        rulesToInsert,
-        parentSplitStyles
-      };
-      for (const key in logs)
-        log(key, logs[key]);
-    } catch {
-    }
-    console.groupEnd();
-  }
-  return process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-done`, result;
-};
-function mergeFlatTransforms(target, flatTransforms) {
-  Object.entries(flatTransforms).sort(([a], [b]) => sortString(a, b)).forEach(([key, val]) => {
-    mergeTransform(target, key, val, !0);
-  });
-}
-function mergeStyle(styleState, key, val, importance, disableNormalize = !1, originalVal) {
-  const { viewProps, styleProps, staticConfig, usedKeys } = styleState;
-  if ((usedKeys[key] || 0) > importance)
-    return;
-  const contextProps = staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props;
-  if (contextProps && key in contextProps) {
-    styleState.overriddenContextProps ||= {};
-    const originalFromState = styleState.originalContextPropValues?.[key];
-    styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val;
-  }
-  if (key in stylePropsTransform)
-    styleState.flatTransforms ||= {}, usedKeys[key] = importance, styleState.flatTransforms[key] = val;
-  else {
-    const out = isWeb && !disableNormalize && !styleProps.noNormalize ? normalizeValueWithProperty(val, key) : val;
-    // accept is for props not styles
-    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);
-  }
-}
-const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-  const { staticConfig, conf: conf2, styleProps } = styleState, styleOut = {};
-  let originalValues;
-  for (let key in styleIn) {
-    const val = styleIn[key];
-    key = conf2.shorthands[key] || key, !(!staticConfig.isHOC && key in skipProps && !styleProps.noSkip) && propMapper(key, val, styleState, !1, (skey, sval, originalVal) => {
-      originalVal !== void 0 && (originalValues ||= {}, originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval, key);
-    });
-  }
-  if (!avoidMergeTransform) {
-    const parentTransform = styleState.style?.transform, flatTransforms = styleState.flatTransforms, styleOutTransform = styleOut.transform;
-    if (Array.isArray(styleOutTransform) && styleOutTransform.length) {
-      const len = styleOutTransform.length;
-      if (Array.isArray(parentTransform)) {
-        const merged = [];
-        outer: for (let i = 0; i < parentTransform.length; i++) {
-          const pt = parentTransform[i];
-          for (const pk in pt) {
-            for (let j = 0; j < len; j++)
-              for (const sk in styleOutTransform[j]) {
-                if (pk === sk) continue outer;
-                break;
-              }
-            merged.push(pt);
-            break;
-          }
-        }
-        for (let i = 0; i < len; i++) merged.push(styleOutTransform[i]);
-        styleOut.transform = merged;
-      }
-      if (flatTransforms)
-        outer: for (const fk in flatTransforms) {
-          const ck = fk === "x" ? "translateX" : fk === "y" ? "translateY" : fk;
-          for (let j = 0; j < len; j++)
-            for (const sk in styleOutTransform[j]) {
-              if (ck === sk) continue outer;
-              break;
-            }
-          mergeTransform(styleOut, fk, flatTransforms[fk]);
-        }
-    } else flatTransforms && mergeFlatTransforms(styleOut, flatTransforms);
-  }
-  return styleProps.noNormalize || fixStyles(styleOut), originalValues && styleOriginalValues.set(styleOut, originalValues), styleOut;
-}, useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {
-}, 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(() => {
-    res && insertStyleRules(res.rulesToInsert);
-  }, [res?.rulesToInsert]), res;
-};
-function addStyleToInsertRules(rulesToInsert, styleObject) {
-  {
-    const identifier = styleObject[StyleObjectIdentifier];
-    shouldInsertStyleRules(identifier) && (updateRules(identifier, styleObject[StyleObjectRules]), rulesToInsert[identifier] = styleObject);
-  }
-}
-const defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animatableDefaults = {
-  ...Object.fromEntries(
-    Object.entries(tokenCategories.color).map(([k, v]) => [k, defaultColor])
-  ),
-  opacity: 1,
-  scale: 1,
-  scaleX: 1,
-  scaleY: 1,
-  rotate: "0deg",
-  rotateX: "0deg",
-  rotateY: "0deg",
-  rotateZ: "0deg",
-  skewX: "0deg",
-  skewY: "0deg",
-  x: 0,
-  y: 0,
-  borderRadius: 0
-}, mergeTransform = (obj, key, val, backwards = !1) => {
-  typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
-    [mapTransformKeys[key] || key]: val
-  }));
-}, mapTransformKeys = {
-  x: "translateX",
-  y: "translateY"
-};
-function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
-  if (shouldMergeObject) {
-    const next = {
-      ...viewProps[key],
-      ...val
-    };
-    delete viewProps[key], viewProps[key] = next;
-  } else
-    viewProps[key] = val;
-}
-function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, importanceBump, debugProp, originalVal) {
-  const usedKeys = styleState.usedKeys;
-  let importance = getMediaImportanceIfMoreImportant(
-    mediaKey,
-    key,
-    styleState,
-    isSizeMedia
-  );
-  if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && log(
-    `mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`
-  ), importance === null)
-    return !1;
-  if (key in pseudoDescriptors) {
-    const descriptor = pseudoDescriptors[key], descriptorKey = descriptor.stateKey || descriptor.name;
-    if (styleState.componentState[descriptorKey] === !1)
-      return !1;
-    const pseudoOriginalValues = styleOriginalValues.get(value);
-    for (const subKey in value)
-      mergeStyle(
-        styleState,
-        subKey,
-        value[subKey],
-        importance,
-        !1,
-        pseudoOriginalValues?.[subKey]
-      );
-  } else
-    mergeStyle(styleState, key, value, importance, !1, originalVal);
-  return !0;
-}
-function normalizeStyle(style) {
-  const out = {};
-  for (const key in style) {
-    const val = style[key];
-    key in stylePropsTransform ? mergeTransform(out, key, val) : out[key] = normalizeValueWithProperty(val, key);
-  }
-  return isWeb && Array.isArray(out.transform) && (out.transform = transformsToString(out.transform)), fixStyles(out), out;
-}
-function applyDefaultStyle(pkey, styleState) {
-  const defaultValues = animatableDefaults[pkey];
-  defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues, 1);
-}
-export {
-  PROP_SPLIT,
-  getSplitStyles,
-  getSubStyle,
-  styleOriginalValues,
-  useSplitStyles
-};
-//# sourceMappingURL=getSplitStyles.js.map