@tamagui/core 1.0.0-beta.8 → 1.0.1-beta.100

package/dist/cjs/helpers/getSplitStyles.js

@@ -16,7 +16,6 @@ var __spreadValues = (a, b) => {
     }
   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,10 +31,11 @@ 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);
@@ -45,149 +45,203 @@ var import_conf = require("../conf");
 var import_platform = require("../constants/platform");
 var import_useMedia = require("../hooks/useMedia");
 var import_createMediaStyle = require("./createMediaStyle");
-var import_fixNativeShadow = require("./fixNativeShadow");
+var import_expandStyles = require("./expandStyles");
 var import_getStylesAtomic = require("./getStylesAtomic");
 var import_insertStyleRule = require("./insertStyleRule");
-const skipProps = {
+var import_mergeTransform = require("./mergeTransform");
+var import_normalizeValueWithProperty = require("./normalizeValueWithProperty");
+var import_pseudoDescriptors = require("./pseudoDescriptors");
+const skipProps = __spreadValues({
   animation: true,
   animateOnly: true,
-  debug: 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
+});
 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 });
-  }
+const PROP_SPLIT = "-";
+const pseudoCNInverse = {
+  hover: "hoverStyle",
+  focus: "focusStyle",
+  press: "pressStyle"
+};
+const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, debug) => {
+  var _a, _b;
   conf = conf || (0, import_conf.getConfig)();
   const validStyleProps = staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles;
   const viewProps = {};
-  const style = {};
-  const classNames = __spreadValues({}, defaultClassNames);
   const pseudos = {};
   const medias = {};
-  const rulesToInsert = [];
-  function addStyle(prop, rule) {
-    rulesToInsert.push([prop, rule]);
-    (0, import_insertStyleRule.updateInsertedCache)(prop, rule);
+  const usedKeys = /* @__PURE__ */ new Set();
+  let style = {};
+  if (state.hasTextAncestor) {
+    style.display = "inline-flex";
   }
-  __name(addStyle, "addStyle");
-  let cur = null;
-  let transforms = {};
-  function mergeClassName(key, val) {
-    if (!val) {
-      return;
+  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]);
+      }
     }
-    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);
+  }
+  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 (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 (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 });
           }
         }
-      }
-      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;
-        }
-      }
-    }
-    if (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
-      for (const key in cur) {
-        if (key in import_helpers.stylePropsTransform) {
-          (0, import_helpers.mergeTransform)(style, key, cur[key]);
-        } else {
-          style[key] = cur[key];
+        transforms = transforms || {};
+        transforms[namespace] = transforms[namespace] || ["", ""];
+        const identifier = val.replace("_transform", "");
+        transforms[namespace][0] += identifier;
+        if (transform) {
+          transforms[namespace][1] += transform;
         }
+      } else {
+        classNames[key] = val;
       }
     }
-    cur = null;
   }
-  __name(push, "push");
-  for (const keyInit in props) {
-    if (skipProps[keyInit]) {
+  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))
+      continue;
+    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();
+      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];
+          }
+        } else {
+          usedKeys.add(key);
+          style[key] = valInit;
+        }
+      }
       continue;
     }
-    if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
-      push();
-      mergeClassName(keyInit, valInit);
-      continue;
+    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(fullKey, cn, isMediaOrPseudo2);
+          } else {
+            nonTamaguis += " " + cn;
+          }
+        }
+        if (nonTamaguis) {
+          usedKeys.add(keyInit);
+          mergeClassName(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(keyInit, valInit, isMediaOrPseudo2);
+          continue;
+        }
+      }
     }
     if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
       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);
+    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);
+    }
+    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)
@@ -196,12 +250,17 @@ 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] });
+        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) {
-            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);
+              addStyle(style2.identifier, style2.rules.join(";"));
+              mergeClassName(fullKey, style2.identifier, isMediaOrPseudo);
+            }
           }
         }
         continue;
@@ -210,25 +269,29 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         const mediaKey = key;
         const mediaKeyShort = mediaKey.slice(1);
         if (!import_useMedia.mediaQueryConfig[mediaKeyShort]) {
-          viewProps[key] = val;
+          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(val, staticConfig, theme, props, state, conf);
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.log("  \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
         }
-        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);
+              addStyle(out.identifier, out.styleRule);
+              mergeClassName(fullKey, out.identifier, true);
+            }
           }
         } else {
           if (import_useMedia.mediaState[mediaKey]) {
-            push();
-            if (process.env.NODE_ENV === "development" && props["debug"]) {
+            if (process.env.NODE_ENV === "development" && debug) {
               console.log("apply media style", mediaKey, import_useMedia.mediaState);
             }
             Object.assign(shouldDoClasses ? medias : style, mediaStyle);
@@ -237,38 +300,73 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         continue;
       }
       if (!import_platform.isWeb && key === "pointerEvents") {
+        usedKeys.add(key);
         viewProps[key] = val;
         continue;
       }
       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 (key !== "animation" && key !== "debug") {
-          push();
+        if (!skipProps[key]) {
           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_platform.isWeb) {
+    (0, import_getStylesAtomic.styleToCSS)(style);
+  }
+  if (defaultClassNames) {
+    classNames = __spreadValues(__spreadValues({}, defaultClassNames), classNames);
+  }
+  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 (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_platform.isClient) {
+          if (!import_insertStyleRule.insertedTransforms[identifier]) {
+            const rule = `.${identifier} { transform: ${val}; }`;
+            addStyle(identifier, rule);
+          }
+        }
+        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 (typeof document !== "undefined") {
+      console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
+    }
   }
   return {
     viewProps,
@@ -278,53 +376,55 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     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);
-  }
-  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);
-    }
-  });
-  return res;
-}, "useSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
+};
+const getSubStyle = (styleIn, staticConfig, theme, props, state, conf2, 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, props, state, 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);
+  if (res.rulesToInsert) {
+    for (const [prop, rule] of res.rulesToInsert) {
+      (0, import_insertStyleRule.insertStyleRule)(prop, rule);
+    }
   }
-}
-__name(normalizeStyleObject, "normalizeStyleObject");
+  return res;
+};
+const useInsertEffectCompat = import_platform.isWeb ? import_react.useInsertionEffect || import_platform.useIsomorphicLayoutEffect : () => {
+};
+const useSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  useInsertEffectCompat(() => {
+    if (!res.rulesToInsert)
+      return;
+    for (const [prop, rule] of res.rulesToInsert) {
+      (0, import_insertStyleRule.insertStyleRule)(prop, rule);
+    }
+  }, [res.rulesToInsert]);
+  return res;
+};
 // 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