@tamagui/core 1.0.1-beta.98 → 1.0.1-rc.0

package/dist/cjs/helpers/getSplitStyles.js

@@ -1,21 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -35,314 +22,540 @@ __export(getSplitStyles_exports, {
   getSplitStyles: () => getSplitStyles,
   getSubStyle: () => getSubStyle,
   insertSplitStyles: () => insertSplitStyles,
-  pseudoCNInverse: () => pseudoCNInverse,
   useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
+var import_constants = require("@tamagui/constants");
 var import_helpers = require("@tamagui/helpers");
 var import_react = require("react");
-var import_conf = require("../conf");
-var import_platform = require("../constants/platform");
+var import_config = require("../config");
+var import_isDevTools = require("../constants/isDevTools");
 var import_useMedia = require("../hooks/useMedia");
 var import_createMediaStyle = require("./createMediaStyle");
+var import_createPropMapper = require("./createPropMapper");
 var import_expandStyles = require("./expandStyles");
 var import_getStylesAtomic = require("./getStylesAtomic");
 var import_insertStyleRule = require("./insertStyleRule");
 var import_mergeTransform = require("./mergeTransform");
-var import_normalizeValueWithProperty = require("./normalizeValueWithProperty");
+var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.js");
 var import_pseudoDescriptors = require("./pseudoDescriptors");
-const skipProps = __spreadValues({
+const skipProps = {
   animation: true,
   animateOnly: true,
   debug: true,
-  componentName: true
-}, !import_platform.isWeb && {
-  tag: true,
-  whiteSpace: true,
-  wordWrap: true,
-  textOverflow: true,
-  textDecorationDistance: true,
-  userSelect: true,
-  selectable: true,
-  cursor: true,
-  contain: true,
-  boxSizing: true,
-  boxShadow: true
-});
+  componentName: true,
+  role: true,
+  tag: 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,
+    userSelect: true,
+    selectable: 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 pseudoCNInverse = {
-  hover: "hoverStyle",
-  focus: "focusStyle",
-  press: "pressStyle"
+const accessibilityRoleToWebRole = {
+  adjustable: "slider",
+  header: "heading",
+  image: "img",
+  link: "link",
+  none: "presentation",
+  summary: "region"
 };
-const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, debug) => {
-  var _a, _b;
-  conf = conf || (0, import_conf.getConfig)();
+const isMediaKey = (key) => Boolean(key[0] === "$" && import_useMedia.mediaQueryConfig[key.slice(1)]);
+const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, languageContext, elementType, debug) => {
+  conf = conf || (0, import_config.getConfig)();
+  const { shorthands } = conf;
+  const {
+    defaultVariants,
+    variants,
+    propMapper,
+    isReactNative,
+    deoptProps,
+    inlineProps,
+    inlineWhenUnflattened
+  } = staticConfig;
   const validStyleProps = staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles;
+  const mediaKeys = [];
   const viewProps = {};
   const pseudos = {};
+  let psuedosUsed = null;
   const medias = {};
-  const usedKeys = /* @__PURE__ */ new Set();
+  const mediaState = state.mediaState || import_useMedia.mediaState;
+  const usedKeys = {};
+  const propKeys = Object.keys(props);
+  const shouldDoClasses = staticConfig.acceptsClassName && (import_constants.isWeb || IS_STATIC) && !state.noClassNames;
   let style = {};
-  if (state.hasTextAncestor) {
-    style.display = "inline-flex";
-  }
-  let classNames = {};
-  let transforms = null;
-  let rulesToInsert = null;
-  function addStyle(prop, rule) {
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if ((0, import_insertStyleRule.updateInsertedCache)(prop, rule) || !import_platform.isClient && process.env.NODE_ENV === "production") {
-        rulesToInsert = rulesToInsert || [];
-        rulesToInsert.push([prop, rule]);
-      }
-    }
-  }
-  function mergeClassName(key, val, isMediaOrPseudo = false) {
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if (!val)
-        return;
-      if (val.startsWith("_transform-")) {
-        const namespace = isMediaOrPseudo ? key : "transform";
-        let transform = import_insertStyleRule.insertedTransforms[val];
-        if (import_platform.isClient) {
-          if (!transform) {
-            (0, import_insertStyleRule.updateInserted)();
-            transform = import_insertStyleRule.insertedTransforms[val];
-            if (process.env.NODE_ENV === "development") {
-              if (!transform) {
-                console.warn("no transform found", { insertedTransforms: import_insertStyleRule.insertedTransforms, val });
-              }
-            }
-          }
-          if (!transform) {
-            if (import_platform.isWeb && val[0] !== "_") {
-              transform = val;
-            }
-          }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms: import_insertStyleRule.insertedTransforms });
-          }
+  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 (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}`;
         }
-        transforms = transforms || {};
-        transforms[namespace] = transforms[namespace] || ["", ""];
-        const identifier = val.replace("_transform", "");
-        transforms[namespace][0] += identifier;
-        if (transform) {
-          transforms[namespace][1] += transform;
+        if (process.env.NODE_ENV === "development") {
+          if (debug) {
+            console.log("tamagui classname", fullKey, cn);
+          }
         }
+        usedKeys[fullKey] = 1;
+        mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo);
       } else {
-        classNames[key] = val;
+        if (cn) {
+          className += " " + cn;
+        }
       }
     }
   }
-  const propKeys = Object.keys(props);
-  const shouldDoClasses = (import_platform.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames;
-  const len = propKeys.length;
   for (let i = len - 1; i >= 0; i--) {
-    const keyInit = propKeys[i];
-    if (usedKeys.has(keyInit))
+    let keyInit = propKeys[i];
+    if (keyInit === "className")
       continue;
-    if (skipProps[keyInit])
+    const valInit = props[keyInit];
+    const expandedKey = keyInit in shorthands;
+    if (expandedKey) {
+      keyInit = shorthands[keyInit];
+    }
+    if (keyInit in usedKeys)
       continue;
-    if (!import_platform.isWeb && keyInit.startsWith("data-"))
+    if (keyInit in skipProps)
       continue;
-    const valInit = props[keyInit];
+    if (!import_constants.isWeb && keyInit.startsWith("data-"))
+      continue;
+    if (validStyleProps[keyInit] || keyInit.includes("-")) {
+      if (valInit && valInit[0] === "_") {
+        if (shouldDoClasses) {
+          classNames[keyInit] = valInit;
+        } else {
+          style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit);
+        }
+        usedKeys[keyInit] = 1;
+        continue;
+      }
+    }
     if (keyInit === "style" || keyInit.startsWith("_style")) {
       if (!valInit)
         continue;
-      for (const key in valInit) {
-        if (usedKeys.has(key))
+      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;
-        if (valInit && typeof valInit === "object") {
-          for (const skey in valInit) {
-            if (usedKeys.has(skey))
-              continue;
-            usedKeys.add(skey);
-            style[skey] = valInit[skey];
-          }
-        } else {
-          usedKeys.add(key);
-          style[key] = valInit;
+        for (const key in cur) {
+          if (usedKeys[key])
+            continue;
+          usedKeys[key] = 1;
+          style[key] = cur[key];
         }
       }
       continue;
     }
     if (process.env.TAMAGUI_TARGET === "web") {
-      if (keyInit === "className") {
-        let nonTamaguis = "";
-        if (!valInit)
+      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;
+        if (isReactNative) {
+          viewProps.testId = valInit;
+        } else {
+          viewProps["data-testid"] = valInit;
+        }
+        continue;
+      }
+      if (keyInit === "id" || keyInit === "nativeID") {
+        usedKeys[keyInit] = 1;
+        if (isReactNative) {
+          viewProps.nativeID = valInit;
+        } else {
+          viewProps.id = valInit;
+        }
+        continue;
+      }
+      let didUseKeyInit = true;
+      if (isReactNative) {
+        didUseKeyInit = false;
+        if (accessibilityDirectMap[keyInit] || keyInit.startsWith("accessibility")) {
+          viewProps[keyInit] = valInit;
+          usedKeys[keyInit] = 1;
           continue;
-        for (const cn of valInit.split(" ")) {
-          if (cn[0] === "_") {
-            const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
-            const isMedia2 = mediaOrPseudo[0] === "_";
-            const isPseudo2 = mediaOrPseudo[0] === "0";
-            const isMediaOrPseudo2 = isMedia2 || isPseudo2;
-            let fullKey = conf.shorthands[shorthand];
-            if (isMedia2) {
-              let mediaShortKey = mediaOrPseudo.slice(1);
-              mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
-              fullKey += `${PROP_SPLIT}${mediaShortKey}`;
-            } else if (isPseudo2) {
-              const pseudoShortKey = mediaOrPseudo.slice(1);
-              fullKey += `${PROP_SPLIT}${pseudoShortKey}`;
+        }
+      } else {
+        if (accessibilityDirectMap[keyInit]) {
+          viewProps[accessibilityDirectMap[keyInit]] = valInit;
+          usedKeys[keyInit] = 1;
+          continue;
+        }
+        switch (keyInit) {
+          case "accessibilityRole": {
+            if (valInit === "none") {
+              viewProps.role = "presentation";
+            } else {
+              viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
             }
-            usedKeys.add(fullKey);
-            mergeClassName(fullKey, cn, isMediaOrPseudo2);
-          } else {
-            nonTamaguis += " " + cn;
+            break;
+          }
+          case "accessibilityControls": {
+            viewProps["aria-controls"] = processIDRefList(valInit);
+            break;
+          }
+          case "accessibilityDescribedBy": {
+            viewProps["aria-describedby"] = processIDRefList(valInit);
+            break;
+          }
+          case "accessibilityFlowTo": {
+            viewProps["aria-flowto"] = processIDRefList(valInit);
+            break;
+          }
+          case "accessibilityLabelledBy": {
+            viewProps["aria-labelledby"] = processIDRefList(valInit);
+            break;
+          }
+          case "accessibilityKeyShortcuts": {
+            if (Array.isArray(valInit)) {
+              viewProps["aria-keyshortcuts"] = valInit.join(" ");
+            }
+            break;
+          }
+          case "accessibilityLiveRegion": {
+            viewProps["aria-live"] = valInit === "none" ? "off" : valInit;
+            break;
+          }
+          case "accessibilityReadOnly": {
+            viewProps["aria-readonly"] = valInit;
+            if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+              viewProps.readOnly = true;
+            }
+            break;
+          }
+          case "accessibilityRequired": {
+            viewProps["aria-required"] = valInit;
+            if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+              viewProps.required = true;
+            }
+            break;
+          }
+          default: {
+            didUseKeyInit = false;
           }
         }
-        if (nonTamaguis) {
-          usedKeys.add(keyInit);
-          mergeClassName(keyInit, nonTamaguis);
-        }
+      }
+      if (didUseKeyInit) {
+        usedKeys[keyInit] = 1;
         continue;
       }
       if (valInit && valInit[0] === "_") {
         const isValidClassName = import_helpers.validStyles[keyInit];
-        const isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && import_helpers.validStyles[keyInit.split(PROP_SPLIT)[0]];
-        if (isValidClassName || isMediaOrPseudo2) {
-          usedKeys.add(keyInit);
-          mergeClassName(keyInit, valInit, isMediaOrPseudo2);
+        const isMediaOrPseudo = !isValidClassName && keyInit.includes(PROP_SPLIT) && import_helpers.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 (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
+    if (defaultVariants && keyInit in defaultVariants || state.keepVariantsAsProps && variants && keyInit in variants) {
       viewProps[keyInit] = valInit;
     }
-    let isMedia = keyInit[0] === "$";
+    let isMedia = isMediaKey(keyInit);
     let isPseudo = import_helpers.validPseudoKeys[keyInit];
-    let isMediaOrPseudo = isMedia || isPseudo;
-    if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
-      usedKeys.add(keyInit);
+    if (!isMedia && !isPseudo && !(variants == null ? void 0 : variants[keyInit]) && !validStyleProps[keyInit] && !shorthands[keyInit]) {
+      if (import_constants.isWeb && keyInit.includes("ccessibility")) {
+        continue;
+      }
+      usedKeys[keyInit] = 1;
       viewProps[keyInit] = valInit;
       continue;
     }
-    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state, void 0, debug);
     if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      console.log("  \xBB getSplitStyles", keyInit, valInit, expanded);
+      console.groupCollapsed("  \u{1F539} styles", keyInit, valInit);
     }
-    if (!expanded) {
-      continue;
+    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : propMapper(keyInit, valInit, theme, props, state, languageContext, void 0, debug);
+    if (!fontFamily) {
+      fontFamily = (0, import_createPropMapper.getPropMappedFontFamily)(expanded);
     }
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      if (!import_constants.isServer && import_constants.isWeb) {
+        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 = key[0] === "$";
+      isMedia = isMediaKey(key);
       isPseudo = import_helpers.validPseudoKeys[key];
-      isMediaOrPseudo = isMedia || isPseudo;
-      if (!isMediaOrPseudo) {
-        if (usedKeys.has(key))
-          continue;
+      const isMediaOrPseudo = isMedia || isPseudo;
+      if (!isMediaOrPseudo && usedKeys[key]) {
+        continue;
       }
-      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key) || staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key)) {
-        usedKeys.add(key);
+      if ((deoptProps == null ? void 0 : deoptProps.has(key)) || (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;
-        if (key === "enterStyle" && state.mounted) {
+        const pseudoStyleObject = getSubStyle(styleState, key, val, true, state.noClassNames);
+        const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
+        const isEnter = descriptor.name === "enter";
+        const isExit = descriptor.name === "exit";
+        if (!descriptor || isEnter && !state.unmounted || isExit && !state.isExiting) {
           continue;
         }
-        pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, conf, true);
-        if (shouldDoClasses) {
-          const pseudoStyles = (0, import_getStylesAtomic.getAtomicStyle)(pseudos[key], import_pseudoDescriptors.pseudoDescriptors[key]);
-          for (const style2 of pseudoStyles) {
-            const postfix = ((_b = import_pseudoDescriptors.pseudoDescriptors[key]) == null ? void 0 : _b.name) || key;
-            const fullKey = `${style2.property}${PROP_SPLIT}${postfix}`;
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey);
-              addStyle(style2.identifier, style2.rules.join(";"));
-              mergeClassName(fullKey, style2.identifier, isMediaOrPseudo);
+        if (!shouldDoClasses || IS_STATIC) {
+          pseudos[key] || (pseudos[key] = {});
+          Object.assign(pseudos[key], pseudoStyleObject);
+        }
+        if (shouldDoClasses && !isEnter && !isExit) {
+          const pseudoStyles = (0, import_getStylesAtomic.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 {
+          const isDisabled = !state[descriptor.stateKey || descriptor.name];
+          if (!isDisabled) {
+            usedKeys[key] || (usedKeys[key] = 1);
+          }
+          psuedosUsed || (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;
+            if (importance >= curImportance) {
+              psuedosUsed[pkey] = importance;
+              pseudos[key] || (pseudos[key] = {});
+              pseudos[key][pkey] = val2;
+              if (process.env.NODE_ENV === "development" && debug === "verbose")
+                console.log("merging", pkey, val2);
+              mergeStyle(styleState, pkey, val2);
             }
           }
         }
         continue;
       }
       if (isMedia) {
+        if (!val)
+          continue;
         const mediaKey = key;
         const mediaKeyShort = mediaKey.slice(1);
-        if (!import_useMedia.mediaQueryConfig[mediaKeyShort]) {
-          if (!usedKeys.has(key)) {
-            viewProps[key] = val;
-          }
-          continue;
-        }
-        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, conf);
+        mediaKeys.push(mediaKeyShort);
+        const mediaStyle = getSubStyle(
+          styleState,
+          key,
+          val,
+          false
+        );
         if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.log("  \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
+          console.log(`  \u{1F4FA} ${mediaKey}`, mediaState[mediaKeyShort], { mediaKey, mediaStyle, props, shouldDoClasses, mediaState: { ...mediaState } });
         }
         if (shouldDoClasses) {
           const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
           for (const style2 of mediaStyles) {
             const out = (0, import_createMediaStyle.createMediaStyle)(style2, mediaKeyShort, import_useMedia.mediaQueryConfig);
             const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey);
-              addStyle(out.identifier, out.styleRule);
-              mergeClassName(fullKey, out.identifier, true);
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1;
+              addStyleToInsertRules(rulesToInsert, out);
+              mergeClassName(transforms, classNames, fullKey, out.identifier, true);
             }
           }
-        } else {
-          if (import_useMedia.mediaState[mediaKey]) {
-            if (process.env.NODE_ENV === "development" && debug) {
-              console.log("apply media style", mediaKey, import_useMedia.mediaState);
+        } else if (mediaState[mediaKey]) {
+          for (const key2 in mediaStyle) {
+            const didMerge = (0, import_useMedia.mergeMediaByImportance)(style, key2, mediaStyle[key2], usedKeys);
+            if (didMerge) {
+              if (key2 === "fontFamily") {
+                fontFamily = mediaStyle[key2];
+              }
             }
-            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
           }
         }
         continue;
       }
-      if (!import_platform.isWeb && key === "pointerEvents") {
-        usedKeys.add(key);
+      if (!import_constants.isWeb && key === "pointerEvents") {
+        usedKeys[key] = 1;
         viewProps[key] = val;
         continue;
       }
+      if (key === "fontFamily" && !fontFamily && valInit && val) {
+        fontFamily = valInit[0] === "$" ? valInit : val;
+      }
       if (validStyleProps[key]) {
-        usedKeys.add(key);
-        if (val && val[0] === "_") {
-          classNames[key] = val;
-        } else if (key in import_helpers.stylePropsTransform) {
-          (0, import_mergeTransform.mergeTransform)(style, key, val, true);
-        } else {
-          style[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
-        }
+        mergeStyle(styleState, key, val);
         continue;
       }
-      if (!staticConfig.variants || !(key in staticConfig.variants)) {
+      if (!variants || !(key in variants)) {
         if (!skipProps[key]) {
           viewProps[key] = val;
-          usedKeys.add(key);
+          usedKeys[key] = 1;
         }
       }
     }
   }
   (0, import_expandStyles.fixStyles)(style);
-  if (import_platform.isWeb) {
+  if (import_constants.isWeb) {
     (0, import_getStylesAtomic.styleToCSS)(style);
   }
-  if (defaultClassNames) {
-    classNames = __spreadValues(__spreadValues({}, defaultClassNames), classNames);
+  if (flatTransforms) {
+    if (process.env.NODE_ENV === "development" && debug) {
+      console.log(`Merging flat transforms, transform before`, [...style.transform || []], flatTransforms);
+    }
+    (0, import_mergeTransform.mergeTransforms)(style, flatTransforms, true);
   }
-  if (shouldDoClasses) {
-    const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
-    for (const atomicStyle of atomic) {
-      const key = atomicStyle.property;
-      if (!state.dynamicStylesInline) {
-        addStyle(atomicStyle.identifier, atomicStyle.rules.join(";"));
-        mergeClassName(key, atomicStyle.identifier);
-      } else {
-        style[key] = atomicStyle.value;
+  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) {
+      if (style["$$css"]) {
+      } else {
+        const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
+        for (const atomicStyle of atomic) {
+          const key = atomicStyle.property;
+          addStyleToInsertRules(rulesToInsert, atomicStyle);
+          mergeClassName(transforms, classNames, key, atomicStyle.identifier);
+        }
+        if (!IS_STATIC) {
+          style = {};
+        }
+      }
+    }
     if (transforms) {
       for (const namespace in transforms) {
         if (!transforms[namespace]) {
@@ -353,40 +566,125 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
         }
         const [hash, val] = transforms[namespace];
         const identifier = `_transform${hash}`;
-        if (import_platform.isClient) {
-          if (!import_insertStyleRule.insertedTransforms[identifier]) {
-            const rule = `.${identifier} { transform: ${val}; }`;
-            addStyle(identifier, rule);
-          }
+        if (import_constants.isClient && !import_insertStyleRule.insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`;
+          addStyleToInsertRules(rulesToInsert, {
+            identifier,
+            rules: [rule],
+            property: namespace
+          });
         }
         classNames[namespace] = identifier;
       }
     }
   }
   if (process.env.NODE_ENV === "development" && debug === "verbose") {
-    if (typeof document !== "undefined") {
-      console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
+    if (import_isDevTools.isDevTools) {
+      console.groupCollapsed("  \u{1F539} styles =>");
+      const logs = { style, pseudos, medias, classNames, transforms, viewProps, state, rulesToInsert, parentSplitStyles, flatTransforms };
+      for (const key in logs) {
+        console.log(key, logs[key]);
+      }
+      console.groupEnd();
     }
   }
+  if (className) {
+    classNames.className = className;
+  }
   return {
+    fontFamily,
     viewProps,
     style,
     medias,
+    mediaKeys,
     pseudos,
     classNames,
     rulesToInsert
   };
 };
-const getSubStyle = (styleIn, staticConfig, theme, props, state, conf2, avoidDefaultProps) => {
+function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = false) {
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if (!val)
+      return;
+    if (val.startsWith("_transform-")) {
+      const namespace = isMediaOrPseudo ? key : "transform";
+      let transform = import_insertStyleRule.insertedTransforms[val];
+      if (import_constants.isClient) {
+        if (!transform) {
+          (0, import_insertStyleRule.updateInserted)();
+          transform = import_insertStyleRule.insertedTransforms[val];
+          if (process.env.NODE_ENV === "development") {
+            if (!transform) {
+              console.warn("no transform found", { insertedTransforms: import_insertStyleRule.insertedTransforms, val });
+            }
+          }
+        }
+        if (!transform) {
+          if (import_constants.isWeb && val[0] !== "_") {
+            transform = val;
+          }
+        }
+      }
+      transforms[namespace] = transforms[namespace] || ["", ""];
+      const identifier = val.replace("_transform", "");
+      transforms[namespace][0] += identifier;
+      if (transform) {
+        transforms[namespace][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] = usedKeys[key] || 1;
+  }
+  if (val && val[0] === "_") {
+    classNames[key] = val;
+  } else if (key in import_helpers.stylePropsTransform) {
+    flatTransforms || (flatTransforms = {});
+    flatTransforms[key] = val;
+  } else {
+    const out = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+    if (key in import_helpers.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, props, state, avoidDefaultProps);
+    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 (skey in import_helpers.stylePropsTransform) {
+      if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) {
         (0, import_mergeTransform.mergeTransform)(styleOut, skey, sval);
       } else {
         styleOut[skey] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
@@ -398,25 +696,38 @@ const getSubStyle = (styleIn, staticConfig, theme, props, state, conf2, avoidDef
 };
 const insertSplitStyles = (...args) => {
   const res = getSplitStyles(...args);
-  if (res.rulesToInsert) {
-    for (const [prop, rule] of res.rulesToInsert) {
-      (0, import_insertStyleRule.insertStyleRule)(prop, rule);
-    }
-  }
+  (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
   return res;
 };
-const useInsertEffectCompat = import_platform.isWeb ? import_react.useInsertionEffect || import_platform.useIsomorphicLayoutEffect : () => {
+const useInsertEffectCompat = import_constants.isWeb ? import_react.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
 };
 const useSplitStyles = (...args) => {
   const res = getSplitStyles(...args);
-  useInsertEffectCompat(() => {
-    if (!res.rulesToInsert)
+  if (!import_constants.isRSC) {
+    useInsertEffectCompat(() => {
+      (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
+    }, [res.rulesToInsert]);
+  }
+  return res;
+};
+function addStyleToInsertRules(rulesToInsert, styleObject) {
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if (!(0, import_insertStyleRule.shouldInsertStyleRules)(styleObject)) {
       return;
-    for (const [prop, rule] of res.rulesToInsert) {
-      (0, import_insertStyleRule.insertStyleRule)(prop, rule);
     }
-  }, [res.rulesToInsert]);
-  return res;
+    (0, import_insertStyleRule.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"
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -424,7 +735,6 @@ const useSplitStyles = (...args) => {
   getSplitStyles,
   getSubStyle,
   insertSplitStyles,
-  pseudoCNInverse,
   useSplitStyles
 });
 //# sourceMappingURL=getSplitStyles.js.map