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

package/dist/esm/helpers/getSplitStyles.js

@@ -1,167 +1,227 @@
 var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import {
-  mergeTransform,
-  stylePropsText,
-  stylePropsTransform,
-  validPseudoKeys,
-  validStyles
-} from "@tamagui/helpers";
+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;
+};
+import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from "@tamagui/helpers";
 import { useInsertionEffect } from "react";
 import { getConfig } from "../conf";
 import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
-import { fixNativeShadow } from "./fixNativeShadow";
-import { getStylesAtomic } from "./getStylesAtomic";
+import { fixStyles } from "./expandStyles";
+import { getAtomicStyle, getStylesAtomic, styleToCSS } from "./getStylesAtomic";
 import {
   insertStyleRule,
   insertedTransforms,
   updateInserted,
   updateInsertedCache
 } from "./insertStyleRule";
-const skipProps = {
+import { mergeTransform } from "./mergeTransform";
+import { normalizeValueWithProperty } from "./normalizeValueWithProperty";
+import { pseudoDescriptors } from "./pseudoDescriptors";
+const skipProps = __spreadValues({
   animation: true,
   animateOnly: true,
-  debug: true
-};
+  debug: true,
+  componentName: true
+}, !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 || getConfig();
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
-  const style = {};
-  const classNames = {
-    ...defaultClassNames
-  };
   const pseudos = {};
   const medias = {};
-  const rulesToInsert = [];
-  function addStyle(prop, rule) {
-    rulesToInsert.push([prop, rule]);
-    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 (updateInsertedCache(prop, rule) || !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 = insertedTransforms[val];
-      if (isClient) {
-        if (!transform) {
-          updateInserted();
-          transform = insertedTransforms[val];
-        }
-        if (!transform) {
-          if (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 = insertedTransforms[val];
+        if (isClient) {
+          if (!transform) {
+            updateInserted();
+            transform = insertedTransforms[val];
+            if (process.env.NODE_ENV === "development") {
+              if (!transform) {
+                console.warn("no transform found", { insertedTransforms, val });
+              }
+            }
           }
-        }
-        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
-        }
-        if (process.env.NODE_ENV === "development") {
           if (!transform) {
-            console.trace("NO TRANSFORM?", { key, val, transform });
+            if (isWeb && val[0] !== "_") {
+              transform = val;
+            }
+          }
+          if (process.env.NODE_ENV === "development" && debug === "verbose") {
+            console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, 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 (isWeb && !state.noClassNames) {
-      const atomic = 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 (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
-      for (const key in cur) {
-        if (key in stylePropsTransform) {
-          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 = (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 (!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 = validStyles[keyInit];
+        const isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && 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 = 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) {
+      if (val === void 0)
         continue;
-      }
-      if (key !== "target" && val && val[0] === "_") {
-        mergeClassName(key, val);
-        continue;
-      }
       isMedia = key[0] === "$";
       isPseudo = 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)
@@ -170,12 +230,17 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           continue;
         }
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
-        if (isWeb && !state.noClassNames) {
-          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, conf, true);
+        if (shouldDoClasses) {
+          const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key]);
           for (const style2 of pseudoStyles) {
-            addStyle(style2.identifier, style2.rules[0]);
-            mergeClassName(`${style2.property}-${key}`, style2.identifier);
+            const postfix = ((_b = 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;
@@ -184,25 +249,29 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         const mediaKey = key;
         const mediaKeyShort = mediaKey.slice(1);
         if (!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 = isWeb && !state.noClassNames;
         if (shouldDoClasses) {
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
-            const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
-            addStyle(out2.identifier, out2.styleRule);
-            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
+            const out = createMediaStyle(style2, mediaKeyShort, 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 (mediaState[mediaKey]) {
-            push();
-            if (process.env.NODE_ENV === "development" && props["debug"]) {
+            if (process.env.NODE_ENV === "development" && debug) {
               console.log("apply media style", mediaKey, mediaState);
             }
             Object.assign(shouldDoClasses ? medias : style, mediaStyle);
@@ -211,38 +280,73 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         continue;
       }
       if (!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 stylePropsTransform) {
+          mergeTransform(style, key, val, true);
+        } else {
+          style[key] = 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 (isClient) {
-        if (!insertedTransforms[identifier]) {
-          const rule = `.${identifier} { transform: ${val}; }`;
-          addStyle(identifier, rule);
+  fixStyles(style);
+  if (isWeb) {
+    styleToCSS(style);
+  }
+  if (defaultClassNames) {
+    classNames = __spreadValues(__spreadValues({}, defaultClassNames), classNames);
+  }
+  if (shouldDoClasses) {
+    const atomic = 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 (isClient) {
+          if (!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,
@@ -252,52 +356,54 @@ 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) {
-    insertStyleRule(prop, rule);
-  }
-  return res;
-}, "insertSplitStyles");
-const effect = useInsertionEffect || useIsomorphicLayoutEffect;
-const useSplitStyles = /* @__PURE__ */ __name((...args) => {
-  const res = getSplitStyles(...args);
-  effect(() => {
-    for (const [prop, rule] of res.rulesToInsert) {
-      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 stylePropsTransform) {
         mergeTransform(styleOut, skey, sval);
       } else {
-        styleOut[skey] = sval;
+        styleOut[skey] = normalizeValueWithProperty(sval, key);
       }
     }
   }
-  normalizeStyleObject(styleOut);
+  fixStyles(styleOut);
   return styleOut;
-}, "getSubStyle");
-function normalizeStyleObject(style) {
-  if (!isWeb) {
-    fixNativeShadow(style);
+};
+const insertSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  if (res.rulesToInsert) {
+    for (const [prop, rule] of res.rulesToInsert) {
+      insertStyleRule(prop, rule);
+    }
   }
-}
-__name(normalizeStyleObject, "normalizeStyleObject");
+  return res;
+};
+const useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {
+};
+const useSplitStyles = (...args) => {
+  const res = getSplitStyles(...args);
+  useInsertEffectCompat(() => {
+    if (!res.rulesToInsert)
+      return;
+    for (const [prop, rule] of res.rulesToInsert) {
+      insertStyleRule(prop, rule);
+    }
+  }, [res.rulesToInsert]);
+  return res;
+};
 export {
+  PROP_SPLIT,
   getSplitStyles,
   getSubStyle,
   insertSplitStyles,
-  normalizeStyleObject,
+  pseudoCNInverse,
   useSplitStyles
 };
 //# sourceMappingURL=getSplitStyles.js.map