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

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -418,10 +418,28 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 			}
 			const styleOriginals = shouldTrackStyleTokenProvenance ? import_styleOriginalValues.styleOriginalValues.get(style) : void 0;
 			for (const key in style) {
-				if (style[key] == null) continue;
-				if (key === "containerName") pass[passContainerName] = style[key];
-				else if (key === "containerType") pass[passContainerType] = style[key];
-				contributeValue(styleState, key, style[key], styleOriginals?.[key]);
+				const value = style[key];
+				if (value == null) continue;
+				let inline = !styleState.styleProps.stylePieceEntries;
+				if (key === "containerName") {
+					pass[passContainerName] = value;
+					inline = false;
+				} else if (key === "containerType") {
+					pass[passContainerType] = value;
+					inline = false;
+				}
+				if (inline) {
+					if (typeof value === "string") {
+						const [segments] = (0, import_grammarConfig.getConfigRevisionState)(conf).parseFlatValue(value);
+						for (let index2 = 4; index2 < segments.length; index2 += 5) if (!(segments[index2] & 1)) {
+							inline = false;
+							break;
+						}
+					} else if (value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value) && classifyConditionalObject(value, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key, value, styleOriginals?.[key]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -1004,7 +1022,10 @@ function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
 	for (let index = 0; index < list.length; index++) {
 		const entry = list[index];
 		const 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;
@@ -1127,9 +1148,20 @@ function writeStyleRecord(state, property, value, cursor, original, flags, condi
 	const identity = cursor ? cursor[conditionKey] : "";
 	const direct = state;
 	const slots = direct.flatSlots ||= /* @__PURE__ */ new Map();
-	const slot = import_getCSSStylesAtomic.canGenerateCSS && (state.flatShouldDoClasses || flags & recordCSS) ? styleSlot(property) : property.startsWith("transition") ? "transition" : property;
+	const sourceLayer = direct.flatPass?.[passSourceLayer] || 0;
+	if (direct.flatInlineStyleProp) flags |= recordInline;
+	const cssSlot = import_getCSSStylesAtomic.canGenerateCSS && (state.flatShouldDoClasses || flags & recordCSS) ? styleSlot(property) : property.startsWith("transition") ? "transition" : property;
+	const slot = flags & recordInline && cssSlot !== property ? property : cssSlot;
 	let list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
+	if (sourceLayer === sourceLayerStyle && !condition) {
+		const other = slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property);
+		if (other) for (let index = 0; index < other.length; index++) {
+			const entry = other[index];
+			const entryFlags = entry[7];
+			if (entry[0] === property && !entry[2] && entryFlags >> 5 === sourceLayerStyle && (entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) other.splice(index--, 1);
+		}
+	}
 	for (let index = 0; index < list.length; index++) {
 		const entry = list[index];
 		const entryFlags = entry[7];
@@ -1154,7 +1186,7 @@ function writeStyleRecord(state, property, value, cursor, original, flags, condi
 		cursor ? cursor[conditionSelector] : "",
 		cursor ? cursor[conditionWrappers] : void 0,
 		original,
-		flags | (state.flatPass?.[passSourceLayer] || 0) << 5
+		flags | sourceLayer << 5
 	]);
 }
 function streamWriteInline(state, property, value, cursor, original, normalize = property === "lineHeight", conditionOverride = -1, force = false) {
@@ -1265,7 +1297,7 @@ const cssWideColorKeywords = /* @__PURE__ */ new Set([
 	"currentcolor",
 	"transparent"
 ]);
-function configuredValue(state, property, raw, embedded = false) {
+function configuredValue(state, property, raw, embedded = false, nativeColors) {
 	const grammar = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
 	let name = raw;
 	let opacity;
@@ -1285,7 +1317,7 @@ function configuredValue(state, property, raw, embedded = false) {
 	const fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
 	const resolveValues = state.styleProps.resolveValues;
 	let byRaw;
-	if (!fontProperty) {
+	if (!fontProperty && !nativeColors) {
 		const revision = grammar.revision;
 		if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
 			valueCacheConf = state.conf;
@@ -1400,15 +1432,20 @@ function configuredValue(state, property, raw, embedded = false) {
 	}
 	let 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) out = `color-mix(in srgb, ${out} ${opacity}%, transparent)`;
 	}
+	if (nativeColors && out && typeof out === "object") {
+		const reference = `__tamagui_native_color_${nativeColors.size}`;
+		nativeColors.set(reference, out);
+		out = reference;
+	}
 	if (embedded && out === raw) {
 		const usedSafeArea = state.flatUsesSafeArea;
-		out = grammar.embeddedTokens(raw, (word) => configuredValue(state, property, word));
+		out = grammar.embeddedTokens(raw, (word) => 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 {
@@ -1476,8 +1513,8 @@ function resolveNumericValue(value) {
 function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
 	emitProperty(state, property, resolveValue(state, property, raw), cursor, originalValue, contextOnly);
 }
-function resolveValue(state, property, raw) {
-	let value = typeof raw === "string" ? configuredValue(state, property, raw, true) : raw;
+function resolveValue(state, property, raw, nativeColors) {
+	let value = typeof raw === "string" ? configuredValue(state, property, raw, true, nativeColors) : raw;
 	if (!state.flatShouldDoClasses && typeof value === "string" && value !== "" && property !== "lineHeight") value = resolveNumericValue(value);
 	return value;
 }
@@ -1586,7 +1623,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		else emitProperty(state, property, raw, cursor, originalValue, contextOnly);
 		return;
 	}
-	let value = resolveValue(state, property, raw);
+	let value = resolveValue(state, property, raw, void 0);
 	if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
 		state.flatBoxShadow = value;
 		state.flatBoxShadowSequence = frameSequence + 1;
@@ -1717,19 +1754,21 @@ function contributeValue(state, property, value, originalValue, contextOnly = fa
 }
 function clearDirectStyle(state, property) {
 	const direct = state;
+	if (direct.flatDynamicColors) delete direct.flatDynamicColors[property];
 	property = webStyleProperty(property);
 	const propertyKind = (0, import_grammarConfig.getConfigRevisionState)(state.conf).propertyKind(property);
 	const atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
 	const slot = styleSlot(atomicKey);
 	direct.flatAtomics?.delete(slot);
 	if (direct.flatSlots) {
-		if (slot !== atomicKey) {
+		if (slot !== atomicKey || atomicKey === "flex") {
 			const entries = direct.flatSlots.get(slot);
 			if (entries) {
 				for (let 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];

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;
@@ -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,7 +1317,7 @@ 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;
@@ -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) {
@@ -1450,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 {
@@ -1626,8 +1659,8 @@ 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;
+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;
 }
@@ -1720,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;
@@ -1926,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];

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

@@ -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;
@@ -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,7 +1317,7 @@ 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;
@@ -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) {
@@ -1450,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 {
@@ -1626,8 +1659,8 @@ 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;
+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;
 }
@@ -1720,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;
@@ -1926,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];