@tamagui/web 3.0.0-beta.1115.1 → 3.0.0-beta.1121.1

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -58,7 +58,7 @@ var import_log = require("./log.cjs");
 var import_normalizeColor = require("./normalizeColor.cjs");
 var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs");
 require("./parseNativeStyle.cjs");
-require("./parseNativeTransform.native.cjs");
+var import_parseNativeTransform = require("./parseNativeTransform.native.cjs");
 require("./resolveNativeUnits.cjs");
 var import_resolveVariableValue = require("./resolveVariableValue.cjs");
 var import_skipProps = require("./skipProps.cjs");
@@ -383,7 +383,11 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 				const slots = direct.flatSlots ||= /* @__PURE__ */ new Map();
 				for (const [slot, entries] of hocSlots) for (const entry of entries) {
 					if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
-					writeCapturedStyleRecord(slots, slot, entry, pass[passSourceLayer]);
+					if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in import_helpers.nonAnimatableStyleProps)) {
+						const property = entry[0] === "--t-x" ? "x" : entry[0] === "--t-y" ? "y" : entry[0] === "--t-scale-x" ? "scaleX" : entry[0] === "--t-scale-y" ? "scaleY" : entry[0];
+						const value = styleState.animationDriver?.inputStyle === "value" ? entry[6] : entry[1];
+						entry[3] ? contributeValue(styleState, property, value, entry[6], false, entry[3]) : emitValue(styleState, property, value, null, entry[6], false);
+					} else writeCapturedStyleRecord(slots, slot, entry, pass[passSourceLayer]);
 				}
 			}
 		}
@@ -1210,7 +1214,11 @@ function completeResolvedStyles(state, merge = mergeStyle) {
 		if (cssEntries) {
 			(0, import_getCSSStylesAtomic.registerAtomicSlot)(direct, property, cssEntries);
 			if (capture) {
-				for (const entry of cssEntries) entry[7] = entry[7] | recordCSS;
+				for (const entry of cssEntries) {
+					entry[7] = entry[7] | recordCSS;
+					if (!(entry[2] & 12)) continue;
+					for (const sibling of cssEntries) if (sibling[0] === entry[0]) sibling[8] = true;
+				}
 				capture.set(property, cssEntries);
 			}
 		}
@@ -1456,6 +1464,10 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 		(0, import_runtime.addTransformValue)(state.transformAccumulator, property, value);
 		return;
 	}
+	if (property === "transition" && condition & 12 && !state.staticConfig.isHOC && state.styleProps.isAnimated) {
+		streamWriteInline(state, property, value, cursor, originalValue, false, -1, true);
+		return;
+	}
 	const shouldPromoteAnimatedStyle = import_getCSSStylesAtomic.canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && state.animationDriver?.inputStyle === "css" && property in import_helpers.nonAnimatableStyleProps;
 	if (import_getCSSStylesAtomic.canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
 		writeStyleRecord(state, property, value, cursor, originalValue, shouldPromoteAnimatedStyle ? recordCSS : 0);
@@ -1535,6 +1547,13 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	if (property === "transform") {
 		if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = (0, import_transformsToString.transformsToString)(raw);
+		if (typeof raw === "string" && !state.flatShouldDoClasses && state.animationDriver?.inputStyle === "value") {
+			const transform = (0, import_parseNativeTransform.parseNativeTransform)(raw);
+			if (transform) {
+				emitProperty(state, property, transform, cursor, originalValue, contextOnly);
+				return;
+			}
+		}
 	}
 	if (typeof raw === "string" && property === "background") {
 		const parts = (0, import_borderComponents.splitComponents)(raw);
@@ -1591,7 +1610,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 }
 function emitConditionalValue(state, property, payload, condition, source, sink, mode, contextOnly) {
 	if (sink) sink(payload, condition, source);
-	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 ? payload : void 0, contextOnly, mode, source);
+	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 || state.staticConfig.isHOC || state.styleProps.stylePieceEntries ? payload : void 0, contextOnly, mode, source);
 	else emitValue(state, property, payload, null, payload, contextOnly);
 }
 function walkConditionalValue(state, property, value, parent, sink, warnMode = 0, contextOnly = false) {

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

@@ -349,22 +349,22 @@ function contributeProp(pass, keyOg, valOg) {
 			var resolveClassName = styleFrontend === null || styleFrontend === void 0 ? void 0 : styleFrontend.resolveClassName;
 			var composedProps = null;
 			var sink = function(entry2) {
-				var property2 = entry2[0];
+				var property3 = entry2[0];
 				var condition2 = entry2[2];
-				if (property2.charCodeAt(0) === 95 && property2.charCodeAt(1) === 95) {
+				if (property3.charCodeAt(0) === 95 && property3.charCodeAt(1) === 95) {
 					composedProps || (composedProps = {});
-					composedProps[property2] = (0, import_styleFrontend.mergeFrontendCondition)(composedProps[property2], entry2[1], condition2);
+					composedProps[property3] = (0, import_styleFrontend.mergeFrontendCondition)(composedProps[property3], entry2[1], condition2);
 					return;
 				}
 				if (condition2 !== void 0) {
-					if (isValidStyleKey(property2, validStyles)) contributeValue(styleState, property2, entry2[1], void 0, false, condition2);
-					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property2}" is not a valid style on this component; the frontend value is dropped.`);
+					if (isValidStyleKey(property3, validStyles)) contributeValue(styleState, property3, entry2[1], void 0, false, condition2);
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property3}" is not a valid style on this component; the frontend value is dropped.`);
 					return;
 				}
-				if (property2 === "group") pass[passFrontendGroup] = entry2[1];
-				else if (property2 === "container") pass[passFrontendContainer] = entry2[1];
-				else if (property2 === "containerType") pass[passFrontendContainerType] = entry2[1];
-				contributeProp(pass, property2, entry2[1]);
+				if (property3 === "group") pass[passFrontendGroup] = entry2[1];
+				else if (property3 === "container") pass[passFrontendContainer] = entry2[1];
+				else if (property3 === "containerType") pass[passFrontendContainerType] = entry2[1];
+				contributeProp(pass, property3, entry2[1]);
 			};
 			var start = 0;
 			for (var index = 0; index <= valInit.length; index++) {
@@ -422,7 +422,12 @@ function contributeProp(pass, keyOg, valOg) {
 							for (var _iterator1 = entries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 								var entry = _step1.value;
 								if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
-								writeCapturedStyleRecord(slots, slot, entry, pass[passSourceLayer]);
+								if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in import_helpers.nonAnimatableStyleProps)) {
+									var _styleState_animationDriver;
+									var property2 = entry[0] === "--t-x" ? "x" : entry[0] === "--t-y" ? "y" : entry[0] === "--t-scale-x" ? "scaleX" : entry[0] === "--t-scale-y" ? "scaleY" : entry[0];
+									var value = ((_styleState_animationDriver = styleState.animationDriver) === null || _styleState_animationDriver === void 0 ? void 0 : _styleState_animationDriver.inputStyle) === "value" ? entry[6] : entry[1];
+									entry[3] ? contributeValue(styleState, property2, value, entry[6], false, entry[3]) : emitValue(styleState, property2, value, null, entry[6], false);
+								} else writeCapturedStyleRecord(slots, slot, entry, pass[passSourceLayer]);
 							}
 						} catch (err) {
 							_didIteratorError1 = true;
@@ -1181,6 +1186,23 @@ function completeResolvedStyles(state) {
 						for (var _iterator1 = cssEntries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 							var entry1 = _step1.value;
 							entry1[7] = entry1[7] | recordCSS;
+							if (!(entry1[2] & 12)) continue;
+							var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+							try {
+								for (var _iterator2 = cssEntries[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+									var sibling = _step2.value;
+									if (sibling[0] === entry1[0]) sibling[8] = true;
+								}
+							} catch (err) {
+								_didIteratorError2 = true;
+								_iteratorError2 = err;
+							} finally {
+								try {
+									if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+								} finally {
+									if (_didIteratorError2) throw _iteratorError2;
+								}
+							}
 						}
 					} catch (err) {
 						_didIteratorError1 = true;
@@ -1528,6 +1550,10 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 		(0, import_runtime.addTransformValue)(state.transformAccumulator, property, value);
 		return;
 	}
+	if (property === "transition" && condition & 12 && !state.staticConfig.isHOC && state.styleProps.isAnimated) {
+		streamWriteInline(state, property, value, cursor, originalValue, false, -1, true);
+		return;
+	}
 	var shouldPromoteAnimatedStyle = import_getCSSStylesAtomic.canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && ((_state_animationDriver = state.animationDriver) === null || _state_animationDriver === void 0 ? void 0 : _state_animationDriver.inputStyle) === "css" && property in import_helpers.nonAnimatableStyleProps;
 	if (import_getCSSStylesAtomic.canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
 		writeStyleRecord(state, property, value, cursor, originalValue, shouldPromoteAnimatedStyle ? recordCSS : 0);
@@ -1625,7 +1651,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	if (property === "transform") {
 		if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = (0, import_transformsToString.transformsToString)(raw);
-		if (typeof raw === "string") {
+		if (typeof raw === "string" && true) {
 			var transform = (0, import_parseNativeTransform.parseNativeTransform)(raw);
 			if (transform) {
 				emitProperty(state, property, transform, cursor, originalValue, contextOnly);
@@ -1752,7 +1778,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 }
 function emitConditionalValue(state, property, payload, condition, source, sink, mode, contextOnly) {
 	if (sink) sink(payload, condition, source);
-	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 ? payload : void 0, contextOnly, mode, source);
+	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 || state.staticConfig.isHOC || state.styleProps.stylePieceEntries ? payload : void 0, contextOnly, mode, source);
 	else emitValue(state, property, payload, null, payload, contextOnly);
 }
 function walkConditionalValue(state, property, value, parent, sink) {

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

@@ -349,22 +349,22 @@ function contributeProp(pass, keyOg, valOg) {
 			var resolveClassName = styleFrontend === null || styleFrontend === void 0 ? void 0 : styleFrontend.resolveClassName;
 			var composedProps = null;
 			var sink = function(entry2) {
-				var property2 = entry2[0];
+				var property3 = entry2[0];
 				var condition2 = entry2[2];
-				if (property2.charCodeAt(0) === 95 && property2.charCodeAt(1) === 95) {
+				if (property3.charCodeAt(0) === 95 && property3.charCodeAt(1) === 95) {
 					composedProps || (composedProps = {});
-					composedProps[property2] = (0, import_styleFrontend.mergeFrontendCondition)(composedProps[property2], entry2[1], condition2);
+					composedProps[property3] = (0, import_styleFrontend.mergeFrontendCondition)(composedProps[property3], entry2[1], condition2);
 					return;
 				}
 				if (condition2 !== void 0) {
-					if (isValidStyleKey(property2, validStyles)) contributeValue(styleState, property2, entry2[1], void 0, false, condition2);
-					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property2}" is not a valid style on this component; the frontend value is dropped.`);
+					if (isValidStyleKey(property3, validStyles)) contributeValue(styleState, property3, entry2[1], void 0, false, condition2);
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property3}" is not a valid style on this component; the frontend value is dropped.`);
 					return;
 				}
-				if (property2 === "group") pass[passFrontendGroup] = entry2[1];
-				else if (property2 === "container") pass[passFrontendContainer] = entry2[1];
-				else if (property2 === "containerType") pass[passFrontendContainerType] = entry2[1];
-				contributeProp(pass, property2, entry2[1]);
+				if (property3 === "group") pass[passFrontendGroup] = entry2[1];
+				else if (property3 === "container") pass[passFrontendContainer] = entry2[1];
+				else if (property3 === "containerType") pass[passFrontendContainerType] = entry2[1];
+				contributeProp(pass, property3, entry2[1]);
 			};
 			var start = 0;
 			for (var index = 0; index <= valInit.length; index++) {
@@ -422,7 +422,12 @@ function contributeProp(pass, keyOg, valOg) {
 							for (var _iterator1 = entries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 								var entry = _step1.value;
 								if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
-								writeCapturedStyleRecord(slots, slot, entry, pass[passSourceLayer]);
+								if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in import_helpers.nonAnimatableStyleProps)) {
+									var _styleState_animationDriver;
+									var property2 = entry[0] === "--t-x" ? "x" : entry[0] === "--t-y" ? "y" : entry[0] === "--t-scale-x" ? "scaleX" : entry[0] === "--t-scale-y" ? "scaleY" : entry[0];
+									var value = ((_styleState_animationDriver = styleState.animationDriver) === null || _styleState_animationDriver === void 0 ? void 0 : _styleState_animationDriver.inputStyle) === "value" ? entry[6] : entry[1];
+									entry[3] ? contributeValue(styleState, property2, value, entry[6], false, entry[3]) : emitValue(styleState, property2, value, null, entry[6], false);
+								} else writeCapturedStyleRecord(slots, slot, entry, pass[passSourceLayer]);
 							}
 						} catch (err) {
 							_didIteratorError1 = true;
@@ -1181,6 +1186,23 @@ function completeResolvedStyles(state) {
 						for (var _iterator1 = cssEntries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 							var entry1 = _step1.value;
 							entry1[7] = entry1[7] | recordCSS;
+							if (!(entry1[2] & 12)) continue;
+							var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+							try {
+								for (var _iterator2 = cssEntries[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+									var sibling = _step2.value;
+									if (sibling[0] === entry1[0]) sibling[8] = true;
+								}
+							} catch (err) {
+								_didIteratorError2 = true;
+								_iteratorError2 = err;
+							} finally {
+								try {
+									if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+								} finally {
+									if (_didIteratorError2) throw _iteratorError2;
+								}
+							}
 						}
 					} catch (err) {
 						_didIteratorError1 = true;
@@ -1528,6 +1550,10 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 		(0, import_runtime.addTransformValue)(state.transformAccumulator, property, value);
 		return;
 	}
+	if (property === "transition" && condition & 12 && !state.staticConfig.isHOC && state.styleProps.isAnimated) {
+		streamWriteInline(state, property, value, cursor, originalValue, false, -1, true);
+		return;
+	}
 	var shouldPromoteAnimatedStyle = import_getCSSStylesAtomic.canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && ((_state_animationDriver = state.animationDriver) === null || _state_animationDriver === void 0 ? void 0 : _state_animationDriver.inputStyle) === "css" && property in import_helpers.nonAnimatableStyleProps;
 	if (import_getCSSStylesAtomic.canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
 		writeStyleRecord(state, property, value, cursor, originalValue, shouldPromoteAnimatedStyle ? recordCSS : 0);
@@ -1625,7 +1651,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	if (property === "transform") {
 		if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = (0, import_transformsToString.transformsToString)(raw);
-		if (typeof raw === "string") {
+		if (typeof raw === "string" && true) {
 			var transform = (0, import_parseNativeTransform.parseNativeTransform)(raw);
 			if (transform) {
 				emitProperty(state, property, transform, cursor, originalValue, contextOnly);
@@ -1752,7 +1778,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 }
 function emitConditionalValue(state, property, payload, condition, source, sink, mode, contextOnly) {
 	if (sink) sink(payload, condition, source);
-	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 ? payload : void 0, contextOnly, mode, source);
+	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 || state.staticConfig.isHOC || state.styleProps.stylePieceEntries ? payload : void 0, contextOnly, mode, source);
 	else emitValue(state, property, payload, null, payload, contextOnly);
 }
 function walkConditionalValue(state, property, value, parent, sink) {