npm - @tamagui/core - Versions diffs - 2.0.0-rc.3 → 2.0.0-rc.5 - Mend

@tamagui/core 2.0.0-rc.3 → 2.0.0-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/native.cjs CHANGED Viewed

@@ -9862,6 +9862,111 @@ function normalizeStyle$1(style) {
   }
   return fixStyles(res), res;
 }
+function parseNativeStyle(key, cssString, tokenMap) {
+  switch (key) {
+    case "backgroundImage":
+      return parseBackgroundImage(cssString, tokenMap);
+    case "boxShadow":
+      return parseBoxShadow(cssString, tokenMap);
+    case "textShadow":
+      return parseTextShadow(cssString, tokenMap);
+    default:
+      return;
+  }
+}
+function resolveColor(raw, tokenMap) {
+  return tokenMap && tokenMap.has(raw) ? tokenMap.get(raw) : raw;
+}
+function parseBackgroundImage(css, tokenMap) {
+  var match = css.match(RegExp("^linear-gradient\\((.+)\\)$", "s"));
+  if (match) {
+    var inner = match[1], parts = splitOutsideParens(inner);
+    if (!(parts.length < 2)) {
+      var direction, startIdx = 0, firstPart = parts[0].trim();
+      (firstPart.startsWith("to ") || /^\d+(\.\d+)?(deg|rad|turn|grad)$/.test(firstPart)) && (direction = firstPart, startIdx = 1);
+      for (var colorStops = [], i = startIdx; i < parts.length; i++) {
+        var stopParts = parts[i].trim().split(/\s+/), colorRaw = stopParts[0], color = resolveColor(colorRaw, tokenMap), positions = stopParts.slice(1), stop = {
+          color
+        };
+        positions.length > 0 && (stop.positions = positions), colorStops.push(stop);
+      }
+      var gradient = {
+        type: "linearGradient",
+        colorStops
+      };
+      return direction && (gradient.direction = direction), [gradient];
+    }
+  }
+}
+function parseBoxShadow(css, tokenMap) {
+  var shadowStrings = splitOutsideParens(css), shadows = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = shadowStrings[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var raw = _step.value, s = raw.trim();
+      if (s) {
+        var tokens = s.split(/\s+/);
+        if (tokens.length < 2) return;
+        var startIdx = 0, inset = false;
+        tokens[0] === "inset" && (inset = true, startIdx = 1);
+        for (var numericParts = [], colorParts = [], i = startIdx; i < tokens.length; i++) {
+          var n = parseDimension(tokens[i]);
+          if (n !== void 0) numericParts.push(n);
+          else {
+            colorParts = tokens.slice(i);
+            break;
+          }
+        }
+        if (numericParts.length < 2) return;
+        var shadow = {
+          offsetX: numericParts[0],
+          offsetY: numericParts[1]
+        };
+        if (inset && (shadow.inset = true), numericParts.length >= 3 && (shadow.blurRadius = numericParts[2]), numericParts.length >= 4 && (shadow.spreadDistance = numericParts[3]), colorParts.length > 0) {
+          var colorStr = colorParts.join(" ");
+          shadow.color = resolveColor(colorStr, tokenMap);
+        }
+        shadows.push(shadow);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  return shadows.length > 0 ? shadows : void 0;
+}
+function parseTextShadow(css, tokenMap) {
+  var tokens = css.trim().split(/\s+/);
+  if (!(tokens.length < 3)) {
+    var offsetX = parseDimension(tokens[0]), offsetY = parseDimension(tokens[1]), blur = parseDimension(tokens[2]);
+    if (!(offsetX === void 0 || offsetY === void 0 || blur === void 0)) {
+      var result = [["textShadowOffset", {
+        width: offsetX,
+        height: offsetY
+      }], ["textShadowRadius", blur]];
+      if (tokens.length >= 4) {
+        var colorStr = tokens.slice(3).join(" ");
+        result.push(["textShadowColor", resolveColor(colorStr, tokenMap)]);
+      }
+      return result;
+    }
+  }
+}
+function parseDimension(s) {
+  var cleaned = s.replace(/px$|dp$/, ""), n = Number(cleaned);
+  return Number.isFinite(n) ? n : void 0;
+}
+function splitOutsideParens(s) {
+  for (var parts = [], depth = 0, current = "", i = 0; i < s.length; i++) {
+    var ch = s[i];
+    ch === "(" ? depth++ : ch === ")" && depth--, ch === "," && depth === 0 ? (parts.push(current), current = "") : current += ch;
+  }
+  return current && parts.push(current), parts;
+}
 var remRegex = /(-?[\d.]+)rem/g;
 function resolveRem(value) {
   var _config_settings, config = getConfig(), _config_settings_remBaseFontSize, baseFontSize = (_config_settings_remBaseFontSize = config == null || (_config_settings = config.settings) === null || _config_settings === void 0 ? void 0 : _config_settings.remBaseFontSize) !== null && _config_settings_remBaseFontSize !== void 0 ? _config_settings_remBaseFontSize : 16;
@@ -9964,15 +10069,57 @@ var propMapper = function(key, value, styleState, disabled, map) {
     }
     styleProps2.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (typeof value == "string" && value[0] === "$" ? value = getTokenForKey(key, value, styleProps2, styleState) : (key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t) {
-      var r = getTokenForKey("size", t, styleProps2, styleState);
-      return r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r != null ? String(r) : t;
-    }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value))), value != null) {
+    if (value != null) if (typeof value == "string" && value[0] === "$") value = getTokenForKey(key, value, styleProps2, styleState);
+    else if ((key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$")) {
+      if (key === "backgroundImage" || key === "boxShadow" || key === "textShadow") {
+        var tokenMap = /* @__PURE__ */ new Map(), placeholderIdx = 0, withPlaceholders = value.replace(/(\$[\w.-]+)/g, function(t) {
+          var r = getTokenForKey("size", t, styleProps2, styleState);
+          if (r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r == null) return t;
+          if (typeof r != "string" && typeof r != "number") {
+            var placeholder = `__tk${placeholderIdx++}__`;
+            return tokenMap.set(placeholder, r), placeholder;
+          }
+          return String(r);
+        }), parsed = parseNativeStyle(key, withPlaceholders, tokenMap);
+        parsed ? value = parsed : value = value.replace(/(\$[\w.-]+)/g, function(t) {
+          var r = getTokenForKey("size", t, styleProps2, styleState);
+          return r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r != null ? String(r) : t;
+        });
+      } else value = value.replace(/(\$[\w.-]+)/g, function(t) {
+        var r = getTokenForKey("size", t, styleProps2, styleState);
+        return r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r != null ? String(r) : t;
+      });
+    } else isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value));
+    if (value != null && typeof value == "string" && (key === "backgroundImage" || key === "boxShadow" || key === "textShadow")) {
+      var parsed1 = parseNativeStyle(key, value);
+      if (parsed1) {
+        if (key === "textShadow" && Array.isArray(parsed1) && Array.isArray(parsed1[0])) {
+          var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+          try {
+            for (var _iterator = parsed1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var [nkey, nvalue] = _step.value;
+              map(nkey, nvalue, originalValue);
+            }
+          } catch (err) {
+            _didIteratorError = true, _iteratorError = err;
+          } finally {
+            try {
+              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+            } finally {
+              if (_didIteratorError) throw _iteratorError;
+            }
+          }
+          return;
+        }
+        value = parsed1;
+      }
+    }
+    if (value != null) {
       key === "fontFamily" && lastFontFamilyToken && (styleState.fontFamily = lastFontFamilyToken);
       var expanded = styleProps2.noExpand ? null : expandStyle(key, value);
       if (expanded) for (var max = expanded.length, i = 0; i < max; i++) {
-        var [nkey, nvalue] = expanded[i];
-        map(nkey, nvalue, originalValue);
+        var [nkey1, nvalue1] = expanded[i];
+        map(nkey1, nvalue1, originalValue);
       }
       else map(key, value, originalValue);
     }
@@ -10267,7 +10414,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         viewProps[key4] = val2;
         return;
       }
-      if (val2 != null) {
+      if (false, val2 != null) {
         if (key4 === "pointerEvents") {
           viewProps[key4] = val2;
           return;
@@ -10282,13 +10429,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         }
         var shouldPassThrough2 = styleProps2.noExpand && isPseudo || isHOC && (isMediaOrPseudo || (parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]));
         if (shouldPassThrough2) {
-          passDownProp(viewProps, key4, val2, isMediaOrPseudo);
+          passDownProp(viewProps, key4, val2, isMediaOrPseudo), false;
           return;
         }
         if (isPseudo) {
           if (!val2) return;
           var pseudoStyleObject = getSubStyle(styleState, key4, val2, styleProps2.noClass && process.env.IS_STATIC !== "is_static");
-          {
+          if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
             var _pseudos, _key;
             if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key4] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
               Object.assign(pseudos[key4], pseudoStyleObject);
@@ -10297,9 +10444,11 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           }
           var descriptor = pseudoDescriptors[key4], isEnter = key4 === "enterStyle", isExit = key4 === "exitStyle";
           if (!descriptor) return;
-          {
+          var pseudoStyles, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, psuedoStyle, fullKey;
+          if (shouldDoClasses && !isExit) ;
+          if (!shouldDoClasses || isExit || isEnter) {
             var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled2 = componentState[descriptorKey] === false;
-            isExit && (isDisabled2 = !styleProps2.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true);
+            isExit && (isDisabled2 = !styleProps2.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true), false;
             var importance = descriptor.priority, pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
             for (var pkey in pseudoStyleObject) {
               var _$val = pseudoStyleObject[pkey];
@@ -10326,14 +10475,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           if (!val2) return;
           var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
           hasMedia || (hasMedia = true);
-          val2.space;
-          if ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort), isMedia === "platform" && !isActivePlatform(key4)) return;
+          var hasSpace = val2.space;
+          if ((hasSpace || !shouldDoClasses || styleProps2.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !isActivePlatform(key4)) return;
           var priority = mediaStylesSeen;
           mediaStylesSeen += 1;
-          var shouldDoClassesForThisMedia = isWeb;
+          var shouldDoClassesForThisMedia = shouldDoClasses || isWeb && isMedia === "theme";
           if (shouldDoClassesForThisMedia) {
-            getSubStyle(styleState, key4, val2, false);
-            var mediaStyles = getCSSStylesAtomic(), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
+            var mediaStyle = getSubStyle(styleState, key4, val2, false), mediaStyles = getCSSStylesAtomic(mediaStyle), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
             try {
               for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = true) {
                 var style3 = _step12.value, property = style3[StyleObjectProperty], isSubStyle = property[0] === "$";
@@ -10359,7 +10507,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
               var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key5, val3, mediaState[mediaKeyShort], importanceBump, debug, originalVal2);
               didMerge && key5 === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
             };
-            var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+            var mergeMediaStyle = mergeMediaStyle2, isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
             if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
               if (!mediaState[mediaKeyShort]) {
                 return;
@@ -10391,14 +10539,14 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
             } else if (isGroupMedia) {
               var _groupContext_groupName, _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
               if (!groupState) {
-                pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
+                false, pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
                 return;
               }
               var componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
               if (groupMediaKey) {
                 mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
                 var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), !isActive) {
+                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), false, !isActive) {
                   for (var pkey1 in mediaStyle1) applyDefaultStyle(pkey1, styleState);
                   return;
                 }
@@ -10408,7 +10556,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                 var _this;
                 pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
                 var componentGroupPseudoState = (_this = componentGroupState || (groupContext == null ? void 0 : groupContext[groupName].state)) === null || _this === void 0 ? void 0 : _this.pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey], priority1 = pseudoPriorities[groupPseudoKey];
-                if (!isActive1) {
+                if (false, !isActive1) {
                   for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                   return;
                 }
@@ -10446,7 +10594,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, rulesToInsert = void 0, classNames = {};
+  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {};
   props.space;
   var pseudos = null, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
@@ -10591,7 +10739,7 @@ var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
     var shouldSkip = !staticConfig.isHOC && key1 in skipProps && !styleProps2.noSkip;
     if (shouldSkip) return key = key1, "continue";
     propMapper(key1, val, styleState, false, function(skey, sval, originalVal) {
-      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps2.noNormalize ? sval : normalizeValueWithProperty(sval);
+      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps2.noNormalize ? sval : normalizeValueWithProperty(sval, key1);
     }), key = key1;
   }, {
     staticConfig,

package/dist/test.native.cjs CHANGED Viewed

@@ -2341,6 +2341,111 @@ function normalizeStyle$1(style) {
   }
   return fixStyles(res), res;
 }
+function parseNativeStyle(key, cssString, tokenMap) {
+  switch (key) {
+    case "backgroundImage":
+      return parseBackgroundImage(cssString, tokenMap);
+    case "boxShadow":
+      return parseBoxShadow(cssString, tokenMap);
+    case "textShadow":
+      return parseTextShadow(cssString, tokenMap);
+    default:
+      return;
+  }
+}
+function resolveColor(raw, tokenMap) {
+  return tokenMap && tokenMap.has(raw) ? tokenMap.get(raw) : raw;
+}
+function parseBackgroundImage(css, tokenMap) {
+  var match = css.match(RegExp("^linear-gradient\\((.+)\\)$", "s"));
+  if (match) {
+    var inner = match[1], parts = splitOutsideParens(inner);
+    if (!(parts.length < 2)) {
+      var direction, startIdx = 0, firstPart = parts[0].trim();
+      (firstPart.startsWith("to ") || /^\d+(\.\d+)?(deg|rad|turn|grad)$/.test(firstPart)) && (direction = firstPart, startIdx = 1);
+      for (var colorStops = [], i = startIdx; i < parts.length; i++) {
+        var stopParts = parts[i].trim().split(/\s+/), colorRaw = stopParts[0], color = resolveColor(colorRaw, tokenMap), positions = stopParts.slice(1), stop = {
+          color
+        };
+        positions.length > 0 && (stop.positions = positions), colorStops.push(stop);
+      }
+      var gradient = {
+        type: "linearGradient",
+        colorStops
+      };
+      return direction && (gradient.direction = direction), [gradient];
+    }
+  }
+}
+function parseBoxShadow(css, tokenMap) {
+  var shadowStrings = splitOutsideParens(css), shadows = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = shadowStrings[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var raw = _step.value, s = raw.trim();
+      if (s) {
+        var tokens = s.split(/\s+/);
+        if (tokens.length < 2) return;
+        var startIdx = 0, inset = false;
+        tokens[0] === "inset" && (inset = true, startIdx = 1);
+        for (var numericParts = [], colorParts = [], i = startIdx; i < tokens.length; i++) {
+          var n = parseDimension(tokens[i]);
+          if (n !== void 0) numericParts.push(n);
+          else {
+            colorParts = tokens.slice(i);
+            break;
+          }
+        }
+        if (numericParts.length < 2) return;
+        var shadow = {
+          offsetX: numericParts[0],
+          offsetY: numericParts[1]
+        };
+        if (inset && (shadow.inset = true), numericParts.length >= 3 && (shadow.blurRadius = numericParts[2]), numericParts.length >= 4 && (shadow.spreadDistance = numericParts[3]), colorParts.length > 0) {
+          var colorStr = colorParts.join(" ");
+          shadow.color = resolveColor(colorStr, tokenMap);
+        }
+        shadows.push(shadow);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  return shadows.length > 0 ? shadows : void 0;
+}
+function parseTextShadow(css, tokenMap) {
+  var tokens = css.trim().split(/\s+/);
+  if (!(tokens.length < 3)) {
+    var offsetX = parseDimension(tokens[0]), offsetY = parseDimension(tokens[1]), blur = parseDimension(tokens[2]);
+    if (!(offsetX === void 0 || offsetY === void 0 || blur === void 0)) {
+      var result = [["textShadowOffset", {
+        width: offsetX,
+        height: offsetY
+      }], ["textShadowRadius", blur]];
+      if (tokens.length >= 4) {
+        var colorStr = tokens.slice(3).join(" ");
+        result.push(["textShadowColor", resolveColor(colorStr, tokenMap)]);
+      }
+      return result;
+    }
+  }
+}
+function parseDimension(s) {
+  var cleaned = s.replace(/px$|dp$/, ""), n = Number(cleaned);
+  return Number.isFinite(n) ? n : void 0;
+}
+function splitOutsideParens(s) {
+  for (var parts = [], depth = 0, current = "", i = 0; i < s.length; i++) {
+    var ch = s[i];
+    ch === "(" ? depth++ : ch === ")" && depth--, ch === "," && depth === 0 ? (parts.push(current), current = "") : current += ch;
+  }
+  return current && parts.push(current), parts;
+}
 var remRegex = /(-?[\d.]+)rem/g;
 function resolveRem(value) {
   var _config_settings, config = getConfig(), _config_settings_remBaseFontSize, baseFontSize = (_config_settings_remBaseFontSize = config == null || (_config_settings = config.settings) === null || _config_settings === void 0 ? void 0 : _config_settings.remBaseFontSize) !== null && _config_settings_remBaseFontSize !== void 0 ? _config_settings_remBaseFontSize : 16;
@@ -2444,15 +2549,57 @@ var propMapper = function(key, value, styleState, disabled, map) {
     }
     styleProps.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (typeof value == "string" && value[0] === "$" ? value = getTokenForKey(key, value, styleProps, styleState) : (key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t) {
-      var r = getTokenForKey("size", t, styleProps, styleState);
-      return r == null && (r = getTokenForKey("color", t, styleProps, styleState)), r != null ? String(r) : t;
-    }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps.resolveValues) : isRemValue(value) && (value = resolveRem(value))), value != null) {
+    if (value != null) if (typeof value == "string" && value[0] === "$") value = getTokenForKey(key, value, styleProps, styleState);
+    else if ((key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$")) {
+      if (key === "backgroundImage" || key === "boxShadow" || key === "textShadow") {
+        var tokenMap = /* @__PURE__ */ new Map(), placeholderIdx = 0, withPlaceholders = value.replace(/(\$[\w.-]+)/g, function(t) {
+          var r = getTokenForKey("size", t, styleProps, styleState);
+          if (r == null && (r = getTokenForKey("color", t, styleProps, styleState)), r == null) return t;
+          if (typeof r != "string" && typeof r != "number") {
+            var placeholder = `__tk${placeholderIdx++}__`;
+            return tokenMap.set(placeholder, r), placeholder;
+          }
+          return String(r);
+        }), parsed = parseNativeStyle(key, withPlaceholders, tokenMap);
+        parsed ? value = parsed : value = value.replace(/(\$[\w.-]+)/g, function(t) {
+          var r = getTokenForKey("size", t, styleProps, styleState);
+          return r == null && (r = getTokenForKey("color", t, styleProps, styleState)), r != null ? String(r) : t;
+        });
+      } else value = value.replace(/(\$[\w.-]+)/g, function(t) {
+        var r = getTokenForKey("size", t, styleProps, styleState);
+        return r == null && (r = getTokenForKey("color", t, styleProps, styleState)), r != null ? String(r) : t;
+      });
+    } else isVariable(value) ? value = resolveVariableValue(key, value, styleProps.resolveValues) : isRemValue(value) && (value = resolveRem(value));
+    if (value != null && typeof value == "string" && (key === "backgroundImage" || key === "boxShadow" || key === "textShadow")) {
+      var parsed1 = parseNativeStyle(key, value);
+      if (parsed1) {
+        if (key === "textShadow" && Array.isArray(parsed1) && Array.isArray(parsed1[0])) {
+          var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+          try {
+            for (var _iterator = parsed1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var [nkey, nvalue] = _step.value;
+              map(nkey, nvalue, originalValue);
+            }
+          } catch (err) {
+            _didIteratorError = true, _iteratorError = err;
+          } finally {
+            try {
+              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+            } finally {
+              if (_didIteratorError) throw _iteratorError;
+            }
+          }
+          return;
+        }
+        value = parsed1;
+      }
+    }
+    if (value != null) {
       key === "fontFamily" && lastFontFamilyToken && (styleState.fontFamily = lastFontFamilyToken);
       var expanded = styleProps.noExpand ? null : expandStyle(key, value);
       if (expanded) for (var max = expanded.length, i = 0; i < max; i++) {
-        var [nkey, nvalue] = expanded[i];
-        map(nkey, nvalue, originalValue);
+        var [nkey1, nvalue1] = expanded[i];
+        map(nkey1, nvalue1, originalValue);
       }
       else map(key, value, originalValue);
     }
@@ -2748,7 +2895,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         viewProps[key4] = val2;
         return;
       }
-      if (val2 != null) {
+      if (false, val2 != null) {
         if (key4 === "pointerEvents") {
           viewProps[key4] = val2;
           return;
@@ -2763,13 +2910,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         }
         var shouldPassThrough2 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || (parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]));
         if (shouldPassThrough2) {
-          passDownProp(viewProps, key4, val2, isMediaOrPseudo);
+          passDownProp(viewProps, key4, val2, isMediaOrPseudo), false;
           return;
         }
         if (isPseudo) {
           if (!val2) return;
           var pseudoStyleObject = getSubStyle(styleState, key4, val2, styleProps.noClass && process.env.IS_STATIC !== "is_static");
-          {
+          if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
             var _pseudos, _key;
             if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key4] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
               Object.assign(pseudos[key4], pseudoStyleObject);
@@ -2778,9 +2925,11 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           }
           var descriptor = pseudoDescriptors[key4], isEnter = key4 === "enterStyle", isExit = key4 === "exitStyle";
           if (!descriptor) return;
-          {
+          var pseudoStyles, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, psuedoStyle, fullKey;
+          if (shouldDoClasses && !isExit) ;
+          if (!shouldDoClasses || isExit || isEnter) {
             var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled2 = componentState[descriptorKey] === false;
-            isExit && (isDisabled2 = !styleProps.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true);
+            isExit && (isDisabled2 = !styleProps.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true), false;
             var importance = descriptor.priority, pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
             for (var pkey in pseudoStyleObject) {
               var _$val = pseudoStyleObject[pkey];
@@ -2807,14 +2956,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           if (!val2) return;
           var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
           hasMedia || (hasMedia = true);
-          val2.space;
-          if ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort), isMedia === "platform" && !isActivePlatform(key4)) return;
+          var hasSpace = val2.space;
+          if ((hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !isActivePlatform(key4)) return;
           var priority = mediaStylesSeen;
           mediaStylesSeen += 1;
-          var shouldDoClassesForThisMedia = isWeb;
+          var shouldDoClassesForThisMedia = shouldDoClasses || isWeb && isMedia === "theme";
           if (shouldDoClassesForThisMedia) {
-            getSubStyle(styleState, key4, val2, false);
-            var mediaStyles = getCSSStylesAtomic(), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
+            var mediaStyle = getSubStyle(styleState, key4, val2, false), mediaStyles = getCSSStylesAtomic(mediaStyle), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
             try {
               for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = true) {
                 var style3 = _step12.value, property = style3[StyleObjectProperty], isSubStyle = property[0] === "$";
@@ -2840,7 +2988,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
               var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key5, val3, mediaState[mediaKeyShort], importanceBump, debug, originalVal2);
               didMerge && key5 === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
             };
-            var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+            var mergeMediaStyle = mergeMediaStyle2, isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
             if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
               if (!mediaState[mediaKeyShort]) {
                 return;
@@ -2872,14 +3020,14 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
             } else if (isGroupMedia) {
               var _groupContext_groupName, _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
               if (!groupState) {
-                pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
+                false, pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
                 return;
               }
               var componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
               if (groupMediaKey) {
                 mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
                 var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), !isActive) {
+                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), false, !isActive) {
                   for (var pkey1 in mediaStyle1) applyDefaultStyle(pkey1, styleState);
                   return;
                 }
@@ -2889,7 +3037,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                 var _this;
                 pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
                 var componentGroupPseudoState = (_this = componentGroupState || (groupContext == null ? void 0 : groupContext[groupName].state)) === null || _this === void 0 ? void 0 : _this.pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey], priority1 = pseudoPriorities[groupPseudoKey];
-                if (!isActive1) {
+                if (false, !isActive1) {
                   for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                   return;
                 }
@@ -2927,7 +3075,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || exports.mediaState, rulesToInsert = void 0, classNames = {};
+  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {};
   props.space;
   var pseudos = null, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
@@ -3072,7 +3220,7 @@ var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
     var shouldSkip = !staticConfig.isHOC && key1 in skipProps && !styleProps.noSkip;
     if (shouldSkip) return key = key1, "continue";
     propMapper(key1, val, styleState, false, function(skey, sval, originalVal) {
-      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval);
+      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval, key1);
     }), key = key1;
   }, {
     staticConfig,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.5",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "author": {
@@ -82,17 +82,17 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/helpers": "2.0.0-rc.3",
-    "@tamagui/react-native-media-driver": "2.0.0-rc.3",
-    "@tamagui/react-native-use-pressable": "2.0.0-rc.3",
-    "@tamagui/use-element-layout": "2.0.0-rc.3",
-    "@tamagui/use-event": "2.0.0-rc.3",
-    "@tamagui/web": "2.0.0-rc.3"
+    "@tamagui/helpers": "2.0.0-rc.5",
+    "@tamagui/react-native-media-driver": "2.0.0-rc.5",
+    "@tamagui/react-native-use-pressable": "2.0.0-rc.5",
+    "@tamagui/use-element-layout": "2.0.0-rc.5",
+    "@tamagui/use-event": "2.0.0-rc.5",
+    "@tamagui/web": "2.0.0-rc.5"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.3",
-    "@tamagui/native-bundle": "2.0.0-rc.3",
-    "@tamagui/react-native-web-lite": "2.0.0-rc.3",
+    "@tamagui/build": "2.0.0-rc.5",
+    "@tamagui/native-bundle": "2.0.0-rc.5",
+    "@tamagui/react-native-web-lite": "2.0.0-rc.5",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",