@tamagui/web 3.0.0-beta.1125.1 → 3.0.0-beta.1141.1

package/dist/cjs/helpers/getSplitStyles.native.cjs

@@ -478,8 +478,21 @@ function contributeProp(pass, keyOg, valOg) {
 			}
 			var styleOriginals = shouldTrackStyleTokenProvenance ? import_styleOriginalValues.styleOriginalValues.get(style) : void 0;
 			for (var key1 in style) {
-				if (style[key1] == null) continue;
-				contributeValue(styleState, key1, style[key1], styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+				var value1 = style[key1];
+				if (value1 == null) continue;
+				var inline = !styleState.styleProps.stylePieceEntries;
+				if (inline) {
+					if (typeof value1 === "string") {
+						var [segments] = (0, import_grammarConfig.getConfigRevisionState)(conf).parseFlatValue(value1);
+						for (var index2 = 4; index2 < segments.length; index2 += 5) if (!(segments[index2] & 1)) {
+							inline = false;
+							break;
+						}
+					} else if (value1 && typeof value1 === "object" && !Array.isArray(value1) && !(0, import_createVariable.isVariable)(value1) && classifyConditionalObject(value1, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key1, value1, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -588,7 +601,7 @@ function contributeProp(pass, keyOg, valOg) {
 		if (valInit === "unset") {
 			var expanded = (0, import_expandStyle.expandStyle)(keyInit, valInit, conf.settings.styleCompat || "web");
 			clearDirectStyle(styleState, keyInit);
-			if (expanded) for (var index2 = 0; index2 < expanded.length; index2++) clearDirectStyle(styleState, expanded[index2][0]);
+			if (expanded) for (var index3 = 0; index3 < expanded.length; index3++) clearDirectStyle(styleState, expanded[index3][0]);
 		} else contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey);
 		return;
 	}
@@ -972,7 +985,10 @@ function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
 	for (var index = 0; index < list.length; index++) {
 		var entry = list[index];
 		var entryFlags = entry[7] & 31;
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) {
+			if (sourceLayer === sourceLayerStyle && entry[7] >> 5 === sourceLayerStyle && entry[0] === source[0] && !condition && !entry[2]) list.splice(index--, 1);
+			continue;
+		}
 		if (entry[0] !== source[0]) continue;
 		if (flags & recordDefault) {
 			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
@@ -1030,8 +1046,8 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 	var tokenName = typeof originalVal === "string" ? originalVal : "";
 	if (tokenName) {
 		var slash = tokenName.lastIndexOf("/");
-		var opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
-		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
+		var opacity = slash === -1 ? NaN : +tokenName.slice(slash + 1);
+		if (opacity % 1 === 0 && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
 	}
 	if (tokenName !== "" && (tokenName in styleState.theme || tokenName in (((_styleState_conf_themes = styleState.conf.themes) === null || _styleState_conf_themes === void 0 ? void 0 : _styleState_conf_themes[styleState.flatThemeName || ""]) || {}) || Object.values(styleState.conf.tokensParsed).some(function(category) {
 		return tokenName in category;
@@ -1082,27 +1098,39 @@ var recordDefault = 8;
 var recordCSS = 16;
 function writeStyleRecord(state, property, value, cursor, original, flags) {
 	var conditionOverride = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : -1;
-	var _state_flatPass;
+	var _direct_flatPass;
 	var _direct;
 	var condition = conditionOverride !== -1 ? conditionOverride : cursor ? cursor[conditionValue] : 0;
 	var identity = cursor ? cursor[conditionKey] : "";
-	var slots = (_direct = state).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
-	var slot = property.startsWith("transition") ? "transition" : property;
+	var direct = state;
+	var slots = (_direct = direct).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
+	var sourceLayer = ((_direct_flatPass = direct.flatPass) === null || _direct_flatPass === void 0 ? void 0 : _direct_flatPass[passSourceLayer]) || 0;
+	if (direct.flatInlineStyleProp) flags |= recordInline;
+	var cssSlot = property.startsWith("transition") ? "transition" : property;
+	var slot = flags & recordInline && cssSlot !== property ? property : cssSlot;
 	var list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
-	for (var index = 0; index < list.length; index++) {
-		var entry = list[index];
-		var entryFlags = entry[7];
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
-		if (entry[0] !== property) continue;
+	if (sourceLayer === sourceLayerStyle && !condition) {
+		var other = slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property);
+		if (other) for (var index = 0; index < other.length; index++) {
+			var entry = other[index];
+			var entryFlags = entry[7];
+			if (entry[0] === property && !entry[2] && entryFlags >> 5 === sourceLayerStyle && (entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) other.splice(index--, 1);
+		}
+	}
+	for (var index1 = 0; index1 < list.length; index1++) {
+		var entry1 = list[index1];
+		var entryFlags1 = entry1[7];
+		if ((entryFlags1 & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if (entry1[0] !== property) continue;
 		if (flags & recordDefault) {
-			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
-		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
-			list.splice(index--, 1);
+			if (!(entryFlags1 & recordDefault) && (!entry1[2] || entry1[3] === identity)) return;
+		} else if (entryFlags1 & recordDefault && (!condition || entry1[3] === identity)) {
+			list.splice(index1--, 1);
 			continue;
 		}
-		if (entry[3] === identity) {
-			list.splice(index, 1);
+		if (entry1[3] === identity) {
+			list.splice(index1, 1);
 			break;
 		}
 	}
@@ -1114,7 +1142,7 @@ function writeStyleRecord(state, property, value, cursor, original, flags) {
 		cursor ? cursor[conditionSelector] : "",
 		cursor ? cursor[conditionWrappers] : void 0,
 		original,
-		flags | (((_state_flatPass = state.flatPass) === null || _state_flatPass === void 0 ? void 0 : _state_flatPass[passSourceLayer]) || 0) << 5
+		flags | sourceLayer << 5
 	]);
 }
 function streamWriteInline(state, property, value, cursor, original) {
@@ -1289,14 +1317,14 @@ var cssWideColorKeywords = /* @__PURE__ */ new Set([
 	"transparent"
 ]);
 function configuredValue(state, property, raw) {
-	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, nativeColors = arguments.length > 4 ? arguments[4] : void 0;
 	var grammar = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
 	var name = raw;
 	var opacity;
 	var slash = raw.lastIndexOf("/");
 	if (slash > 0) {
-		var amount = Number(raw.slice(slash + 1));
-		if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+		var amount = +raw.slice(slash + 1);
+		if (amount % 1 === 0 && amount >= 0 && amount <= 100) {
 			name = raw.slice(0, slash);
 			opacity = amount;
 		}
@@ -1309,7 +1337,7 @@ function configuredValue(state, property, raw) {
 	var fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
 	var resolveValues = state.styleProps.resolveValues;
 	var byRaw;
-	if (!fontProperty) {
+	if (!fontProperty && !nativeColors) {
 		var _maps;
 		var revision = grammar.revision;
 		if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
@@ -1385,27 +1413,18 @@ function configuredValue(state, property, raw) {
 				var rawNum = Number(name);
 				var tokens = category1 ? state.conf.tokensParsed[category1] : void 0;
 				if (tokens && Number.isFinite(rawNum)) for (var key in tokens) {
-					var keyNum = Number(key);
-					if (Number.isFinite(keyNum)) {
-						var dist = Math.abs(keyNum - rawNum);
+					var _tokens_key;
+					var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
+					var valNum = typeof val === "number" ? val : Number(val);
+					if (Number.isFinite(valNum)) {
+						var dist = Math.abs(valNum - rawNum);
 						if (dist < minDistance) {
 							minDistance = dist;
 							nearest = key;
 						}
-					} else {
-						var _tokens_key;
-						var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
-						var valNum = typeof val === "number" ? val : Number(val);
-						if (Number.isFinite(valNum)) {
-							var dist1 = Math.abs(valNum - rawNum);
-							if (dist1 < minDistance) {
-								minDistance = dist1;
-								nearest = key;
-							}
-						}
 					}
 				}
-				(0, import_warnOnce.warnOnce)(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is with px units${nearest ? `; nearest token is "${nearest}"` : ""}`);
+				if (nearest) (0, import_warnOnce.warnOnce)(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is${category1 === "zIndex" ? "" : " with px units"}${nearest ? `; nearest token is "${nearest}"` : ""}`);
 			} else if (category1 === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
 				var lower = name.toLowerCase();
 				if (!import_runtime.namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
@@ -1436,9 +1455,9 @@ function configuredValue(state, property, raw) {
 									prev = temp;
 								}
 							}
-							var dist2 = d[m];
-							if (dist2 <= 2 && dist2 < minDistance1) {
-								minDistance1 = dist2;
+							var dist1 = d[m];
+							if (dist1 <= 2 && dist1 < minDistance1) {
+								minDistance1 = dist1;
 								bestMatch = key1;
 							}
 						}
@@ -1459,20 +1478,25 @@ function configuredValue(state, property, raw) {
 	}
 	var out = raw;
 	if ((0, import_createVariable.isVariable)(value)) {
-		out = resolveValues === "except-theme" && fromTheme ? `${import_themeRef.THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : (0, import_resolveVariableValue.resolveVariableValue)(property, value, resolveValues);
+		out = resolveValues === "except-theme" && fromTheme ? `${import_themeRef.THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : (0, import_resolveVariableValue.resolveVariableValue)(nativeColors ? "color" : property, value, resolveValues);
 		if (opacity !== void 0) {
 			var _normalizeColor;
 			out = (_normalizeColor = (0, import_normalizeColor.normalizeColor)(out, opacity / 100)) !== null && _normalizeColor !== void 0 ? _normalizeColor : out;
 		}
 	}
+	if (nativeColors && out && typeof out === "object") {
+		var reference = `__tamagui_native_color_${nativeColors.size}`;
+		nativeColors.set(reference, out);
+		out = reference;
+	}
 	if (embedded && out === raw) {
 		var usedSafeArea = state.flatUsesSafeArea;
 		out = grammar.embeddedTokens(raw, function(word) {
-			return configuredValue(state, property, word);
+			return configuredValue(state, property, word, false, nativeColors);
 		});
 		if (!usedSafeArea && state.flatUsesSafeArea) return out;
 	}
-	if (!fontProperty && !fromTheme) if (valueCacheEntries > 8192) {
+	if (!fontProperty && !fromTheme && !nativeColors) if (valueCacheEntries > 8192) {
 		valueCaches = /* @__PURE__ */ new WeakMap();
 		valueCacheEntries = 0;
 	} else {
@@ -1511,9 +1535,21 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 	var theme = cursor ? cursor[conditionTheme] : "";
 	if (theme) {
 		if (import_constants.supportsDynamicColorIOS && (0, import_getDynamicVal.isColorStyleKey)(property)) {
-			var _direct, _ref, _property;
-			var schemes = (_ref = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {}))[_property = property] || (_ref[_property] = {});
-			schemes[theme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
+			var _direct;
+			var colors = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {});
+			var schemes = colors[property];
+			if (!schemes) {
+				var _direct_flatSlots_get_find, _direct_flatSlots_get, _direct_flatSlots;
+				schemes = colors[property] = {};
+				var base = (_direct_flatSlots = direct.flatSlots) === null || _direct_flatSlots === void 0 ? void 0 : (_direct_flatSlots_get = _direct_flatSlots.get(property)) === null || _direct_flatSlots_get === void 0 ? void 0 : (_direct_flatSlots_get_find = _direct_flatSlots_get.find(function(entry) {
+					return !entry[2];
+				})) === null || _direct_flatSlots_get_find === void 0 ? void 0 : _direct_flatSlots_get_find[1];
+				if (base !== void 0) {
+					schemes.light = (0, import_getDynamicVal.extractValueFromDynamic)(base, "light");
+					schemes.dark = (0, import_getDynamicVal.extractValueFromDynamic)(base, "dark");
+				}
+			}
+			schemes[theme] = (0, import_getDynamicVal.extractValueFromDynamic)(value, theme);
 			streamWriteInline(state, property, { dynamic: { ...schemes } }, cursor, originalValue, true, condition & 1 ? condition : condition + 1);
 			return;
 		}
@@ -1565,10 +1601,8 @@ function numericUnitValue(value, first, second) {
 	return value.length > first.length && (value.endsWith(first) || value.endsWith(second)) ? +value.slice(0, -first.length) : NaN;
 }
 function resolveNumericValue(value) {
-	var unitValue = numericUnitValue(value, "px", "dp");
-	if (Number.isFinite(unitValue)) return unitValue;
-	var numeric = +value;
-	return Number.isFinite(numeric) ? numeric : value;
+	var numeric = numericUnitValue(value, "px", "dp");
+	return isFinite(numeric) ? numeric : isFinite(numeric = +value) ? numeric : value;
 }
 function emitBorder(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "borderBlock" || property === "borderInline") {
@@ -1625,9 +1659,9 @@ function emitTextDecoration(state, raw, cursor, originalValue, contextOnly) {
 function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
 	emitProperty(state, property, resolveValue(state, property, raw), cursor, originalValue, contextOnly);
 }
-function resolveValue(state, property, raw) {
-	var value = typeof raw === "string" ? configuredValue(state, property, raw, true) : raw;
-	if (typeof value === "string" && value !== "") value = resolveNumericValue(value);
+function resolveValue(state, property, raw, nativeColors) {
+	var value = typeof raw === "string" ? configuredValue(state, property, raw, true, nativeColors) : raw;
+	if (typeof value === "string" && value !== "" && true) value = resolveNumericValue(value);
 	return value;
 }
 function shadowUnit(part) {
@@ -1679,7 +1713,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
 		var value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
 		if (typeof value2 === "string" && !value2.startsWith(import_themeRef.THEME_REF_PREFIX)) {
-			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
+			if (property === "rotate" && !isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
 				if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`native transform "${property}" cannot represent "${value2}"; dropping it`);
 				if (condition & 1) {
 					(0, import_runtime.removeTransformValue)(state.transformAccumulator, property);
@@ -1719,13 +1753,14 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		}
 		return;
 	}
-	var value3 = resolveValue(state, property, raw);
+	var nativeColors = typeof raw === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow") ? /* @__PURE__ */ new Map() : void 0;
+	var value3 = resolveValue(state, property, raw, nativeColors);
 	if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
 		state.flatBoxShadow = value3;
 		state.flatBoxShadowSequence = frameSequence + 1;
 	}
 	if (typeof value3 === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow")) {
-		var parsed = (0, import_parseNativeStyle.parseNativeStyle)(property, value3);
+		var parsed = (0, import_parseNativeStyle.parseNativeStyle)(property, value3, nativeColors);
 		if (parsed) {
 			if (property === "textShadow") {
 				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
@@ -1799,9 +1834,9 @@ function walkConditionalValue(state, property, value, parent, sink) {
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		var chainCount = segments.length / 5 - 1;
 		if (property === "aspectRatio" && chainCount === 1) {
-			var left = Number(value.slice(segments[7], segments[8]));
-			var right = Number(value.slice(segments[5], segments[6]));
-			if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) return false;
+			var left = +value.slice(segments[7], segments[8]);
+			var right = +value.slice(segments[5], segments[6]);
+			if (left > 0 && right > 0 && isFinite(left) && isFinite(right)) return false;
 		}
 		for (var index = 0; index < segments.length; index += 5) {
 			var start = segments[index];
@@ -1862,7 +1897,7 @@ function walkConditionalValue(state, property, value, parent, sink) {
 			if (cursor1[conditionValue] & conditionResolvedFlag || warnMode) emitConditionalValue(state, property, value[key], cursor1, value[key], sink, warnMode, contextOnly);
 		}
 	}
-	if (warnMode && process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && (0, import_grammarConfig.getConfigRevisionState)(state.conf).tokenCategory(property) && (0, import_borderComponents.splitComponents)(lastPayload).length > 1) (0, import_warnOnce.warnOnce)(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+	if (warnMode && process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && (0, import_grammarConfig.getConfigRevisionState)(state.conf).tokenCategory(property) && (0, import_grammarConfig.getConfigRevisionState)(state.conf).propertyKind(property) !== 8 && property !== "boxShadow" && property !== "textShadow" && property !== "fontFamily" && property !== "gap" && (0, import_borderComponents.splitComponents)(lastPayload).length > 1) (0, import_warnOnce.warnOnce)(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
 	if (warnMode === 1 && (!import_getCSSStylesAtomic.canGenerateCSS || !state.flatShouldDoClasses) && conditions & 12 && !hasBase) {
 		var _state_flatPropertyLayers;
 		var resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
@@ -1925,18 +1960,20 @@ function contributeValue(state, property, value, originalValue) {
 function clearDirectStyle(state, property) {
 	var _direct_flatAtomics;
 	var direct = state;
+	if (direct.flatDynamicColors) delete direct.flatDynamicColors[property];
 	var propertyKind = (0, import_grammarConfig.getConfigRevisionState)(state.conf).propertyKind(property);
 	var atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
 	var slot = atomicKey;
 	(_direct_flatAtomics = direct.flatAtomics) === null || _direct_flatAtomics === void 0 || _direct_flatAtomics.delete(slot);
 	if (direct.flatSlots) {
-		if (slot !== atomicKey) {
+		if (slot !== atomicKey || atomicKey === "flex") {
 			var entries = direct.flatSlots.get(slot);
 			if (entries) {
 				for (var index = entries.length; index--;) if (entries[index][0] === atomicKey) entries.splice(index, 1);
+				if (!entries.length) direct.flatSlots.delete(slot);
 			}
 		}
-		direct.flatSlots.delete(atomicKey);
+		if (atomicKey !== "flex") direct.flatSlots.delete(atomicKey);
 	}
 	if (atomicKey === "transform") state.transformAccumulator = void 0;
 	if (state.style) delete state.style[atomicKey];