@tamagui/core 1.0.1-beta.19 → 1.0.1-beta.190

package/dist/cjs/helpers/getSplitStyles.js

@@ -1,22 +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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -32,181 +18,200 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
+  PROP_SPLIT: () => PROP_SPLIT,
   getSplitStyles: () => getSplitStyles,
   getSubStyle: () => getSubStyle,
   insertSplitStyles: () => insertSplitStyles,
-  normalizeStyleObject: () => normalizeStyleObject,
+  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_fixNativeShadow = require("./fixNativeShadow");
+var import_createPropMapper = require("./createPropMapper");
+var import_expandStyles = require("./expandStyles");
 var import_getStylesAtomic = require("./getStylesAtomic");
 var import_insertStyleRule = require("./insertStyleRule");
-const skipProps = __spreadValues({
+var import_mergeTransform = require("./mergeTransform");
+var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.js");
+var import_pseudoDescriptors = require("./pseudoDescriptors");
+const skipProps = {
   animation: true,
   animateOnly: true,
-  debug: true
-}, !import_platform.isWeb && {
-  tag: true,
-  whiteSpace: true,
-  wordWrap: true,
-  textOverflow: true,
-  textDecorationDistance: true,
-  userSelect: true,
-  selectable: true,
-  cursor: true,
-  contain: true,
-  pointerEvents: true,
-  boxSizing: true,
-  boxShadow: true
-});
-let conf;
-const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
-  var _a;
-  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-    console.log("  \xBB getSplitStyles", { props, state, defaultClassNames });
+  debug: true,
+  componentName: true,
+  ...!import_constants.isWeb && {
+    tag: true,
+    whiteSpace: true,
+    wordWrap: true,
+    textOverflow: true,
+    textDecorationDistance: true,
+    userSelect: true,
+    selectable: true,
+    cursor: true,
+    contain: true,
+    boxSizing: true,
+    boxShadow: true
   }
-  conf = conf || (0, import_conf.getConfig)();
+};
+let conf;
+const PROP_SPLIT = "-";
+const pseudoCNInverse = {
+  hover: "hoverStyle",
+  focus: "focusStyle",
+  press: "pressStyle"
+};
+const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, languageContext, debug) => {
+  var _a, _b;
+  conf = conf || (0, import_config.getConfig)();
   const validStyleProps = staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles;
+  const mediaKeys = [];
   const viewProps = {};
-  const style = {};
-  const classNames = __spreadValues({}, defaultClassNames);
   const pseudos = {};
   const medias = {};
+  const mediaState = state.mediaState || import_useMedia.mediaState;
+  const usedKeys = /* @__PURE__ */ new Set();
+  const propKeys = Object.keys(props);
+  const shouldDoClasses = staticConfig.acceptsClassName && (import_constants.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames && !props.animation;
+  const len = propKeys.length;
   const rulesToInsert = [];
-  function addStyle(prop, rule) {
-    rulesToInsert.push([prop, rule]);
-    (0, import_insertStyleRule.updateInsertedCache)(prop, rule);
+  const style = {};
+  if (state.hasTextAncestor) {
+    style.display = "inline-flex";
   }
-  __name(addStyle, "addStyle");
-  let cur = null;
-  let transforms = {};
-  function mergeClassName(key, val) {
-    if (!val) {
-      return;
+  const classNames = {};
+  const transforms = {};
+  let fontFamily;
+  for (let i = len - 1; i >= 0; i--) {
+    let keyInit = propKeys[i];
+    const valInit = props[keyInit];
+    const expandedKey = conf.shorthands[keyInit];
+    if (expandedKey) {
+      keyInit = expandedKey;
     }
-    if (val.startsWith("_transform-")) {
-      const isMediaOrPseudo = key !== "transform";
-      const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
-      const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
-      let transform = import_insertStyleRule.insertedTransforms[val];
-      if (import_platform.isClient) {
-        if (!transform) {
-          (0, import_insertStyleRule.updateInserted)();
-          transform = import_insertStyleRule.insertedTransforms[val];
-        }
-        if (!transform) {
-          if (import_platform.isWeb && val[0] !== "_") {
-            transform = val;
-          } else {
-            console.trace("?", key, val, cur, props, state);
-          }
-        }
-        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms: import_insertStyleRule.insertedTransforms });
-        }
-        if (process.env.NODE_ENV === "development") {
-          if (!transform) {
-            console.trace("NO TRANSFORM?", { key, val, transform });
+    if (usedKeys.has(keyInit))
+      continue;
+    if (skipProps[keyInit])
+      continue;
+    if (!import_constants.isWeb && keyInit.startsWith("data-"))
+      continue;
+    if (keyInit === "style" || keyInit.startsWith("_style")) {
+      if (!valInit)
+        continue;
+      for (const key in valInit) {
+        if (usedKeys.has(key))
+          continue;
+        if (valInit && typeof valInit === "object") {
+          for (const skey in valInit) {
+            if (usedKeys.has(skey))
+              continue;
+            usedKeys.add(skey);
+            style[skey] = valInit[skey];
           }
-        }
-      }
-      transforms[namespace] = transforms[namespace] || ["", ""];
-      const identifier = val.replace("_transform", "");
-      transforms[namespace][0] += identifier;
-      if (transform) {
-        transforms[namespace][1] += transform;
-      }
-    } else {
-      classNames[key] = val;
-    }
-  }
-  __name(mergeClassName, "mergeClassName");
-  function push() {
-    if (!cur)
-      return;
-    normalizeStyleObject(cur);
-    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-      console.log("  \xBB getSplitStyles push", cur, state);
-    }
-    if (import_platform.isWeb && !state.noClassNames) {
-      const atomic = (0, import_getStylesAtomic.getStylesAtomic)(cur);
-      for (const atomicStyle of atomic) {
-        if (!state.noClassNames) {
-          addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
-          mergeClassName(atomicStyle.property, atomicStyle.identifier);
         } else {
-          style[atomicStyle.property] = atomicStyle.value;
+          usedKeys.add(key);
+          style[key] = valInit;
         }
       }
+      continue;
     }
-    if (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
-      for (const key in cur) {
-        if (skipProps[key]) {
+    if (process.env.TAMAGUI_TARGET === "web") {
+      if (keyInit === "className") {
+        let nonTamaguis = "";
+        if (!valInit)
           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}`;
+            }
+            usedKeys.add(fullKey);
+            mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo2);
+          } else {
+            nonTamaguis += " " + cn;
+          }
         }
-        if (key in import_helpers.stylePropsTransform) {
-          (0, import_helpers.mergeTransform)(style, key, cur[key]);
-        } else {
-          style[key] = cur[key];
+        if (nonTamaguis) {
+          usedKeys.add(keyInit);
+          mergeClassName(transforms, classNames, keyInit, nonTamaguis);
+        }
+        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(transforms, classNames, keyInit, valInit, isMediaOrPseudo2);
+          continue;
         }
       }
     }
-    cur = null;
-  }
-  __name(push, "push");
-  for (const keyInit in props) {
-    if (skipProps[keyInit]) {
-      continue;
-    }
-    if (!import_platform.isWeb && keyInit.startsWith("data-")) {
-      continue;
-    }
-    const valInit = props[keyInit];
-    if (keyInit === "style" || keyInit.startsWith("_style")) {
-      push();
-      cur = valInit;
-      push();
-      continue;
-    }
-    if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
-      push();
-      mergeClassName(keyInit, valInit);
-      continue;
-    }
-    if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
-      viewProps[keyInit] = valInit;
+    if (state.keepVariantsAsProps) {
+      if (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants || staticConfig.variants && keyInit in staticConfig.variants) {
+        viewProps[keyInit] = valInit;
+      }
     }
     let isMedia = keyInit[0] === "$";
     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);
       viewProps[keyInit] = valInit;
       continue;
     }
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
-    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
-    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-      console.log("  \xBB getSplitStyles", keyInit, expanded);
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      console.groupCollapsed("  \u{1F539} styles", keyInit, valInit);
+    }
+    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.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") {
+      console.log("expanded", expanded);
+      console.log("usedKeys", [...usedKeys]);
+      console.groupEnd();
+    }
+    if (!expanded) {
+      continue;
     }
     for (const [key, val] of expanded) {
-      if (val === void 0) {
-        continue;
-      }
-      if (key !== "target" && val && val[0] === "_") {
-        mergeClassName(key, val);
+      if (val === void 0)
         continue;
-      }
       isMedia = key[0] === "$";
       isPseudo = import_helpers.validPseudoKeys[key];
-      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key)) {
-        viewProps[key] = val;
+      isMediaOrPseudo = isMedia || isPseudo;
+      if (!isMediaOrPseudo) {
+        if (usedKeys.has(key))
+          continue;
+      }
+      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key) || staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key)) {
+        usedKeys.add(key);
+        viewProps[key] = props[key] ?? val;
       }
       if (isPseudo) {
         if (!val)
@@ -215,12 +220,31 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           continue;
         }
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
-        if (import_platform.isWeb && !state.noClassNames) {
-          const pseudoStyles = (0, import_getStylesAtomic.getStylesAtomic)({ [key]: pseudos[key] });
+        const pseudoStyleObject = getSubStyle(
+          key,
+          val,
+          staticConfig,
+          theme,
+          props,
+          state,
+          conf,
+          languageContext,
+          true
+        );
+        pseudos[key] = {
+          ...pseudoStyleObject,
+          ...pseudos[key]
+        };
+        if (shouldDoClasses && key !== "enterStyle" && key !== "exitStyle") {
+          const pseudoStyles = (0, import_getStylesAtomic.getAtomicStyle)(pseudoStyleObject, import_pseudoDescriptors.pseudoDescriptors[key]);
           for (const style2 of pseudoStyles) {
-            addStyle(style2.identifier, style2.rules[0]);
-            mergeClassName(`${style2.property}-${key}`, style2.identifier);
+            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);
+              addStyleToInsertRules(rulesToInsert, style2);
+              mergeClassName(transforms, classNames, fullKey, style2.identifier, isMediaOrPseudo);
+            }
           }
         }
         continue;
@@ -228,122 +252,271 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       if (isMedia) {
         const mediaKey = key;
         const mediaKeyShort = mediaKey.slice(1);
+        mediaKeys.push(mediaKeyShort);
         if (!import_useMedia.mediaQueryConfig[mediaKeyShort]) {
-          viewProps[key] = val;
+          if (process.env.NODE_ENV === "development" && debug) {
+            console.warn(
+              `Warning: using a $ prefixed prop that doesn't match to a media query, may be an error`,
+              key
+            );
+          }
+          if (!usedKeys.has(key)) {
+            viewProps[key] = val;
+          }
           continue;
         }
-        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
-        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-          console.log("  \xBB getSplitStyles mediaStyle", mediaKey, mediaStyle, props);
+        const mediaStyle = getSubStyle(
+          key,
+          val,
+          staticConfig,
+          theme,
+          props,
+          state,
+          conf,
+          languageContext
+        );
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.log(`  \u{1F4FA} ${mediaKey}`, mediaState[mediaKeyShort], { mediaKey, mediaStyle, props, shouldDoClasses, mediaState: { ...mediaState } });
         }
-        const shouldDoClasses = import_platform.isWeb && !state.noClassNames;
         if (shouldDoClasses) {
           const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
           for (const style2 of mediaStyles) {
-            const out2 = (0, import_createMediaStyle.createMediaStyle)(style2, mediaKeyShort, import_useMedia.mediaQueryConfig);
-            addStyle(out2.identifier, out2.styleRule);
-            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
+            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);
+              addStyleToInsertRules(rulesToInsert, out);
+              mergeClassName(transforms, classNames, fullKey, out.identifier, true);
+            }
           }
         } else {
-          if (import_useMedia.mediaState[mediaKey]) {
-            push();
-            if (process.env.NODE_ENV === "development" && props["debug"]) {
-              console.log("apply media style", mediaKey, import_useMedia.mediaState);
+          if (mediaState[mediaKeyShort]) {
+            if (process.env.NODE_ENV === "development" && debug) {
+              console.log("apply media style", mediaKey, mediaState);
+            }
+            if (shouldDoClasses) {
+              Object.assign(medias, mediaStyle);
+            } else {
+              for (const key2 in mediaStyle) {
+                usedKeys.add(key2);
+                style[key2] = mediaStyle[key2];
+                if (key2 === "fontFamily") {
+                  fontFamily = mediaStyle[key2];
+                }
+              }
             }
-            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
           }
         }
         continue;
       }
-      if (!import_platform.isWeb && key === "pointerEvents") {
+      if (!import_constants.isWeb && key === "pointerEvents") {
+        usedKeys.add(key);
         viewProps[key] = val;
         continue;
       }
+      if (key === "fontFamily" && !fontFamily && valInit && val) {
+        fontFamily = valInit[0] === "$" ? valInit : val;
+      }
       if (validStyleProps[key]) {
-        cur = cur || {};
-        cur[key] = val;
+        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);
+        }
         continue;
       }
       if (!staticConfig.variants || !(key in staticConfig.variants)) {
         if (!skipProps[key]) {
-          push();
           viewProps[key] = val;
+          usedKeys.add(key);
         }
       }
     }
   }
-  push();
-  if (transforms) {
-    for (const namespace in transforms) {
-      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);
+  (0, import_expandStyles.fixStyles)(style);
+  if (import_constants.isWeb) {
+    (0, import_getStylesAtomic.styleToCSS)(style);
+  }
+  if (defaultClassNames) {
+    for (const key in defaultClassNames) {
+      if (!(key in classNames)) {
+        classNames[key] = defaultClassNames[key];
+      }
+    }
+  }
+  if (shouldDoClasses) {
+    const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
+    for (const atomicStyle of atomic) {
+      const key = atomicStyle.property;
+      if (key === "pointerEvents" || !state.dynamicStylesInline) {
+        addStyleToInsertRules(rulesToInsert, atomicStyle);
+        mergeClassName(transforms, classNames, key, atomicStyle.identifier);
+      } else {
+        style[key] = atomicStyle.value;
+      }
+    }
+  }
+  if (process.env.TAMAGUI_TARGET === "web") {
+    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 (import_constants.isClient) {
+          if (!import_insertStyleRule.insertedTransforms[identifier]) {
+            const rule = `.${identifier} { transform: ${val}; }`;
+            addStyleToInsertRules(rulesToInsert, {
+              identifier,
+              rules: [rule],
+              property: namespace
+            });
+          }
+        }
+        classNames[namespace] = identifier;
       }
-      classNames[namespace] = identifier;
     }
   }
-  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-    console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    if (import_isDevTools.isDevTools) {
+      console.groupCollapsed("  \u{1F539} styles =>");
+      const logs = { style, pseudos, medias, classNames, viewProps, state, rulesToInsert };
+      for (const key in logs) {
+        console.log(key, logs[key]);
+      }
+      console.groupEnd();
+    }
   }
   return {
+    fontFamily,
     viewProps,
     style,
     medias,
+    mediaKeys,
     pseudos,
     classNames,
     rulesToInsert
   };
-}, "getSplitStyles");
-const insertSplitStyles = /* @__PURE__ */ __name((...args) => {
-  const res = getSplitStyles(...args);
-  for (const [prop, rule] of res.rulesToInsert) {
-    (0, import_insertStyleRule.insertStyleRule)(prop, rule);
+};
+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;
+    }
   }
-  return res;
-}, "insertSplitStyles");
-const effect = import_react.useInsertionEffect || import_platform.useIsomorphicLayoutEffect;
-const useSplitStyles = /* @__PURE__ */ __name((...args) => {
-  const res = getSplitStyles(...args);
-  effect(() => {
-    for (const [prop, rule] of res.rulesToInsert) {
-      (0, import_insertStyleRule.insertStyleRule)(prop, rule);
+}
+const propProxies = /* @__PURE__ */ new WeakMap();
+function getSubStyleProxiedProps(defaultProps, baseProps, specificProps) {
+  if (!specificProps) {
+    return baseProps;
+  }
+  if (propProxies.has(specificProps)) {
+    return propProxies.get(specificProps);
+  }
+  const next = new Proxy(specificProps, {
+    has(_, key) {
+      return key in defaultProps || key in specificProps || key in baseProps;
+    },
+    get(_, key) {
+      return defaultProps[key] ?? specificProps[key] ?? baseProps[key];
     }
   });
-  return res;
-}, "useSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
+  propProxies.set(specificProps, next);
+  return next;
+}
+const getSubStyle = (subKey, styleIn, staticConfig, theme, props, state, conf2, languageContext, avoidDefaultProps) => {
   const styleOut = {};
-  for (const key in styleIn) {
+  for (let key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
-    const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
+    key = conf2.shorthands[key] || key;
+    const expanded = staticConfig.propMapper(
+      key,
+      val,
+      theme,
+      getSubStyleProxiedProps(staticConfig.defaultProps, props, props[subKey]),
+      state,
+      languageContext,
+      avoidDefaultProps
+    );
+    if (!expanded)
+      continue;
     for (const [skey, sval] of expanded) {
       if (skey in import_helpers.stylePropsTransform) {
-        (0, import_helpers.mergeTransform)(styleOut, skey, sval);
+        (0, import_mergeTransform.mergeTransform)(styleOut, skey, sval);
       } else {
-        styleOut[skey] = sval;
+        styleOut[skey] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       }
     }
   }
-  normalizeStyleObject(styleOut);
+  (0, import_expandStyles.fixStyles)(styleOut);
   return styleOut;
-}, "getSubStyle");
-function normalizeStyleObject(style) {
-  if (!import_platform.isWeb) {
-    (0, import_fixNativeShadow.fixNativeShadow)(style);
+};
+const insertSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
+  return res;
+};
+const useInsertEffectCompat = import_constants.isWeb ? import_react.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
+};
+const useSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  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;
+    }
+    (0, import_insertStyleRule.updateRules)(styleObject.identifier, styleObject.rules);
+    rulesToInsert.push(styleObject);
   }
 }
-__name(normalizeStyleObject, "normalizeStyleObject");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PROP_SPLIT,
   getSplitStyles,
   getSubStyle,
   insertSplitStyles,
-  normalizeStyleObject,
+  pseudoCNInverse,
   useSplitStyles
 });
 //# sourceMappingURL=getSplitStyles.js.map