@tamagui/core 1.0.1-beta.46 → 1.0.1-beta.49

package/dist/jsx/createTamagui.js

@@ -3,7 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { configListeners, getHasConfigured, setConfig } from "./conf";
 import { THEME_CLASSNAME_PREFIX } from "./constants/constants";
 import { isWeb } from "./constants/platform";
-import { Variable, createCSSVariable, createVariable, isVariable } from "./createVariable";
+import { createCSSVariable, createVariable, isVariable } from "./createVariable";
 import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
 import { getInsertedRules } from "./helpers/insertStyleRule";
 import { configureMedia } from "./hooks/useMedia";
@@ -29,6 +29,7 @@ function createTamagui(config) {
   });
   const themeConfig = (() => {
     var _a, _b, _c;
+    const themes = { ...config.themes };
     let cssRules = [];
     const varsByValue = /* @__PURE__ */ new Map();
     if (isWeb) {
@@ -61,39 +62,74 @@ function createTamagui(config) {
     }
     const hasDarkLight = "light" in config.themes && "dark" in config.themes;
     const CNP = `.${THEME_CLASSNAME_PREFIX}`;
-    for (const themeName in config.themes) {
+    const existing = /* @__PURE__ */ new WeakMap();
+    const dedupedThemes = {};
+    for (const themeName in themes) {
+      const rawTheme = themes[themeName];
+      if (existing.has(rawTheme)) {
+        const e = existing.get(rawTheme);
+        e.names.push(themeName);
+        continue;
+      }
       const theme = { ...config.themes[themeName] };
-      config.themes[themeName] = theme;
+      for (const key in theme) {
+        ensureThemeVariable(theme, key);
+      }
+      themes[themeName] = theme;
+      dedupedThemes[themeName] = {
+        names: [themeName],
+        theme
+      };
+      existing.set(theme, dedupedThemes[themeName]);
+    }
+    for (const themeName in dedupedThemes) {
+      const { theme, names } = dedupedThemes[themeName];
       let vars = "";
       for (const themeKey in theme) {
         if (isWeb) {
           const val = theme[themeKey];
-          const varName = val instanceof Variable ? val.name : (_a = varsByValue[val]) == null ? void 0 : _a.name;
-          vars += `--${themeKey}:${varName ? createCSSVariable(varName) : `${val}`};`;
+          let varName;
+          let varVal;
+          if (isVariable(val)) {
+            varName = val.key;
+            varVal = val.isFloating ? val.val : createCSSVariable(varName);
+          } else {
+            varName = (_a = varsByValue[val]) == null ? void 0 : _a.key;
+            varVal = varName ? createCSSVariable(varName) : `${val}`;
+          }
+          if (process.env.NODE_ENV === "development") {
+            if (!varName) {
+              console.warn("no var name in theme", themeName, themeKey);
+              continue;
+            }
+          }
+          vars += `--${themeKey}:${varVal};`;
         }
-        ensureThemeVariable(theme, themeKey);
       }
       if (isWeb) {
         const isDarkOrLightBase = themeName === "dark" || themeName === "light";
         const isDark = themeName.startsWith("dark");
-        const selector = `${CNP}${themeName}`;
-        const selectors = [selector];
+        const selectors = names.map((name) => {
+          return `${CNP}${name}`;
+        });
         if (hasDarkLight) {
-          const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
-          const order = isDark ? ["dark", "light"] : ["light", "dark"];
-          if (isDarkOrLightBase) {
-            order.reverse();
-          }
-          const [stronger, weaker] = order;
-          const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
-          new Array(max * 2).fill(void 0).forEach((_, pi) => {
-            if (pi % 2 === 1)
-              return;
-            const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
-              return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+          for (const subName of names) {
+            const childSelector = `${CNP}${subName.replace("dark_", "").replace("light_", "")}`;
+            const order = isDark ? ["dark", "light"] : ["light", "dark"];
+            if (isDarkOrLightBase) {
+              order.reverse();
+            }
+            const [stronger, weaker] = order;
+            const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
+            new Array(max * 2).fill(void 0).forEach((_, pi) => {
+              if (pi % 2 === 1)
+                return;
+              const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
+                return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+              });
+              selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
             });
-            selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
-          });
+          }
         }
         const rootSep = config.themeClassNameOnRoot ? "" : " ";
         cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
@@ -111,6 +147,7 @@ function createTamagui(config) {
     Object.freeze(cssRules);
     const css = cssRules.join("\n");
     return {
+      themes,
       cssRules,
       css
     };
@@ -154,10 +191,12 @@ ${getInsertedRules().join("\n")}`;
     shorthands: {},
     media: {},
     ...config,
+    themes: themeConfig.themes,
     Provider: createTamaguiProvider({
       getCSS,
       defaultTheme: "light",
-      ...config
+      ...config,
+      themes: themeConfig.themes
     }),
     fontsParsed,
     themeConfig,
@@ -187,17 +226,19 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
 }, "parseTokens");
 function ensureThemeVariable(theme, key) {
   const val = theme[key];
+  const themeKey = key;
   if (!isVariable(val)) {
     theme[key] = createVariable({
-      key,
-      name: key,
-      val
+      key: themeKey,
+      name: themeKey,
+      val,
+      isFloating: true
     });
   } else {
-    if (val.name !== key) {
+    if (val.name !== themeKey) {
       theme[key] = createVariable({
-        key,
-        name: key,
+        key: val.name,
+        name: themeKey,
         val: val.val
       });
     }

package/dist/jsx/createTheme.js

@@ -1,6 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
+const createTheme = /* @__PURE__ */ __name((theme) => {
+  return theme;
+}, "createTheme");
 export {
   createTheme
 };

package/dist/jsx/createTokens.js

@@ -1,28 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { createVariable } from "./createVariable";
+import { createVariables } from "./createVariables";
 import { validateTokens } from "./helpers/validate";
 function createTokens(tokens) {
   if (process.env.NODE_ENV === "development") {
     validateTokens(tokens);
   }
-  return mapTokensToVariables(tokens);
+  return createVariables(tokens);
 }
 __name(createTokens, "createTokens");
-const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
-  const res = {};
-  for (const key in tokens) {
-    let val = tokens[key];
-    const name = parentPath ? `${parentPath}-${key}` : key;
-    if (val && typeof val === "object") {
-      res[key] = mapTokensToVariables(tokens[key], name);
-    } else {
-      res[key] = createVariable({ val, name, key });
-    }
-  }
-  return res;
-}, "mapTokensToVariables");
 export {
-  createTokens,
-  mapTokensToVariables
+  createTokens
 };

package/dist/jsx/createVariable.js

@@ -4,12 +4,17 @@ var _a;
 import { isWeb } from "./constants/platform";
 const IS_VARIABLE_SYMBOL = "__isVariable__";
 class Variable {
-  constructor({ val, name, key }) {
+  constructor(props) {
     this[_a] = true;
+    this.isFloating = false;
+    const { val, name, key, isFloating } = props;
     this.val = isVariable(val) ? val.val : val;
     this.name = name;
     this.key = key;
-    this.variable = isWeb ? createCSSVariable(name) : this.val;
+    this.variable = isWeb ? createCSSVariable(name) : "";
+    if (isFloating) {
+      this.isFloating = true;
+    }
   }
   toString() {
     return `${isWeb ? this.variable : this.val}`;
@@ -17,9 +22,14 @@ class Variable {
 }
 __name(Variable, "Variable");
 _a = IS_VARIABLE_SYMBOL;
-const createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
+const createVariable = /* @__PURE__ */ __name((props) => {
+  if (isVariable(props)) {
+    return props;
+  }
+  return new Variable(props);
+}, "createVariable");
 function isVariable(v) {
-  return v instanceof Variable || v && v[IS_VARIABLE_SYMBOL];
+  return !!(v instanceof Variable || v && v[IS_VARIABLE_SYMBOL]);
 }
 __name(isVariable, "isVariable");
 function getVariableValue(v) {
@@ -34,12 +44,17 @@ function getVariableName(v) {
   return v;
 }
 __name(getVariableName, "getVariableName");
-const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
-  const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
+const createCSSVariable = /* @__PURE__ */ __name((nameProp, includeVar = true) => {
+  if (process.env.NODE_ENV === "development") {
+    if (!nameProp || typeof nameProp !== "string") {
+      console.warn("invalid name", nameProp);
+      return ``;
+    }
+  }
+  const name = nameProp.replace(/[^a-z0-9\_\-]+/i, "_");
   return includeVar ? `var(--${name})` : name;
 }, "createCSSVariable");
 export {
-  IS_VARIABLE_SYMBOL,
   Variable,
   createCSSVariable,
   createVariable,

package/dist/jsx/createVariables.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createVariable, isVariable } from "./createVariable";
+const createVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
+  const res = {};
+  for (const key in tokens) {
+    let val = tokens[key];
+    const name = parentPath ? `${parentPath}-${key}` : key;
+    if (isVariable(val)) {
+      res[key] = val;
+    } else if (val && typeof val === "object") {
+      if (Array.isArray(val)) {
+        res[key] = val.map((val2, i) => {
+          const skey = `${key}-${i}`;
+          const sname = parentPath ? `${name}-${skey}` : skey;
+          console.log("make it", val2, key, sname);
+          return isVariable(val2) ? val2 : createVariable({
+            val: val2,
+            key: skey,
+            name: sname
+          });
+        });
+      } else {
+        res[key] = createVariables(tokens[key], name);
+      }
+    } else {
+      res[key] = createVariable({ val, name, key });
+    }
+  }
+  return res;
+}, "createVariables");
+export {
+  createVariables
+};

package/dist/jsx/helpers/createPropMapper.js

@@ -6,30 +6,6 @@ import { isVariable } from "../createVariable";
 import { expandStyle, expandStyles } from "./generateAtomicStyles";
 import { getVariantExtras } from "./getVariantExtras";
 import { isObj } from "./isObj";
-function getVariantFunction(variant, key, value) {
-  if (typeof variant === "function") {
-    return variant;
-  }
-  for (const cat in tokenCategories) {
-    if (key in tokenCategories[cat]) {
-      const spreadVariant = variant[`...${cat}`];
-      if (spreadVariant) {
-        return spreadVariant;
-      }
-    }
-  }
-  let fn;
-  if (typeof value === "number") {
-    fn = variant[":number"];
-  } else if (typeof value === "string") {
-    fn = variant[":string"];
-  } else if (value === true || value === false) {
-    fn = variant[":boolean"];
-  }
-  fn = fn || variant[value];
-  return fn || variant["..."] || variant["...size"];
-}
-__name(getVariantFunction, "getVariantFunction");
 const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   const variants = staticConfig.variants || {};
   const defaultProps = staticConfig.defaultProps || {};
@@ -40,26 +16,11 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       return;
     }
     const props = state.fallbackProps || propsIn;
-    const returnVariablesAs = state.resolveVariablesAs || !!props.animation ? "value" : "auto";
+    const returnVariablesAs = state.resolveVariablesAs === "value" || !!props.animation ? "value" : "auto";
     const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
-    const variant = variants && variants[key];
-    if (variant && value !== void 0) {
-      let variantValue = getVariantFunction(variant, key, value);
-      if (variantValue) {
-        if (typeof variantValue === "function") {
-          const fn = variantValue;
-          variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps));
-        }
-        if (isObj(variantValue)) {
-          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
-        }
-        return Object.entries(expandStyles(variantValue));
-      } else {
-        if (process.env.NODE_ENV === "development") {
-          console.warn(`No variant found: ${staticConfig.componentName || "[UnnamedComponent]"} has variant "${key}", but no matching value "${value}"`);
-        }
-        return null;
-      }
+    const variantValue = resolveVariants(key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, "", avoidDefaultProps);
+    if (variantValue) {
+      return variantValue;
     }
     let shouldReturn = value !== void 0 && value !== null;
     if (conf.shorthands[key]) {
@@ -79,22 +40,56 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   }, "mapper");
   return mapper;
 }, "createPropMapper");
-const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, resolveAs) => {
+const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps = false) => {
+  var _a;
+  const variant = variants && variants[key];
+  if (variant && value !== void 0) {
+    let variantValue = getVariantDefinition(variant, key, value);
+    if (variantValue) {
+      if (typeof variantValue === "function") {
+        const fn = variantValue;
+        variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps));
+      }
+      if (isObj(variantValue)) {
+        variantValue = resolveTokensAndVariants(key, variantValue, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps);
+      }
+      return Object.entries(expandStyles(variantValue));
+    } else {
+      if (process.env.NODE_ENV === "development") {
+        if ((_a = staticConfig.validStyles) == null ? void 0 : _a[key]) {
+          return null;
+        }
+        console.warn(`No variant found: ${staticConfig.componentName || "[UnnamedComponent]"} has variant "${key}", but no matching value "${value}"`);
+      }
+      return null;
+    }
+  }
+}, "resolveVariants");
+const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps) => {
   var _a;
   let res = {};
-  for (const rKey in input) {
+  for (const rKey in value) {
     const fKey = conf.shorthands[rKey] || rKey;
-    const val = input[rKey];
+    const val = value[rKey];
     if (isVariable(val)) {
-      res[fKey] = resolveAs === "variable" ? val : !isWeb || resolveAs === "value" ? val.val : val.variable;
+      res[fKey] = !isWeb || returnVariablesAs === "value" ? val.val : val.variable;
+    } else if (variants[fKey]) {
+      if (parentVariantKey === key) {
+        res[fKey] = val;
+      } else {
+        res = {
+          ...res,
+          ...Object.fromEntries(resolveVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps))
+        };
+      }
     } else if (typeof val === "string") {
-      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val;
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs) : val;
       res[fKey] = fVal;
     } else {
       if (isObj(val)) {
-        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs);
+        res[fKey] = resolveTokensAndVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps);
       } else {
-        res[fKey] = input[fKey];
+        res[fKey] = value[fKey];
       }
     }
     if (process.env.NODE_ENV === "development") {
@@ -104,7 +99,31 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, re
     }
   }
   return res;
-}, "resolveTokens");
+}, "resolveTokensAndVariants");
+function getVariantDefinition(variant, key, value) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  for (const cat in tokenCategories) {
+    if (key in tokenCategories[cat]) {
+      const spreadVariant = variant[`...${cat}`];
+      if (spreadVariant) {
+        return spreadVariant;
+      }
+    }
+  }
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  fn = fn || variant[value];
+  return fn || variant["..."] || variant["...size"];
+}
+__name(getVariantDefinition, "getVariantDefinition");
 const fontShorthand = {
   fontSize: "size",
   fontWeight: "weight"

package/dist/jsx/helpers/generateAtomicStyles.js

@@ -40,9 +40,16 @@ const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   const res = expandStyles(style);
   if (style.shadowColor != null || style.shadowOffset != null || style.shadowOpacity != null || style.shadowRadius != null) {
     boxShadowReducer(res, style);
+    delete res["shadowColor"];
+    delete res["shadowOffset"];
+    delete res["shadowOpacity"];
+    delete res["shadowRadius"];
   }
   if (style.textShadowColor != null || style.textShadowOffset != null || style.textShadowRadius != null) {
     textShadowReducer(res, style);
+    delete res["textShadowColor"];
+    delete res["textShadowOffset"];
+    delete res["textShadowRadius"];
   }
   const out = {};
   for (const key in res) {
@@ -95,41 +102,39 @@ function expandStyle(key, value) {
     }
     return;
   }
-  if (isWeb) {
-    switch (key) {
-      case "elevation":
-      case "overlayColor":
-      case "resizeMode":
-      case "tintColor": {
-        break;
-      }
-      case "aspectRatio": {
-        return [key, value.toString()];
-      }
-      case "backgroundClip": {
-        if (value === "text") {
-          return [
-            ["backgroundClip", value],
-            ["WebkitBackgroundClip", value]
-          ];
-        }
-        break;
-      }
-      case "textAlignVertical": {
-        return [["verticalAlign", value === "center" ? "middle" : value]];
-      }
-      case "textDecorationLine": {
-        return ["textDecorationLine", value];
-      }
-      case "transform": {
-        if (Array.isArray(value)) {
-          return [[key, value.map(mapTransform).join(" ")]];
-        }
-        break;
+  switch (key) {
+    case "elevation":
+    case "overlayColor":
+    case "resizeMode":
+    case "tintColor": {
+      break;
+    }
+    case "aspectRatio": {
+      return [[key, value.toString()]];
+    }
+    case "backgroundClip": {
+      if (value === "text") {
+        return [
+          ["backgroundClip", value],
+          ["WebkitBackgroundClip", value]
+        ];
       }
-      case "writingDirection": {
-        return [["direction", value]];
+      break;
+    }
+    case "textAlignVertical": {
+      return [["verticalAlign", value === "center" ? "middle" : value]];
+    }
+    case "textDecorationLine": {
+      return [["textDecorationLine", value]];
+    }
+    case "transform": {
+      if (Array.isArray(value)) {
+        return [[key, value.map(mapTransform).join(" ")]];
       }
+      break;
+    }
+    case "writingDirection": {
+      return [["direction", value]];
     }
   }
   const longKey = STYLE_SHORT_FORM_EXPANSIONS[key];
@@ -288,8 +293,8 @@ const colorProps = {
   textShadowColor: true
 };
 function normalizeValueWithProperty(value, property) {
-  if (isWeb) {
-    if ((property == null || !unitlessNumbers[property]) && typeof value === "number") {
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if ((property === void 0 || property === null || !unitlessNumbers[property]) && typeof value === "number") {
       return `${value}px`;
     }
   }
@@ -303,7 +308,7 @@ const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
   if (color == null || color == void 0) {
     return;
   }
-  if (isWeb) {
+  if (process.env.TAMAGUI_TARGET === "web") {
     if (typeof color === "string" && isWebColor(color)) {
       return color;
     }

package/dist/jsx/helpers/getSplitStyles.js

@@ -7,7 +7,7 @@ import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platfor
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
-import { getStylesAtomic } from "./getStylesAtomic";
+import { getStylesAtomic, psuedoCNInverse } from "./getStylesAtomic";
 import {
   insertStyleRule,
   insertedTransforms,
@@ -114,12 +114,43 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       for (const key in valInit) {
         if (usedKeys.has(key))
           continue;
-        style[key] = valInit;
+        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") {
-      mergeClassName(keyInit, valInit);
+      let nonTamaguis = "";
+      for (const cn of valInit.split(" ")) {
+        if (cn[0] === "_") {
+          const [shorthand, mediaOrPsuedo, rest] = cn.slice(1).split("-");
+          let fullKey = conf.shorthands[shorthand];
+          if (mediaOrPsuedo[0] === "_") {
+            let mediaShortKey = mediaOrPsuedo.slice(1);
+            mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
+            fullKey += `-${mediaShortKey}`;
+          } else if (mediaOrPsuedo[0] === "0") {
+            const pseudoShortKey = mediaOrPsuedo.slice(1);
+            fullKey += `-${psuedoCNInverse[pseudoShortKey]}`;
+          }
+          usedKeys.add(fullKey);
+          mergeClassName(fullKey, cn);
+        } else {
+          nonTamaguis += " " + cn;
+        }
+      }
+      if (nonTamaguis) {
+        mergeClassName(keyInit, nonTamaguis);
+      }
       continue;
     }
     if (validStyleProps[keyInit] && valInit && valInit[0] === "_") {
@@ -196,7 +227,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
             const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
-            const fullKey = `${out.identifier}-${mediaKey}`;
+            const fullKey = `${style2.property}-${mediaKeyShort}`;
             if (!usedKeys.has(fullKey)) {
               usedKeys.add(fullKey);
               addStyle(out.identifier, out.styleRule);
@@ -223,7 +254,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         if (val && val[0] === "_") {
           classNames[key] = val;
         } else {
-          if (key in stylePropsTransform && (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both")) {
+          if (key in stylePropsTransform) {
             mergeTransform(style, key, val, true);
           } else {
             style[key] = val;
@@ -291,7 +322,7 @@ const insertSplitStyles = /* @__PURE__ */ __name((...args) => {
   }
   return res;
 }, "insertSplitStyles");
-const effect = useInsertionEffect || useIsomorphicLayoutEffect;
+const effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect;
 const useSplitStyles = /* @__PURE__ */ __name((...args) => {
   const res = getSplitStyles(...args);
   effect(() => {

package/dist/jsx/helpers/getStackSize.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { getVariableValue, isVariable } from "@tamagui/core";
+import { getVariableValue, isVariable } from "../createVariable";
 const getSizeScaledToFont = /* @__PURE__ */ __name((val, { sizeX = 1, sizeY = 1 }, { tokens, props, fonts }) => {
   var _a, _b, _c, _d, _e, _f;
   const size = (_c = (_b = (_a = tokens.size[val]) != null ? _a : val) != null ? _b : tokens.size["$4"]) != null ? _c : 14;

package/dist/jsx/helpers/getStylesAtomic.js

@@ -20,6 +20,11 @@ const pseudos = {
   }
 };
 const pseudosOrdered = Object.values(pseudos);
+const psuedoCNInverse = {
+  hover: "hoverStyle",
+  focus: "focusStyle",
+  press: "pressStyle"
+};
 function getStylesAtomic(stylesIn, options = {}) {
   const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn;
   let res = [];
@@ -113,5 +118,6 @@ const borderDefaults = {
 };
 export {
   getStylesAtomic,
-  pseudos
+  pseudos,
+  psuedoCNInverse
 };