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

package/dist/esm/helpers/getSplitStyles.mjs

@@ -379,10 +379,28 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 			}
 			const styleOriginals = shouldTrackStyleTokenProvenance ? 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] = 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) && !isVariable(value) && classifyConditionalObject(value, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key, value, styleOriginals?.[key]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -965,7 +983,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;
@@ -1088,9 +1109,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 = 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 = 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 & 17) !== (flags & 17)) other.splice(index--, 1);
+		}
+	}
 	for (let index = 0; index < list.length; index++) {
 		const entry = list[index];
 		const entryFlags = entry[7];
@@ -1115,7 +1147,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) {
@@ -1226,7 +1258,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 = getConfigRevisionState(state.conf);
 	let name = raw;
 	let opacity;
@@ -1246,7 +1278,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;
@@ -1361,15 +1393,20 @@ function configuredValue(state, property, raw, embedded = false) {
 	}
 	let out = raw;
 	if (isVariable(value)) {
-		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(property, value, resolveValues);
+		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : 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 {
@@ -1437,8 +1474,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;
 }
@@ -1547,7 +1584,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 (canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
 		state.flatBoxShadow = value;
 		state.flatBoxShadowSequence = frameSequence + 1;
@@ -1678,19 +1715,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 = 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];