@tamagui/web 1.2.5

package/dist/esm/helpers/getSplitStyles.js

@@ -0,0 +1,849 @@
+import {
+  isClient,
+  isRSC,
+  isServer,
+  isWeb,
+  useIsomorphicLayoutEffect
+} from "@tamagui/constants";
+import {
+  stylePropsText,
+  stylePropsTransform,
+  validPseudoKeys,
+  validStyles,
+  validStylesOnBaseProps
+} from "@tamagui/helpers";
+import { useInsertionEffect } from "react";
+import { getConfig, getFont } from "../config";
+import { isDevTools } from "../constants/isDevTools";
+import {
+  getMediaImportanceIfMoreImportant,
+  mediaState as globalMediaState,
+  mediaKeysWithAndWithout$,
+  mediaQueryConfig,
+  mergeMediaByImportance
+} from "../hooks/useMedia";
+import { createMediaStyle } from "./createMediaStyle";
+import { getPropMappedFontFamily } from "./createPropMapper";
+import { fixStyles } from "./expandStyles";
+import { getAtomicStyle, getStylesAtomic, styleToCSS } from "./getStylesAtomic";
+import {
+  insertStyleRules,
+  insertedTransforms,
+  scanAllSheets,
+  shouldInsertStyleRules,
+  updateRules
+} from "./insertStyleRule";
+import { mergeTransform, mergeTransforms } from "./mergeTransform";
+import {
+  normalizeValueWithProperty,
+  reverseMapClassNameToValue
+} from "./normalizeValueWithProperty.js";
+import { pseudoDescriptors } from "./pseudoDescriptors";
+import { warnOnce } from "./warnOnce";
+const skipProps = {
+  animation: true,
+  space: true,
+  animateOnly: true,
+  debug: true,
+  componentName: true,
+  role: true,
+  tag: true
+};
+if (process.env.NODE_ENV === "test") {
+  skipProps["data-test-renders"] = true;
+}
+const IS_STATIC = process.env.IS_STATIC === "is_static";
+if (process.env.TAMAGUI_TARGET === "native") {
+  Object.assign(skipProps, {
+    whiteSpace: true,
+    wordWrap: true,
+    textOverflow: true,
+    textDecorationDistance: true,
+    cursor: true,
+    contain: true,
+    boxSizing: true,
+    boxShadow: true
+  });
+}
+const accessibilityDirectMap = {};
+if (process.env.TAMAGUI_TARGET === "web") {
+  const items = {
+    Hidden: true,
+    ActiveDescendant: true,
+    Atomic: true,
+    AutoComplete: true,
+    Busy: true,
+    Checked: true,
+    ColumnCount: "colcount",
+    ColumnIndex: "colindex",
+    ColumnSpan: "colspan",
+    Current: true,
+    Details: true,
+    ErrorMessage: true,
+    Expanded: true,
+    HasPopup: true,
+    Invalid: true,
+    Label: true,
+    Level: true,
+    Modal: true,
+    Multiline: true,
+    MultiSelectable: true,
+    Orientation: true,
+    Owns: true,
+    Placeholder: true,
+    PosInSet: true,
+    Pressed: true,
+    RoleDescription: true,
+    RowCount: true,
+    RowIndex: true,
+    RowSpan: true,
+    Selected: true,
+    SetSize: true,
+    Sort: true,
+    ValueMax: true,
+    ValueMin: true,
+    ValueNow: true,
+    ValueText: true
+  };
+  for (const key in items) {
+    let val = items[key];
+    if (val === true) {
+      val = key.toLowerCase();
+    }
+    accessibilityDirectMap[`accessibility${key}`] = `aria-${val}`;
+  }
+}
+let conf;
+const PROP_SPLIT = "-";
+const accessibilityRoleToWebRole = {
+  adjustable: "slider",
+  header: "heading",
+  image: "img",
+  link: "link",
+  none: "presentation",
+  summary: "region"
+};
+const isMediaKey = (key) => Boolean(key[0] === "$" && mediaKeysWithAndWithout$.has(key));
+const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, languageContext, elementType, debug) => {
+  var _a, _b, _c;
+  if (cache.has(props)) {
+    return cache.get(props);
+  }
+  conf = conf || getConfig();
+  const { shorthands } = conf;
+  const {
+    defaultVariants,
+    variants,
+    propMapper,
+    isReactNative,
+    deoptProps,
+    inlineProps,
+    inlineWhenUnflattened
+  } = staticConfig;
+  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
+  const viewProps = {};
+  let pseudos = null;
+  let psuedosUsed = null;
+  const mediaState = state.mediaState || globalMediaState;
+  const usedKeys = {};
+  const propKeys = Object.keys(props);
+  let space = props.space;
+  let hasMedia = false;
+  const shouldDoClasses = staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames;
+  let style = {};
+  const flatTransforms = {};
+  const len = propKeys.length;
+  const rulesToInsert = [];
+  const classNames = {};
+  let className = "";
+  const transforms = {};
+  let fontFamily;
+  const styleState = {
+    classNames,
+    conf,
+    flatTransforms,
+    props,
+    state,
+    staticConfig,
+    style,
+    theme,
+    usedKeys,
+    viewProps,
+    languageContext
+  };
+  if (process.env.NODE_ENV === "development") {
+    if (props.selectable) {
+      warnOnce("props.selectable", "selectable props deprecated, use userSelect");
+    }
+  }
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    console.groupCollapsed("getSplitStyles (looping backwards)");
+    console.log({ staticConfig, shouldDoClasses, state, IS_STATIC, propKeys });
+    console.groupEnd();
+  }
+  if (props.className) {
+    for (const cn of props.className.split(" ")) {
+      if (cn[0] === "_") {
+        const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
+        const isMedia = mediaOrPseudo[0] === "_";
+        const isPseudo = mediaOrPseudo[0] === "0";
+        const isMediaOrPseudo = isMedia || isPseudo;
+        let fullKey = shorthands[shorthand];
+        if (isMedia) {
+          let mediaShortKey = mediaOrPseudo.slice(1);
+          mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
+          fullKey += `${PROP_SPLIT}${mediaShortKey}`;
+        } else if (isPseudo) {
+          const pseudoShortKey = mediaOrPseudo.slice(1);
+          fullKey += `${PROP_SPLIT}${pseudoShortKey}`;
+        }
+        usedKeys[fullKey] = 1;
+        mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo);
+      } else if (cn) {
+        className += ` ${cn}`;
+      }
+    }
+  }
+  for (let i = len - 1; i >= 0; i--) {
+    let keyInit = propKeys[i];
+    if (keyInit === "className")
+      continue;
+    let valInit = props[keyInit];
+    if (keyInit in shorthands) {
+      keyInit = shorthands[keyInit];
+    }
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (keyInit === "userSelect") {
+        keyInit = "selectable";
+        valInit = valInit === "none" ? false : true;
+      } else if (keyInit.startsWith("data-") || keyInit.startsWith("aria-")) {
+        continue;
+      }
+    }
+    if (keyInit in usedKeys)
+      continue;
+    if (keyInit in skipProps)
+      continue;
+    if (typeof valInit === "string" && valInit[0] === "_") {
+      if (keyInit in validStyleProps || keyInit.includes("-")) {
+        if (shouldDoClasses) {
+          classNames[keyInit] = valInit;
+        } else {
+          style[keyInit] = reverseMapClassNameToValue(keyInit, valInit);
+        }
+        usedKeys[keyInit] = 1;
+        continue;
+      }
+    }
+    if (keyInit === "dataSet") {
+      for (const key in valInit) {
+        viewProps[`data-${hyphenate(key)}`] = valInit[key];
+      }
+      continue;
+    }
+    const isMainStyle = keyInit === "style";
+    if (isMainStyle || keyInit.startsWith("_style")) {
+      if (!valInit)
+        continue;
+      const styles = Array.isArray(valInit) ? valInit : [valInit];
+      const styleLen = styles.length;
+      for (let j = styleLen; j >= 0; j--) {
+        const cur = styles[j];
+        if (!cur)
+          continue;
+        for (const key in cur) {
+          if (!isMainStyle && usedKeys[key]) {
+            continue;
+          }
+          usedKeys[key] = 1;
+          style[key] = cur[key];
+        }
+      }
+      continue;
+    }
+    if (process.env.TAMAGUI_TARGET === "web") {
+      if (keyInit === "disabled" && valInit === true) {
+        usedKeys[keyInit] = 1;
+        viewProps["aria-disabled"] = true;
+        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
+          viewProps.disabled = true;
+        }
+        if (!(variants == null ? void 0 : variants.disabled)) {
+          continue;
+        }
+      }
+      if (keyInit === "testID") {
+        usedKeys[keyInit] = 1;
+        viewProps[isReactNative ? "testId" : "data-testid"] = valInit;
+        continue;
+      }
+      if (keyInit === "id" || keyInit === "nativeID") {
+        usedKeys[keyInit] = 1;
+        if (isReactNative) {
+          viewProps.nativeID = valInit;
+        } else {
+          viewProps.id = valInit;
+        }
+        continue;
+      }
+      let didUseKeyInit = false;
+      if (isReactNative) {
+        if (accessibilityDirectMap[keyInit] || keyInit.startsWith("accessibility")) {
+          viewProps[keyInit] = valInit;
+          usedKeys[keyInit] = 1;
+          continue;
+        }
+      } else {
+        didUseKeyInit = true;
+        if (accessibilityDirectMap[keyInit]) {
+          viewProps[accessibilityDirectMap[keyInit]] = valInit;
+        } else {
+          switch (keyInit) {
+            case "accessibilityRole": {
+              if (valInit === "none") {
+                viewProps.role = "presentation";
+              } else {
+                viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
+              }
+              continue;
+            }
+            case "accessibilityLabelledBy":
+            case "accessibilityFlowTo":
+            case "accessibilityControls":
+            case "accessibilityDescribedBy": {
+              viewProps[`aria-${keyInit.replace("accessibility", "").toLowerCase()}`] = processIDRefList(valInit);
+              continue;
+            }
+            case "accessibilityKeyShortcuts": {
+              if (Array.isArray(valInit)) {
+                viewProps["aria-keyshortcuts"] = valInit.join(" ");
+              }
+              continue;
+            }
+            case "accessibilityLiveRegion": {
+              viewProps["aria-live"] = valInit === "none" ? "off" : valInit;
+              continue;
+            }
+            case "accessibilityReadOnly": {
+              viewProps["aria-readonly"] = valInit;
+              if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+                viewProps.readOnly = true;
+              }
+              continue;
+            }
+            case "accessibilityRequired": {
+              viewProps["aria-required"] = valInit;
+              if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+                viewProps.required = valInit;
+              }
+              continue;
+            }
+            default: {
+              didUseKeyInit = false;
+            }
+          }
+        }
+      }
+      if (didUseKeyInit) {
+        usedKeys[keyInit] = 1;
+        continue;
+      }
+      if (valInit && valInit[0] === "_") {
+        const isValidClassName = validStyles[keyInit];
+        const isMediaOrPseudo = !isValidClassName && keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
+        if (isValidClassName || isMediaOrPseudo) {
+          usedKeys[keyInit] = 1;
+          if (process.env.NODE_ENV === "development") {
+            if (debug) {
+              console.log("tamagui classname props", keyInit, valInit);
+            }
+          }
+          mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo);
+          continue;
+        }
+      }
+    }
+    if (defaultVariants && keyInit in defaultVariants || // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props
+    // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...
+    state.keepVariantsAsProps && variants && keyInit in variants) {
+      viewProps[keyInit] = valInit;
+    }
+    let isMedia = isMediaKey(keyInit);
+    let isPseudo = validPseudoKeys[keyInit];
+    const isHOCShouldPassThrough = staticConfig.isHOC && (isMedia || isPseudo);
+    if (isHOCShouldPassThrough || !(isMedia || isPseudo || (variants == null ? void 0 : variants[keyInit]) || validStyleProps[keyInit] || shorthands[keyInit])) {
+      usedKeys[keyInit] = 1;
+      viewProps[keyInit] = valInit;
+      continue;
+    }
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      console.groupCollapsed("  \u{1F539} styles", keyInit, valInit);
+    }
+    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : propMapper(
+      keyInit,
+      valInit,
+      theme,
+      props,
+      state,
+      languageContext,
+      void 0,
+      debug
+    );
+    if (!fontFamily) {
+      fontFamily = getPropMappedFontFamily(expanded);
+    }
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      if (!isServer && isDevTools) {
+        console.log("expanded", expanded, "\nusedKeys", usedKeys, "\ncurrent", {
+          ...style
+        });
+      }
+      console.groupEnd();
+    }
+    if (!expanded)
+      continue;
+    for (const [key, val] of expanded) {
+      if (val === void 0)
+        continue;
+      isMedia = isMediaKey(key);
+      isPseudo = validPseudoKeys[key];
+      const isMediaOrPseudo = isMedia || isPseudo;
+      if (!isMediaOrPseudo && usedKeys[key]) {
+        if (process.env.NODE_ENV === "developmnet" && debug === "verbose") {
+          console.log(`Used media/pseudo ${key}`);
+        }
+        continue;
+      }
+      if ((inlineProps == null ? void 0 : inlineProps.has(key)) || (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key))) {
+        usedKeys[key] = 1;
+        viewProps[key] = props[key] ?? val;
+      }
+      if (isPseudo) {
+        if (!val)
+          continue;
+        const pseudoStyleObject = getSubStyle(
+          styleState,
+          key,
+          val,
+          true,
+          state.noClassNames
+        );
+        const descriptor = pseudoDescriptors[key];
+        const isEnter = descriptor.name === "enter";
+        const isExit = descriptor.name === "exit";
+        if (!descriptor || isExit && !state.isExiting) {
+          continue;
+        }
+        if (!shouldDoClasses || IS_STATIC) {
+          pseudos ||= {};
+          pseudos[key] ||= {};
+          Object.assign(pseudos[key], pseudoStyleObject);
+        }
+        if (shouldDoClasses && !isEnter && !isExit) {
+          const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor);
+          for (const psuedoStyle of pseudoStyles) {
+            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1;
+              addStyleToInsertRules(rulesToInsert, psuedoStyle);
+              mergeClassName(
+                transforms,
+                classNames,
+                fullKey,
+                psuedoStyle.identifier,
+                isMediaOrPseudo
+              );
+            }
+          }
+        } else {
+          if (usedKeys[key]) {
+            continue;
+          }
+          let isDisabled = !state[descriptor.stateKey || descriptor.name];
+          if (isWeb && !isClient && isEnter) {
+            isDisabled = false;
+          }
+          if (!isDisabled) {
+            if (valInit === staticConfig.defaultProps[keyInit]) {
+            } else {
+              usedKeys[key] ||= 1;
+              if (process.env.NODE_ENV === "development" && debug === "verbose") {
+                console.log(`Setting used ${key}`);
+              }
+            }
+          }
+          psuedosUsed ||= {};
+          const importance = descriptor.priority;
+          for (const pkey in pseudoStyleObject) {
+            const val2 = pseudoStyleObject[pkey];
+            if (isDisabled) {
+              if (!(pkey in usedKeys) && pkey in animatableDefaults) {
+                const defaultVal = animatableDefaults[pkey];
+                mergeStyle(styleState, pkey, defaultVal, true);
+              }
+              continue;
+            }
+            const curImportance = psuedosUsed[importance] || 0;
+            const shouldMerge = importance >= curImportance;
+            if (shouldMerge) {
+              psuedosUsed[pkey] = importance;
+              pseudos ||= {};
+              pseudos[key] ||= {};
+              pseudos[key][pkey] = val2;
+              mergeStyle(styleState, pkey, val2);
+            }
+            if (process.env.NODE_ENV === "development" && debug === "verbose") {
+              console.log("Merged pseudo?", shouldMerge, { importance, curImportance, pkey, val: val2 });
+            }
+          }
+        }
+        continue;
+      }
+      if (isMedia) {
+        if (!val)
+          continue;
+        hasMedia ||= true;
+        const mediaStyle = getSubStyle(
+          styleState,
+          key,
+          val,
+          // TODO try true like pseudo
+          false
+        );
+        const mediaKeyShort = key.slice(1);
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.log(`  \u{1F4FA} ${key}`, { key, mediaStyle, props, shouldDoClasses });
+        }
+        if ("space" in mediaStyle) {
+          if (!Array.isArray(hasMedia)) {
+            hasMedia = [];
+          }
+          hasMedia.push(mediaKeyShort);
+        }
+        if (shouldDoClasses) {
+          if ("space" in mediaStyle) {
+            delete mediaStyle["space"];
+            if (mediaState[mediaKeyShort]) {
+              const val2 = valInit.space;
+              const importance = getMediaImportanceIfMoreImportant(
+                mediaKeyShort,
+                "space",
+                usedKeys
+              );
+              if (importance) {
+                space = val2;
+                usedKeys["space"] = importance;
+                if (process.env.NODE_ENV === "development" && debug === "verbose") {
+                  console.log(
+                    `Found more important space for current media ${mediaKeyShort}: ${val2} (importance: ${importance})`
+                  );
+                }
+              }
+            }
+          }
+          const mediaStyles = getStylesAtomic(mediaStyle);
+          for (const style2 of mediaStyles) {
+            const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
+            const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1;
+              addStyleToInsertRules(rulesToInsert, out);
+              mergeClassName(transforms, classNames, fullKey, out.identifier, true);
+            }
+          }
+        } else if (mediaState[mediaKeyShort]) {
+          for (const subKey in mediaStyle) {
+            const importance = getMediaImportanceIfMoreImportant(
+              mediaKeyShort,
+              subKey,
+              usedKeys
+            );
+            if (importance === null)
+              continue;
+            if (subKey === "space") {
+              space = valInit.space;
+              continue;
+            }
+            mergeMediaByImportance(
+              style,
+              mediaKeyShort,
+              subKey,
+              mediaStyle[subKey],
+              usedKeys
+            );
+            if (key === "fontFamily") {
+              fontFamily = mediaStyle[key];
+            }
+          }
+        }
+        continue;
+      }
+      if (process.env.TAMAGUI_TARGET === "native") {
+        if (key === "pointerEvents") {
+          usedKeys[key] = 1;
+          viewProps[key] = val;
+          continue;
+        }
+      }
+      if (key === "fontFamily" && !fontFamily && valInit && val) {
+        fontFamily = valInit[0] === "$" ? valInit : val;
+      }
+      if (key in validStyleProps) {
+        mergeStyle(styleState, key, val);
+        continue;
+      }
+      if (!(variants && key in variants)) {
+        if (!skipProps[key]) {
+          viewProps[key] = val;
+          usedKeys[key] = 1;
+        }
+      }
+    }
+  }
+  fixStyles(style);
+  if (isWeb) {
+    styleToCSS(style);
+  }
+  if (process.env.TAMAGUI_TARGET === "native") {
+    if ("fontFamily" in style && style.fontFamily) {
+      const faceInfo = (_a = getFont(style.fontFamily)) == null ? void 0 : _a.face;
+      if (faceInfo) {
+        const overrideFace = (_c = (_b = faceInfo[style.fontWeight]) == null ? void 0 : _b[style.fontStyle || "normal"]) == null ? void 0 : _c.val;
+        if (overrideFace) {
+          style.fontFamily = overrideFace;
+          fontFamily = overrideFace;
+          delete style.fontWeight;
+          delete style.fontStyle;
+        }
+      }
+      if (process.env.NODE_ENV === "development") {
+        if (debug) {
+          console.log(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
+        }
+      }
+    }
+  }
+  if (flatTransforms) {
+    if (process.env.NODE_ENV === "development" && debug) {
+      console.log(
+        "Merging flat transforms, transform before",
+        [...style.transform || []],
+        flatTransforms
+      );
+    }
+    mergeTransforms(style, flatTransforms, true);
+  }
+  if (parentSplitStyles) {
+    if (process.env.TAMAGUI_TARGET === "web") {
+      if (shouldDoClasses) {
+        for (const key in parentSplitStyles.classNames) {
+          const val = parentSplitStyles.classNames[key];
+          if (key in style || key in classNames)
+            continue;
+          classNames[key] = val;
+        }
+      }
+    }
+    if (!shouldDoClasses) {
+      for (const key in parentSplitStyles.style) {
+        if (key in classNames || key in style)
+          continue;
+        style[key] = parentSplitStyles.style[key];
+      }
+    }
+  }
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if (shouldDoClasses) {
+      const retainedStyles = {};
+      if (style["$$css"]) {
+      } else {
+        const atomic = getStylesAtomic(style);
+        for (const atomicStyle of atomic) {
+          const key = atomicStyle.property;
+          if (props.animateOnly && props.animateOnly.includes(key)) {
+            retainedStyles[key] = atomicStyle.value;
+          } else {
+            addStyleToInsertRules(rulesToInsert, atomicStyle);
+            mergeClassName(transforms, classNames, key, atomicStyle.identifier);
+          }
+        }
+        if (!IS_STATIC) {
+          style = retainedStyles;
+        }
+      }
+    }
+    if (transforms) {
+      for (const namespace in transforms) {
+        if (!transforms[namespace]) {
+          if (process.env.NODE_ENV === "development") {
+            console.warn("Error no transform", transforms, namespace);
+          }
+          continue;
+        }
+        const [hash, val] = transforms[namespace];
+        const identifier = `_transform${hash}`;
+        if (isClient && !insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`;
+          addStyleToInsertRules(rulesToInsert, {
+            identifier,
+            rules: [rule],
+            property: namespace
+          });
+        }
+        classNames[namespace] = identifier;
+      }
+    }
+  }
+  const result = {
+    space,
+    hasMedia,
+    fontFamily,
+    viewProps,
+    style,
+    pseudos,
+    classNames,
+    rulesToInsert
+  };
+  if (className) {
+    classNames.className = className;
+  }
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    if (isDevTools) {
+      console.groupCollapsed("  \u{1F539} styles =>");
+      const logs = { transforms, viewProps, state, rulesToInsert, parentSplitStyles, flatTransforms, result };
+      for (const key in { ...result, ...logs }) {
+        console.log(key, logs[key]);
+      }
+      console.groupEnd();
+    }
+  }
+  cache.set(props, result);
+  return result;
+};
+function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = false) {
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if (!val)
+      return;
+    if (val[0] === "_" && val.startsWith("_transform-")) {
+      const ns = isMediaOrPseudo ? key : "transform";
+      let transform = insertedTransforms[val];
+      if (isClient && !transform) {
+        scanAllSheets();
+        transform = insertedTransforms[val];
+        if (!transform && isWeb && val[0] !== "_") {
+          transform = val;
+        }
+      }
+      transforms[ns] ||= ["", ""];
+      transforms[ns][0] += val.replace("_transform", "");
+      if (transform) {
+        transforms[ns][1] += transform;
+      }
+    } else {
+      classNames[key] = val;
+    }
+  }
+}
+const cache = /* @__PURE__ */ new WeakMap();
+function getSubStyleProps(defaultProps, baseProps, specificProps) {
+  const key = specificProps || baseProps;
+  if (!cache.has(key)) {
+    cache.set(key, {
+      ...defaultProps,
+      ...baseProps,
+      ...specificProps
+    });
+  }
+  return cache.get(key);
+}
+function mergeStyle({ usedKeys, classNames, flatTransforms, viewProps, style }, key, val, dontSetUsed = false) {
+  if (!dontSetUsed) {
+    usedKeys[key] ||= 1;
+  }
+  if (val && val[0] === "_") {
+    classNames[key] = val;
+  } else if (key in stylePropsTransform) {
+    flatTransforms ||= {};
+    flatTransforms[key] = val;
+  } else {
+    const out = normalizeValueWithProperty(val, key);
+    if (key in validStylesOnBaseProps) {
+      viewProps[key] = out;
+    } else {
+      style[key] = out;
+    }
+  }
+}
+const getSubStyle = (styleState, subKey, styleIn, avoidDefaultProps, avoidMergeTransform) => {
+  const { staticConfig, theme, props, state, conf: conf2, languageContext } = styleState;
+  const styleOut = {};
+  for (let key in styleIn) {
+    const val = styleIn[key];
+    key = conf2.shorthands[key] || key;
+    const expanded = staticConfig.propMapper(
+      key,
+      val,
+      theme,
+      getSubStyleProps(staticConfig.defaultProps, props, props[subKey]),
+      state,
+      languageContext,
+      avoidDefaultProps
+    );
+    if (!expanded)
+      continue;
+    for (const [skey, sval] of expanded) {
+      if (!avoidMergeTransform && skey in stylePropsTransform) {
+        mergeTransform(styleOut, skey, sval);
+      } else {
+        styleOut[skey] = normalizeValueWithProperty(sval, key);
+      }
+    }
+  }
+  fixStyles(styleOut);
+  return styleOut;
+};
+const insertSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  insertStyleRules(res.rulesToInsert);
+  return res;
+};
+const useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {
+};
+const useSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  if (!isRSC) {
+    useInsertEffectCompat(() => {
+      insertStyleRules(res.rulesToInsert);
+    }, [res.rulesToInsert]);
+  }
+  return res;
+};
+function addStyleToInsertRules(rulesToInsert, styleObject) {
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if (!shouldInsertStyleRules(styleObject)) {
+      return;
+    }
+    updateRules(styleObject.identifier, styleObject.rules);
+    rulesToInsert.push(styleObject);
+  }
+}
+function processIDRefList(idRefList) {
+  return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
+}
+const animatableDefaults = {
+  opacity: 1,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+const lowercaseHyphenate = (match) => `-${match.toLowerCase()}`;
+const hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate);
+export {
+  PROP_SPLIT,
+  getSplitStyles,
+  getSubStyle,
+  insertSplitStyles,
+  useSplitStyles
+};
+//# sourceMappingURL=getSplitStyles.js.map