@tamagui/web 3.0.0-beta.748.1 → 3.0.0-beta.753.1

package/dist/cjs/helpers/getCSSStylesAtomic.cjs

@@ -38,7 +38,7 @@ function getCSSStylesAtomic(style) {
 	for (const key in style) {
 		if (key === "$$css") continue;
 		const val = style[key];
-		const so = getStyleObject(style, key);
+		const so = getStyleObject(val, key);
 		if (so) {
 			out.push(so);
 		}
@@ -46,16 +46,15 @@ function getCSSStylesAtomic(style) {
 	return out;
 }
 function getCSSStyleAtomic(key, val, condition = "", wrappers, identity, direct = false, identityKey = key, classRepetitions = 1) {
-	return getStyleObject({ [key]: val }, key, condition, wrappers, identity, direct, identityKey, classRepetitions);
+	return getStyleObject(val, key, condition, wrappers, identity, direct, identityKey, classRepetitions);
 }
 let conf = null;
 let confRevision = 0;
 const directIdentities = /* @__PURE__ */ new Map();
 let directIdentitiesSize = 0;
-const getStyleObject = (style, key, condition = "", wrappers, identity, direct = false, identityKey = key, classRepetitions = 1) => {
-	let val = style[key];
+const getStyleObject = (val, key, condition = "", wrappers, identity, direct = false, identityKey = key, classRepetitions = 1) => {
 	if (val == null) return;
-	if (key === "transform" && Array.isArray(style.transform)) {
+	if (key === "transform" && Array.isArray(val)) {
 		val = (0, import_transformsToString.transformsToString)(val);
 	}
 	const value = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
@@ -77,7 +76,7 @@ const getStyleObject = (style, key, condition = "", wrappers, identity, direct =
 				value,
 				known.identifier,
 				void 0,
-				known.rules.slice()
+				direct === 2 ? known.rules : known.rules.slice()
 			];
 		}
 	}
@@ -114,7 +113,7 @@ const getStyleObject = (style, key, condition = "", wrappers, identity, direct =
 		}
 		byKey.set(identity, {
 			identifier,
-			rules: rules.slice()
+			rules: direct === 2 ? rules : rules.slice()
 		});
 		directIdentitiesSize++;
 	}

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -40,8 +40,10 @@ var import_helpers = require("@tamagui/helpers");
 var import_react = __toESM(require("react"), 1);
 var import_styleFrontend = require("./styleFrontend.cjs");
 var import_config = require("../config.cjs");
+var import_createVariable = require("../createVariable.cjs");
 var import_isDevTools = require("../constants/isDevTools.cjs");
 var import_mediaState = require("./mediaState.cjs");
+var import_runtime = require("@tamagui/style-grammar/runtime");
 var import_expandStyles = require("./expandStyles.cjs");
 var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs");
 var import_getDefaultProps = require("./getDefaultProps.cjs");
@@ -64,12 +66,85 @@ function compoundMatcherMatches(expected, actual) {
 	if (Array.isArray(expected)) return expected.some((value) => Object.is(value, actual));
 	return Object.is(expected, actual);
 }
-function compoundVariantMatches(compoundVariant, props) {
+function compoundMatcherMatchesPayload(expected, payload) {
+	if (Array.isArray(expected)) return expected.some((value) => compoundMatcherMatchesPayload(value, payload));
+	return typeof expected === "string" ? expected === payload : String(expected) === payload;
+}
+const compoundScanHandler = {
+	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
+		if (!valid || start >= end) return;
+		if (!compoundMatcherMatchesPayload(ctx[1], source.slice(start, end))) return;
+		if (isBase) {
+			ctx[4] = true;
+			return;
+		}
+		if (!chainValid) return;
+		const chain = source.slice(chainStart, chainEnd);
+		if (ctx[2](chain)) ctx[3].push(chain);
+	},
+	chain() {
+		return true;
+	},
+	error() {}
+};
+function matcherChains(expected, actual, isChain) {
+	if (typeof actual === "string" && actual.indexOf(":") !== -1) {
+		const scan = [
+			actual,
+			expected,
+			isChain,
+			[],
+			false
+		];
+		(0, import_runtime.scanFlatValue)(actual, compoundScanHandler, scan);
+		if (scan[4]) return [""];
+		return scan[3].length ? scan[3] : null;
+	}
+	if (actual && typeof actual === "object" && !Array.isArray(actual) && !(0, import_createVariable.isVariable)(actual)) {
+		let conditional = Object.prototype.hasOwnProperty.call(actual, "default");
+		if (!conditional) for (const key in actual) {
+			conditional = key.length > 0 && isChain(key);
+			break;
+		}
+		if (conditional) {
+			const chains = [];
+			for (const key in actual) {
+				const payload = actual[key];
+				if (payload == null || !compoundMatcherMatches(expected, payload)) continue;
+				if (key === "default") return [""];
+				if (isChain(key)) chains.push(key);
+			}
+			return chains.length ? chains : null;
+		}
+	}
+	return compoundMatcherMatches(expected, actual) ? [""] : null;
+}
+function isConditionalObjectValue(value, isChain) {
+	if (Object.prototype.hasOwnProperty.call(value, "default")) return true;
+	for (const key in value) return key.length > 0 && isChain(key);
+	return false;
+}
+const joinChains = (a, b) => {
+	if (!a) return b;
+	if (!b) return a;
+	const segments = a.split(":");
+	for (const segment of b.split(":")) if (!segments.includes(segment)) segments.push(segment);
+	return segments.join(":");
+};
+function compoundVariantMatchChains(compoundVariant, props, isChain) {
+	let chains = [""];
 	for (const key in compoundVariant) {
 		if (key === "style") continue;
-		if (!compoundMatcherMatches(compoundVariant[key], props[key])) return false;
+		const keyChains = matcherChains(compoundVariant[key], props[key], isChain);
+		if (!keyChains) return null;
+		const next = [];
+		for (const a of chains) for (const b of keyChains) {
+			const joined = joinChains(a, b);
+			if (!next.includes(joined)) next.push(joined);
+		}
+		chains = next;
 	}
-	return true;
+	return chains;
 }
 const styledDefaultsCache = /* @__PURE__ */ new WeakMap();
 function getStyledDefaults(staticConfig) {
@@ -82,6 +157,7 @@ function getStyledDefaults(staticConfig) {
 	}
 	return entries;
 }
+const maybeStyleProgram = (value) => typeof value === "string" ? value.includes(":") : !!value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value);
 function contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, contribute) {
 	if (!styledDefaults) return;
 	for (let index = 0; index < styledDefaults.length; index++) {
@@ -89,10 +165,10 @@ function contributeDisplacedStyledDefaults(styledDefaults, processedProps, short
 		const styledValue = styledDefaults[index][1];
 		const propValue = processedProps[key];
 		if (!(key in import_helpers.stylePropsAll) && !(key in shorthands)) continue;
-		if (propValue !== void 0 && propValue !== styledValue && (typeof styledValue === "string" && styledValue.includes(":") || typeof propValue === "string" && propValue.includes(":"))) contribute(key, styledValue);
+		if (propValue !== void 0 && propValue !== styledValue && (maybeStyleProgram(styledValue) || maybeStyleProgram(propValue))) contribute(key, styledValue);
 	}
 }
-function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute) {
+function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute, isChain) {
 	const processedBaseStyle = staticConfig.baseStyle;
 	const compoundVariants = staticConfig.compoundVariants;
 	const styledDefaults = getStyledDefaults(staticConfig);
@@ -107,7 +183,8 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 	contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, (k, v) => orderedEntries.push([k, v]));
 	const compoundsByAnchor = /* @__PURE__ */ new Map();
 	for (const compoundVariant of compoundVariants) {
-		if (!compoundVariantMatches(compoundVariant, processedProps)) continue;
+		const chains = compoundVariantMatchChains(compoundVariant, processedProps, isChain);
+		if (!chains) continue;
 		const { style } = compoundVariant;
 		if (!(0, import_isObj.isPlainObject)(style)) continue;
 		let anchor = -1;
@@ -119,7 +196,26 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 			}
 		}
 		const entries = compoundsByAnchor.get(anchor) || [];
-		for (const key in style) entries.push([key, style[key]]);
+		for (const key in style) {
+			const value = style[key];
+			for (const chain of chains) {
+				if (!chain) {
+					entries.push([key, value]);
+					continue;
+				}
+				if (value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value) && isConditionalObjectValue(value, isChain)) {
+					const composed = {};
+					for (const inner in value) composed[inner === "default" ? chain : `${chain}:${inner}`] = value[inner];
+					entries.push([key, composed]);
+					continue;
+				}
+				if (typeof value === "string" && value.includes(":")) {
+					if (process.env.NODE_ENV === "development") console.warn(`[tamagui] compound variant "${key}" carries a clause string and matched conditionally; dropping it. use the object form in the compound style`);
+					continue;
+				}
+				entries.push([key, { [chain]: value }]);
+			}
+		}
 		compoundsByAnchor.set(anchor, entries);
 	}
 	for (let index = 0; index < orderedEntries.length; index++) contribute(orderedEntries[index][0], orderedEntries[index][1]);
@@ -403,9 +499,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 			if (conditionSource !== void 0) {
 				if (isHostStyleKey || isContextProgramKey) (0, import_directStyle.contributeVariantClauseValue)(styleState, key, val, conditionSource, mergeStyle, originalVal, !isHostStyleKey);
 				else if (isHOC) {
-					const appended = (0, import_propMapper.appendFlatClause)(viewProps[key], conditionSource, val);
+					const appended = (0, import_propMapper.appendFlatClause)(styleState, viewProps[key], conditionSource, val);
 					if (appended !== void 0) viewProps[key] = appended;
-					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] conditional variant value for "${key}" is not string-representable; dropping the clause`);
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] conditional variant value for "${key}" cannot join the existing clause string; dropping the clause`);
 				} else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key}" is not a valid style on this component; the conditional variant value is dropped.`);
 				return;
 			}
@@ -446,7 +542,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 			console.groupEnd();
 		}
 	};
-	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp);
+	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp, (chain) => !!(0, import_directStyle.resolveClauseChain)(styleState, chain, 0, chain.length));
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
 	const conditionalStates = styleState.flatStateKeys || null;
 	const usesSafeArea = !!styleState.flatUsesSafeArea;

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

@@ -42,8 +42,10 @@ var import_helpers = require("@tamagui/helpers");
 var import_react = __toESM(require("react"), 1);
 var import_styleFrontend = require("./styleFrontend.native.js");
 var import_config = require("../config.native.js");
+var import_createVariable = require("../createVariable.native.js");
 var import_isDevTools = require("../constants/isDevTools.native.js");
 var import_mediaState = require("./mediaState.native.js");
+var import_runtime = require("@tamagui/style-grammar/runtime");
 var import_expandStyles = require("./expandStyles.native.js");
 var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.native.js");
 var import_getDefaultProps = require("./getDefaultProps.native.js");
@@ -71,12 +73,130 @@ function compoundMatcherMatches(expected, actual) {
 	});
 	return Object.is(expected, actual);
 }
-function compoundVariantMatches(compoundVariant, props) {
+function compoundMatcherMatchesPayload(expected, payload) {
+	if (Array.isArray(expected)) return expected.some(function(value) {
+		return compoundMatcherMatchesPayload(value, payload);
+	});
+	return typeof expected === "string" ? expected === payload : String(expected) === payload;
+}
+var compoundScanHandler = {
+	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
+		if (!valid || start >= end) return;
+		if (!compoundMatcherMatchesPayload(ctx[1], source.slice(start, end))) return;
+		if (isBase) {
+			ctx[4] = true;
+			return;
+		}
+		if (!chainValid) return;
+		var chain = source.slice(chainStart, chainEnd);
+		if (ctx[2](chain)) ctx[3].push(chain);
+	},
+	chain() {
+		return true;
+	},
+	error() {}
+};
+function matcherChains(expected, actual, isChain) {
+	if (typeof actual === "string" && actual.indexOf(":") !== -1) {
+		var scan = [
+			actual,
+			expected,
+			isChain,
+			[],
+			false
+		];
+		(0, import_runtime.scanFlatValue)(actual, compoundScanHandler, scan);
+		if (scan[4]) return [""];
+		return scan[3].length ? scan[3] : null;
+	}
+	if (actual && (typeof actual === "undefined" ? "undefined" : _type_of(actual)) === "object" && !Array.isArray(actual) && !(0, import_createVariable.isVariable)(actual)) {
+		var conditional = Object.prototype.hasOwnProperty.call(actual, "default");
+		if (!conditional) for (var key in actual) {
+			conditional = key.length > 0 && isChain(key);
+			break;
+		}
+		if (conditional) {
+			var chains = [];
+			for (var key1 in actual) {
+				var payload = actual[key1];
+				if (payload == null || !compoundMatcherMatches(expected, payload)) continue;
+				if (key1 === "default") return [""];
+				if (isChain(key1)) chains.push(key1);
+			}
+			return chains.length ? chains : null;
+		}
+	}
+	return compoundMatcherMatches(expected, actual) ? [""] : null;
+}
+function isConditionalObjectValue(value, isChain) {
+	if (Object.prototype.hasOwnProperty.call(value, "default")) return true;
+	for (var key in value) return key.length > 0 && isChain(key);
+	return false;
+}
+var joinChains = function(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	var segments = a.split(":");
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = b.split(":")[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var segment = _step.value;
+			if (!segments.includes(segment)) segments.push(segment);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	return segments.join(":");
+};
+function compoundVariantMatchChains(compoundVariant, props, isChain) {
+	var chains = [""];
 	for (var key in compoundVariant) {
 		if (key === "style") continue;
-		if (!compoundMatcherMatches(compoundVariant[key], props[key])) return false;
+		var keyChains = matcherChains(compoundVariant[key], props[key], isChain);
+		if (!keyChains) return null;
+		var next = [];
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = chains[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var a = _step.value;
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = keyChains[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var b = _step1.value;
+						var joined = joinChains(a, b);
+						if (!next.includes(joined)) next.push(joined);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} finally {
+				if (_didIteratorError) throw _iteratorError;
+			}
+		}
+		chains = next;
 	}
-	return true;
+	return chains;
 }
 var styledDefaultsCache = /* @__PURE__ */ new WeakMap();
 function getStyledDefaults(staticConfig) {
@@ -89,6 +209,9 @@ function getStyledDefaults(staticConfig) {
 	}
 	return entries;
 }
+var maybeStyleProgram = function(value) {
+	return typeof value === "string" ? value.includes(":") : !!value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value);
+};
 function contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, contribute) {
 	if (!styledDefaults) return;
 	for (var index = 0; index < styledDefaults.length; index++) {
@@ -96,10 +219,10 @@ function contributeDisplacedStyledDefaults(styledDefaults, processedProps, short
 		var styledValue = styledDefaults[index][1];
 		var propValue = processedProps[key];
 		if (!(key in import_helpers.stylePropsAll) && !(key in shorthands)) continue;
-		if (propValue !== void 0 && propValue !== styledValue && (typeof styledValue === "string" && styledValue.includes(":") || typeof propValue === "string" && propValue.includes(":"))) contribute(key, styledValue);
+		if (propValue !== void 0 && propValue !== styledValue && (maybeStyleProgram(styledValue) || maybeStyleProgram(propValue))) contribute(key, styledValue);
 	}
 }
-function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute) {
+function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute, isChain) {
 	var processedBaseStyle = staticConfig.baseStyle;
 	var compoundVariants = staticConfig.compoundVariants;
 	var styledDefaults = getStyledDefaults(staticConfig);
@@ -119,7 +242,8 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 	try {
 		for (var _iterator = compoundVariants[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 			var compoundVariant = _step.value;
-			if (!compoundVariantMatches(compoundVariant, processedProps)) continue;
+			var chains = compoundVariantMatchChains(compoundVariant, processedProps, isChain);
+			if (!chains) continue;
 			var { style } = compoundVariant;
 			if (!(0, import_isObj.isPlainObject)(style)) continue;
 			var anchor = -1;
@@ -131,7 +255,39 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 				}
 			}
 			var entries = compoundsByAnchor.get(anchor) || [];
-			for (var key2 in style) entries.push([key2, style[key2]]);
+			for (var key2 in style) {
+				var value = style[key2];
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = chains[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var chain = _step1.value;
+						if (!chain) {
+							entries.push([key2, value]);
+							continue;
+						}
+						if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value) && isConditionalObjectValue(value, isChain)) {
+							var composed = {};
+							for (var inner in value) composed[inner === "default" ? chain : `${chain}:${inner}`] = value[inner];
+							entries.push([key2, composed]);
+							continue;
+						}
+						if (typeof value === "string" && value.includes(":")) {
+							if (process.env.NODE_ENV === "development") console.warn(`[tamagui] compound variant "${key2}" carries a clause string and matched conditionally; dropping it. use the object form in the compound style`);
+							continue;
+						}
+						entries.push([key2, { [chain]: value }]);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+			}
 			compoundsByAnchor.set(anchor, entries);
 		}
 	} catch (err) {
@@ -418,9 +574,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			if (conditionSource !== void 0) {
 				if (isHostStyleKey || isContextProgramKey) (0, import_directStyle.contributeVariantClauseValue)(styleState, key8, val2, conditionSource, mergeStyle, originalVal, !isHostStyleKey);
 				else if (isHOC) {
-					var appended = (0, import_propMapper.appendFlatClause)(viewProps[key8], conditionSource, val2);
+					var appended = (0, import_propMapper.appendFlatClause)(styleState, viewProps[key8], conditionSource, val2);
 					if (appended !== void 0) viewProps[key8] = appended;
-					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] conditional variant value for "${key8}" is not string-representable; dropping the clause`);
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] conditional variant value for "${key8}" cannot join the existing clause string; dropping the clause`);
 				} else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key8}" is not a valid style on this component; the conditional variant value is dropped.`);
 				return;
 			}
@@ -464,7 +620,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			console.groupEnd();
 		}
 	};
-	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp);
+	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp, function(chain) {
+		return !!(0, import_directStyle.resolveClauseChain)(styleState, chain, 0, chain.length);
+	});
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
 	var conditionalStates = styleState.flatStateKeys || null;
 	var usesSafeArea = !!styleState.flatUsesSafeArea;