@tamagui/core 3.0.0-beta.1216.1 → 3.0.0-beta.1309.1

package/dist/native.cjs

@@ -13816,7 +13816,6 @@ var _loop = function(parent2) {
 };
 function expandStyle(key, value) {
 	arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : getStyleCompat();
-	if (isAndroid && key === "elevationAndroid") return [["elevation", value]];
 	switch (key) {
 		case "objectFit": return [["resizeMode", resizeModeMap[value] || "cover"]];
 		case "verticalAlign": return [["textAlignVertical", verticalAlignMap[value] || "auto"]];
@@ -14005,10 +14004,6 @@ function normalizeShadow(param) {
 //#endregion
 //#region ../web/dist/esm/helpers/expandStyles.native.js
 function fixStyles(style) {
-	if ("elevationAndroid" in style) {
-		style["elevation"] = style.elevationAndroid;
-		delete style.elevationAndroid;
-	}
 	if (style.shadowRadius != null || style.shadowColor || style.shadowOpacity != null || style.shadowOffset) Object.assign(style, normalizeShadow(style));
 	for (var key in borderDefaults) if (key in style) {
 		var _style, _borderDefaults_key;
@@ -15003,6 +14998,7 @@ function contributeProp(pass, keyOg, valOg) {
 			if (hocSlots) {
 				var _direct1;
 				var slots = (_direct1 = direct).flatSlots || (_direct1.flatSlots = /* @__PURE__ */ new Map());
+				var markerLayer = pass[passSourceLayer];
 				var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 				try {
 					for (var _iterator = hocSlots[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
@@ -15011,6 +15007,7 @@ function contributeProp(pass, keyOg, valOg) {
 						try {
 							for (var _iterator1 = entries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 								var entry = _step1.value;
+								pass[passSourceLayer] = Math.max(entry[7] >> 5, sourceLayerResolver);
 								if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
 								if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in nonAnimatableStyleProps)) {
 									var _styleState_animationDriver;
@@ -15040,6 +15037,7 @@ function contributeProp(pass, keyOg, valOg) {
 						if (_didIteratorError) throw _iteratorError;
 					}
 				}
+				pass[passSourceLayer] = markerLayer;
 			}
 		}
 		return;
@@ -15098,9 +15096,6 @@ function contributeProp(pass, keyOg, valOg) {
 	else return;
 	var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
 	if (!isValidStyleKeyInit) {
-		if (!isAndroid) {
-			if (keyInit === "elevationAndroid") return;
-		}
 		if (keyInit === "userSelect") {
 			keyInit = "selectable";
 			valInit = valInit !== "none";
@@ -15220,6 +15215,12 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		animationDriver: resolvedDriver
 	};
 	styleState.flatStyleStaticConfig = styleStaticConfig;
+	var prev = styleProps.prevStyle;
+	if (prev) {
+		styleState.flatPrevStyle = prev;
+		styleState.flatStyleChanged = false;
+		styleState.flatStyleKeyCount = 0;
+	}
 	var { asChild } = props;
 	var { neverSkipProps } = staticConfig;
 	var { noSkip, disableExpandShorthands, noExpand, noClass, noMergeStyle, noNormalize, isAnimated, styledContext } = styleProps;
@@ -15419,6 +15420,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		}
 		if (hasProvenance) setStyleTokenProvenance(styleState.style, provenance);
 	}
+	var direct = styleState;
+	var prevStyle = direct.flatPrevStyle;
+	if (prevStyle && styleState.style && !direct.flatStyleChanged && Object.keys(prevStyle).length === Object.keys(styleState.style).length) styleState.style = prevStyle;
 	var result = {
 		hasMedia,
 		fontFamily: styleState.fontFamily,
@@ -15540,6 +15544,11 @@ function mergeStyle(styleState, key, val) {
 		if (staticConfig.isInput && key in nativeTextInputColorProps) viewProps[nativeTextInputColorProps[key]] = out;
 		else {
 			var _styleState4;
+			var direct = styleState;
+			if (direct.flatPrevStyle) {
+				direct.flatStyleKeyCount = (direct.flatStyleKeyCount || 0) + 1;
+				if (!direct.flatStyleChanged && direct.flatPrevStyle[key] !== out) direct.flatStyleChanged = true;
+			}
 			(_styleState4 = styleState).style || (_styleState4.style = {});
 			styleState.style[key] = out;
 			if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
@@ -16215,9 +16224,10 @@ function walkConditionalValue(state, property, value, parent, sink) {
 		}
 	}
 	if (warnMode === 1 && conditions & 12 && !hasBase) {
-		var _state_flatPropertyLayers;
 		var resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
-		if (resting !== null && !((_state_flatPropertyLayers = state.flatPropertyLayers) === null || _state_flatPropertyLayers === void 0 ? void 0 : _state_flatPropertyLayers.has(property))) emitConditionalValue(state, property, resting, parentCondition, resting, sink, warnMode, contextOnly);
+		var layers = state.flatPropertyLayers;
+		var owned = layers === null || layers === void 0 ? void 0 : layers.has(property);
+		if (resting !== null && !owned) emitConditionalValue(state, property, resting, parentCondition, resting, sink, warnMode, contextOnly);
 	}
 	return true;
 }
@@ -16817,8 +16827,9 @@ function getThemedChildren(themeState, children, props) {
 	});
 	var { isInverse } = themeState;
 	var requiresExtraWrapper = isInverse || forceClassName;
-	if (!state.hasEverThemed) state.hasEverThemed = true;
-	if (requiresExtraWrapper || themeState.name === "dark" || themeState.name === "light") state.hasEverThemed = "wrapped";
+	var isFirstThemedRender = !state.hasEverThemed;
+	if (isFirstThemedRender) state.hasEverThemed = true;
+	if (requiresExtraWrapper || isFirstThemedRender && (themeState.name === "dark" || themeState.name === "light")) state.hasEverThemed = "wrapped";
 	if (shallow) if (!themeState.parentId) {} else {
 		var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
 		if (!parentState) throw new Error("❌ Error 014");
@@ -17010,7 +17021,8 @@ function createComponent(staticConfig) {
 			willBeAnimated,
 			canPlatformPseudo: componentState.platformPseudo,
 			displayName,
-			styledContext: styledContextValue
+			styledContext: styledContextValue,
+			prevStyle: stateRef.current.prevStyle
 		};
 		var themeName = (themeState === null || themeState === void 0 ? void 0 : themeState.name) || "";
 		var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, groupContextParent, elementType, startedUnhydrated, debugProp, animationDriver, styleStaticConfig);
@@ -17282,6 +17294,7 @@ function createComponent(staticConfig) {
 		setMediaShouldUpdate(stateRef.current, shouldListenForMedia, mediaListeningKeys, stateRef.current.optimizeForFirstRender);
 		var { viewProps: viewPropsIn, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups } = splitStyles || {};
 		var groupSetRevision = useGroupSetRevision(pseudoGroups, mediaGroups);
+		stateRef.current.prevStyle = splitStylesStyle || null;
 		var propsWithAnimation = props;
 		var _ref6 = viewPropsIn || {}, { asChild, children, themeShallow, spaceDirection: _spaceDirection, onPress, onLongPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onMouseUp, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onTransition, separator, passThrough, forceStyle: _forceStyle, onClick, theme: _themeProp } = _ref6, nonTamaguiProps = _objectWithoutProperties(_ref6, _excluded2$2);
 		var viewProps = nonTamaguiProps;
@@ -18047,11 +18060,11 @@ function buildCSSRuleSets(declarations, fontDeclarations) {
 	var defaultFontToken = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "";
 	if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
 		let declarationsToRuleSet2 = function(decs) {
-			return `:root${arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ""} {${sep}${[...decs].join(`;${sep}`)}
-}`;
+			return `:root${arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ""}${sep}{${sep}${[...decs].join(`;${sep}`)}${developmentWhitespace ? "\n" : ""}}`;
 		};
 		var cssRuleSets = [];
-		var sep = " ";
+		var developmentWhitespace = false;
+		var sep = developmentWhitespace ? " " : "";
 		if (declarations.length) cssRuleSets.push(declarationsToRuleSet2(declarations));
 		var fontSelectors = [];
 		var sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort();
@@ -18079,7 +18092,7 @@ function buildCSSRuleSets(declarations, fontDeclarations) {
 			var defaultFont = fontDeclarations[defaultFontToken];
 			if (defaultFont === null || defaultFont === void 0 ? void 0 : defaultFont.fontParsed) {
 				var sharedSelectors = `:where(${[...fontSelectors, ".is_View"].join(", ")})`;
-				cssRuleSets.push(`${sharedSelectors} {font-family: var(--f-family)}`);
+				cssRuleSets.push(`${sharedSelectors}${sep}{font-family:${sep}var(--f-family)}`);
 			}
 		}
 		return cssRuleSets;

package/dist/test.native.cjs

@@ -4090,7 +4090,6 @@ var _loop = function(parent2) {
 };
 function expandStyle(key, value) {
 	arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : getStyleCompat();
-	if (isAndroid && key === "elevationAndroid") return [["elevation", value]];
 	switch (key) {
 		case "objectFit": return [["resizeMode", resizeModeMap[value] || "cover"]];
 		case "verticalAlign": return [["textAlignVertical", verticalAlignMap[value] || "auto"]];
@@ -4550,10 +4549,6 @@ function normalizeShadow(param) {
 //#endregion
 //#region ../web/dist/esm/helpers/expandStyles.native.js
 function fixStyles(style) {
-	if ("elevationAndroid" in style) {
-		style["elevation"] = style.elevationAndroid;
-		delete style.elevationAndroid;
-	}
 	if (style.shadowRadius != null || style.shadowColor || style.shadowOpacity != null || style.shadowOffset) Object.assign(style, normalizeShadow(style));
 	for (var key in borderDefaults) if (key in style) {
 		var _style, _borderDefaults_key;
@@ -5708,6 +5703,7 @@ function contributeProp(pass, keyOg, valOg) {
 			if (hocSlots) {
 				var _direct1;
 				var slots = (_direct1 = direct).flatSlots || (_direct1.flatSlots = /* @__PURE__ */ new Map());
+				var markerLayer = pass[passSourceLayer];
 				var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 				try {
 					for (var _iterator = hocSlots[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
@@ -5716,6 +5712,7 @@ function contributeProp(pass, keyOg, valOg) {
 						try {
 							for (var _iterator1 = entries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 								var entry = _step1.value;
+								pass[passSourceLayer] = Math.max(entry[7] >> 5, sourceLayerResolver);
 								if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
 								if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in nonAnimatableStyleProps)) {
 									var _styleState_animationDriver;
@@ -5745,6 +5742,7 @@ function contributeProp(pass, keyOg, valOg) {
 						if (_didIteratorError) throw _iteratorError;
 					}
 				}
+				pass[passSourceLayer] = markerLayer;
 			}
 		}
 		return;
@@ -5816,9 +5814,6 @@ function contributeProp(pass, keyOg, valOg) {
 		}
 	}
 	if (!isValidStyleKeyInit) {
-		if (!isAndroid) {
-			if (keyInit === "elevationAndroid") return;
-		}
 		if (keyInit === "userSelect") {
 			keyInit = "selectable";
 			valInit = valInit !== "none";
@@ -5971,6 +5966,12 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		animationDriver: resolvedDriver
 	};
 	styleState.flatStyleStaticConfig = styleStaticConfig;
+	var prev = styleProps.prevStyle;
+	if (prev) {
+		styleState.flatPrevStyle = prev;
+		styleState.flatStyleChanged = false;
+		styleState.flatStyleKeyCount = 0;
+	}
 	if (globalThis.process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
 	if (globalThis.process.env.NODE_ENV === "development" && debug === "verbose" && true) {
 		if (isDevTools) {
@@ -6189,6 +6190,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		}
 		if (hasProvenance) setStyleTokenProvenance(styleState.style, provenance);
 	}
+	var direct = styleState;
+	var prevStyle = direct.flatPrevStyle;
+	if (prevStyle && styleState.style && !direct.flatStyleChanged && Object.keys(prevStyle).length === Object.keys(styleState.style).length) styleState.style = prevStyle;
 	var result = {
 		hasMedia,
 		fontFamily: styleState.fontFamily,
@@ -6328,6 +6332,11 @@ function mergeStyle(styleState, key, val) {
 		if (staticConfig.isInput && key in nativeTextInputColorProps) viewProps[nativeTextInputColorProps[key]] = out;
 		else {
 			var _styleState4;
+			var direct = styleState;
+			if (direct.flatPrevStyle) {
+				direct.flatStyleKeyCount = (direct.flatStyleKeyCount || 0) + 1;
+				if (!direct.flatStyleChanged && direct.flatPrevStyle[key] !== out) direct.flatStyleChanged = true;
+			}
 			(_styleState4 = styleState).style || (_styleState4.style = {});
 			styleState.style[key] = out;
 			if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
@@ -7122,9 +7131,10 @@ function walkConditionalValue(state, property, value, parent, sink) {
 	}
 	if (warnMode && globalThis.process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && getConfigRevisionState(state.conf).propertyKind(property) !== 8 && property !== "boxShadow" && property !== "textShadow" && property !== "fontFamily" && property !== "gap" && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
 	if (warnMode === 1 && conditions & 12 && !hasBase) {
-		var _state_flatPropertyLayers;
 		var resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
-		if (resting !== null && !((_state_flatPropertyLayers = state.flatPropertyLayers) === null || _state_flatPropertyLayers === void 0 ? void 0 : _state_flatPropertyLayers.has(property))) emitConditionalValue(state, property, resting, parentCondition, resting, sink, warnMode, contextOnly);
+		var layers = state.flatPropertyLayers;
+		var owned = layers === null || layers === void 0 ? void 0 : layers.has(property);
+		if (resting !== null && !owned) emitConditionalValue(state, property, resting, parentCondition, resting, sink, warnMode, contextOnly);
 	}
 	return true;
 }
@@ -7744,8 +7754,9 @@ function getThemedChildren(themeState, children, props) {
 	});
 	var { isInverse } = themeState;
 	var requiresExtraWrapper = isInverse || forceClassName;
-	if (!state.hasEverThemed) state.hasEverThemed = true;
-	if (requiresExtraWrapper || themeState.name === "dark" || themeState.name === "light") state.hasEverThemed = "wrapped";
+	var isFirstThemedRender = !state.hasEverThemed;
+	if (isFirstThemedRender) state.hasEverThemed = true;
+	if (requiresExtraWrapper || isFirstThemedRender && (themeState.name === "dark" || themeState.name === "light")) state.hasEverThemed = "wrapped";
 	if (shallow) if (!themeState.parentId) {} else {
 		var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
 		if (!parentState) throw new Error(globalThis.process.env.NODE_ENV !== "production" ? formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
@@ -8061,7 +8072,8 @@ ${banner}
 			willBeAnimated,
 			canPlatformPseudo: componentState.platformPseudo,
 			displayName,
-			styledContext: styledContextValue
+			styledContext: styledContextValue,
+			prevStyle: stateRef.current.prevStyle
 		};
 		var themeName = (themeState === null || themeState === void 0 ? void 0 : themeState.name) || "";
 		if (globalThis.process.env.NODE_ENV === "development" && time$1) time$1`split-styles-prepare`;
@@ -8350,6 +8362,7 @@ ${banner}
 		setMediaShouldUpdate(stateRef.current, shouldListenForMedia, mediaListeningKeys, stateRef.current.optimizeForFirstRender);
 		var { viewProps: viewPropsIn, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups } = splitStyles || {};
 		var groupSetRevision = useGroupSetRevision(pseudoGroups, mediaGroups);
+		stateRef.current.prevStyle = splitStylesStyle || null;
 		var propsWithAnimation = props;
 		var _ref6 = viewPropsIn || {}, { asChild, children, themeShallow, spaceDirection: _spaceDirection, onPress, onLongPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onMouseUp, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onTransition, separator, passThrough, forceStyle: _forceStyle, onClick, theme: _themeProp } = _ref6, nonTamaguiProps = _objectWithoutProperties(_ref6, _excluded2$2);
 		var viewProps = nonTamaguiProps;
@@ -9167,11 +9180,11 @@ function buildCSSRuleSets(declarations, fontDeclarations) {
 	var defaultFontToken = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "";
 	if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
 		let declarationsToRuleSet2 = function(decs) {
-			return `:root${arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ""} {${sep}${[...decs].join(`;${sep}`)}
-}`;
+			return `:root${arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ""}${sep}{${sep}${[...decs].join(`;${sep}`)}${developmentWhitespace ? "\n" : ""}}`;
 		};
 		var cssRuleSets = [];
-		var sep = " ";
+		var developmentWhitespace = globalThis.process.env.NODE_ENV === "development";
+		var sep = developmentWhitespace ? " " : "";
 		if (declarations.length) cssRuleSets.push(declarationsToRuleSet2(declarations));
 		var fontSelectors = [];
 		var sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort();
@@ -9199,7 +9212,7 @@ function buildCSSRuleSets(declarations, fontDeclarations) {
 			var defaultFont = fontDeclarations[defaultFontToken];
 			if (defaultFont === null || defaultFont === void 0 ? void 0 : defaultFont.fontParsed) {
 				var sharedSelectors = `:where(${[...fontSelectors, ".is_View"].join(", ")})`;
-				cssRuleSets.push(`${sharedSelectors} {font-family: var(--f-family)}`);
+				cssRuleSets.push(`${sharedSelectors}${sep}{font-family:${sep}var(--f-family)}`);
 			}
 		}
 		return cssRuleSets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "3.0.0-beta.1216.1",
+  "version": "3.0.0-beta.1309.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "author": {
@@ -137,25 +137,25 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.1216.1",
-    "@tamagui/constants": "3.0.0-beta.1216.1",
-    "@tamagui/helpers": "3.0.0-beta.1216.1",
-    "@tamagui/react-native-media-driver": "3.0.0-beta.1216.1",
-    "@tamagui/react-native-use-pressable": "3.0.0-beta.1216.1",
-    "@tamagui/size": "3.0.0-beta.1216.1",
-    "@tamagui/use-element-layout": "3.0.0-beta.1216.1",
-    "@tamagui/use-event": "3.0.0-beta.1216.1",
-    "@tamagui/web": "3.0.0-beta.1216.1"
+    "@tamagui/compose-refs": "3.0.0-beta.1309.1",
+    "@tamagui/constants": "3.0.0-beta.1309.1",
+    "@tamagui/helpers": "3.0.0-beta.1309.1",
+    "@tamagui/react-native-media-driver": "3.0.0-beta.1309.1",
+    "@tamagui/react-native-use-pressable": "3.0.0-beta.1309.1",
+    "@tamagui/size": "3.0.0-beta.1309.1",
+    "@tamagui/use-element-layout": "3.0.0-beta.1309.1",
+    "@tamagui/use-event": "3.0.0-beta.1309.1",
+    "@tamagui/web": "3.0.0-beta.1309.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.1216.1",
-    "@tamagui/native-bundle": "3.0.0-beta.1216.1",
-    "@tamagui/react-native-web-lite": "3.0.0-beta.1216.1",
+    "@tamagui/build": "3.0.0-beta.1309.1",
+    "@tamagui/native-bundle": "3.0.0-beta.1309.1",
+    "@tamagui/react-native-web-lite": "3.0.0-beta.1309.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "19.2.3",
     "react-native": "0.86.2",
-    "typescript": "~6.0.3",
+    "typescript": "7.0.2",
     "vitest": "4.1.0"
   },
   "peerDependencies": {