@tamagui/web 3.0.0-beta.669.1 → 3.0.0-beta.728.1

package/dist/esm/helpers/variables.native.js

@@ -1,41 +1,21 @@
 import { reservedThemeProps, simpleHash } from "@tamagui/helpers";
-import { grammarPlatformNames, isRootThemeName, parseValue } from "@tamagui/style-grammar/runtime";
+import { grammarPlatformNames, isRootThemeName, modifierKindPlatform, modifierKindTheme, reduceFlatValueIdentity } from "@tamagui/style-grammar/runtime";
 import { getSetting } from "../config.native.js";
 import { createVariable, isVariable } from "../createVariable.native.js";
+import { getConfigRevisionState } from "./grammarConfig.native.js";
+import { themeUpdateStateKey } from "./themeUpdateState.native.js";
 import { platformMatches } from "./directStyle.native.js";
+import { findVariableToken, isUnitlessVariableKey } from "./variableValue.native.js";
 import { warnOnce } from "./warnOnce.native.js";
 
 function _type_of(obj) {
 	"@swc/helpers - typeof";
 	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var unitlessSuffixes = [
-	"opacity",
-	"scale",
-	"zindex",
-	"weight",
-	"flex",
-	"grow",
-	"shrink",
-	"ratio",
-	"elevation"
-];
-var isUnitlessVariableKey = function(key) {
-	var lower = key.toLowerCase();
-	return unitlessSuffixes.some(function(suffix) {
-		return lower.endsWith(suffix);
-	});
-};
-var tokenCategoryOrder = [
-	"color",
-	"space",
-	"size",
-	"radius",
-	"zIndex"
-];
 var themeKeySets = /* @__PURE__ */ new WeakMap();
 var getThemeKeySet = function(conf) {
-	var existing = themeKeySets.get(conf.themes);
+	var generation = getConfigRevisionState(conf);
+	var existing = themeKeySets.get(generation);
 	if (existing) return existing;
 	var set = /* @__PURE__ */ new Set();
 	for (var themeName in conf.themes) {
@@ -49,7 +29,7 @@ var getThemeKeySet = function(conf) {
 			for (var _iterator = set[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 				var key1 = _step.value;
 				if (reservedThemeProps[key1]) {
-					console.error(`[tamagui] theme key "${key1}" collides with a <Theme> prop, so it can never be set inline (<Theme ${key1}="...">). Rename it.`);
+					console.error(`[tamagui] theme key "${key1}" collides with a reserved theme prop, so it cannot be set with <ThemeUpdate ${key1}="...">. Rename it.`);
 				}
 			}
 		} catch (err) {
@@ -67,44 +47,9 @@ var getThemeKeySet = function(conf) {
 			}
 		}
 	}
-	themeKeySets.set(conf.themes, set);
+	themeKeySets.set(generation, set);
 	return set;
 };
-var findToken = function(tokensParsed, name) {
-	var found;
-	var foundCategory;
-	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-	try {
-		for (var _iterator = tokenCategoryOrder[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-			var category = _step.value;
-			var _tokensParsed_category;
-			var token = (_tokensParsed_category = tokensParsed[category]) === null || _tokensParsed_category === void 0 ? void 0 : _tokensParsed_category[name];
-			if (!token) continue;
-			if (!found) {
-				found = token;
-				foundCategory = category;
-				if (process.env.NODE_ENV !== "development") break;
-			} else {
-				warnOnce(`ambiguous:${name}`, `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`);
-				break;
-			}
-		}
-	} catch (err) {
-		_didIteratorError = true;
-		_iteratorError = err;
-	} finally {
-		try {
-			if (!_iteratorNormalCompletion && _iterator.return != null) {
-				_iterator.return();
-			}
-		} finally {
-			if (_didIteratorError) {
-				throw _iteratorError;
-			}
-		}
-	}
-	return found;
-};
 var cssVariablePrefix = process.env.TAMAGUI_CSS_VARIABLE_PREFIX || "";
 var themeKeyVar = function(key) {
 	return `var(--${cssVariablePrefix}${simpleHash(key, 40)})`;
@@ -123,7 +68,7 @@ function resolveVariableValueToCSS(key, value, conf) {
 	if (getThemeKeySet(conf).has(name)) {
 		return themeKeyVar(name);
 	}
-	var token = findToken(conf.tokensParsed, name);
+	var token = findVariableToken(conf.tokensParsed, name);
 	if (token) {
 		return token.variable;
 	}
@@ -185,7 +130,8 @@ var getThemedBucketNames = function(themes) {
 };
 var themeBucketNameSets = /* @__PURE__ */ new WeakMap();
 var getThemeBucketNames = function(conf) {
-	var set = themeBucketNameSets.get(conf.themes);
+	var generation = getConfigRevisionState(conf);
+	var set = themeBucketNameSets.get(generation);
 	if (!set) {
 		set = /* @__PURE__ */ new Set();
 		for (var themeName in conf.themes) {
@@ -194,7 +140,7 @@ var getThemeBucketNames = function(conf) {
 				set.add(parts.slice(0, i).join("_"));
 			}
 		}
-		themeBucketNameSets.set(conf.themes, set);
+		themeBucketNameSets.set(generation, set);
 	}
 	return set;
 };
@@ -412,7 +358,6 @@ function getVariablesCSSRules(props, conf) {
 	rulesCache.set(payload, result);
 	return result;
 }
-var inlineLayerKey = "_tmgInlineLayer";
 var serializeInlineValue = function(value) {
 	return value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" ? `object:px${value.val}` : `${typeof value === "undefined" ? "undefined" : _type_of(value)}:${String(value)}`;
 };
@@ -455,18 +400,45 @@ var getInlineValuesKey = function(inline) {
 	inlineKeys.set(inline, key);
 	return key;
 };
-var registryViews = /* @__PURE__ */ new WeakMap();
-var getModifierRegistry = function(conf) {
-	var view = registryViews.get(conf.themes);
-	if (!view) {
-		view = { get(name) {
-			if (grammarPlatformNames.has(name)) return "platform";
-			if (isRootThemeName(name) && getThemeBucketNames(conf).has(name)) return "theme";
-			return "state";
-		} };
-		registryViews.set(conf.themes, view);
-	}
-	return view;
+var themeUpdateFlatHandler = {
+	segment(ctx, start, end, isBase) {
+		if (isBase) {
+			ctx.out.base = start < end ? ctx.source.slice(start, end) : null;
+		}
+	},
+	chain(ctx, start, end) {
+		ctx.pending = [];
+		ctx.chainStart = start;
+		ctx.chainEnd = end;
+	},
+	modifier(ctx, start, end) {
+		var name = ctx.source.slice(start, end);
+		var kind = grammarPlatformNames.has(name) ? modifierKindPlatform : isRootThemeName(name) && ctx.themeBuckets.has(name) ? modifierKindTheme : 0;
+		ctx.pending.push([name, kind]);
+	},
+	clause(ctx, _start, _chainEnd, start, end) {
+		var _ctx_out;
+		;
+		((_ctx_out = ctx.out).clauses || (_ctx_out.clauses = [])).push([ctx.source.slice(start, end), ctx.pending]);
+	},
+	error(ctx, code, index) {
+		if (ctx.out.error !== null) return;
+		if (code === "empty-modifier") {
+			ctx.out.error = "a modifier chain has an empty segment";
+		} else if (code === "empty-payload") {
+			ctx.out.error = `the "${ctx.source.slice(ctx.chainStart, ctx.chainEnd)}:" clause has no value`;
+		} else if (code === "invalid-character") {
+			ctx.out.error = `"${ctx.source[index]}" cannot appear in a value: it would end the declaration or rule`;
+		} else if (code === "unterminated-string") {
+			ctx.out.error = `unterminated ${ctx.source[index]} string`;
+		} else if (code === "unterminated-comment") {
+			ctx.out.error = "unterminated \"/*\" comment: it would swallow the rules after this one";
+		} else if (code === "stray-comment-close") {
+			ctx.out.error = "stray \"*/\": it would close a comment opened somewhere else";
+		} else {
+			ctx.out.error = "unterminated \"(\" in value";
+		}
+	}
 };
 var parsedInlineValues = /* @__PURE__ */ new WeakMap();
 var addFlatValue = function(out, key, raw, conf, onIssue) {
@@ -483,51 +455,65 @@ var addFlatValue = function(out, key, raw, conf, onIssue) {
 		out.values[key] = raw;
 		return;
 	}
-	var configValues = parsedInlineValues.get(conf.themes);
+	var generation = getConfigRevisionState(conf);
+	var configValues = parsedInlineValues.get(generation);
 	if (!configValues) {
 		configValues = /* @__PURE__ */ new Map();
-		parsedInlineValues.set(conf.themes, configValues);
+		parsedInlineValues.set(generation, configValues);
 	}
 	var parsed = configValues.get(raw);
 	if (!parsed) {
-		parsed = parseValue(raw, getModifierRegistry(conf));
+		parsed = {
+			base: null,
+			clauses: null,
+			error: null
+		};
+		reduceFlatValueIdentity(raw, themeUpdateFlatHandler, {
+			source: raw,
+			themeBuckets: getThemeBucketNames(conf),
+			out: parsed,
+			pending: null,
+			chainStart: 0,
+			chainEnd: 0
+		});
 		if (configValues.size >= 1e4) {
 			configValues.clear();
 		}
 		configValues.set(raw, parsed);
 	}
-	if (!parsed.ok) {
-		report(`parse:${key}:${raw}`, `<Theme ${key}="${raw}">: ${parsed.errors[0].message}`, "Dropping.");
+	if (parsed.error !== null) {
+		report(`parse:${key}:${raw}`, `<ThemeUpdate ${key}="${raw}">: ${parsed.error}`, "Dropping.");
 		return;
 	}
-	var { base, clauses } = parsed.value;
+	var { base, clauses } = parsed;
 	if (base !== null) {
 		out.values[key] = base;
 	}
+	if (!clauses) return;
 	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 	try {
 		for (var _iterator = clauses[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-			var clause = _step.value;
+			var [payload, modifiers] = _step.value;
 			var themeName = void 0;
 			var applies = true;
 			var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
 			try {
-				for (var _iterator1 = clause.modifiers[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-					var modifier = _step1.value;
-					if (grammarPlatformNames.has(modifier)) {
+				for (var _iterator1 = modifiers[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+					var [modifier, kind] = _step1.value;
+					if (kind === modifierKindPlatform) {
 						applies && (applies = platformMatches(modifier));
 						continue;
 					}
-					if (isRootThemeName(modifier) && getThemeBucketNames(conf).has(modifier)) {
+					if (kind === modifierKindTheme) {
 						if (themeName !== void 0) {
-							report(`two-themes:${key}:${raw}`, `<Theme ${key}="${raw}">: "${themeName}:${modifier}:" targets two themes at once, which a subtree value can't express. Name the composed theme instead.`, "Dropping the clause.");
+							report(`two-themes:${key}:${raw}`, `<ThemeUpdate ${key}="${raw}">: "${themeName}:${modifier}:" targets two themes at once, which a subtree value can't express. Name the composed theme instead.`, "Dropping the clause.");
 							applies = false;
 							break;
 						}
 						themeName = modifier;
 						continue;
 					}
-					report(`unsupported-modifier:${modifier}`, `<Theme ${key}="${raw}">: "${modifier}:" isn't supported here. Theme values apply to a whole subtree, so only theme (dark:) and platform (ios:) modifiers work.`, "Dropping the clause.");
+					report(`unsupported-modifier:${modifier}`, `<ThemeUpdate ${key}="${raw}">: "${modifier}:" isn't supported here. Theme values apply to a whole subtree, so only theme (dark:) and platform (ios:) modifiers work.`, "Dropping the clause.");
 					applies = false;
 					break;
 				}
@@ -547,11 +533,11 @@ var addFlatValue = function(out, key, raw, conf, onIssue) {
 			}
 			if (!applies) continue;
 			if (themeName === void 0) {
-				out.values[key] = clause.payload;
+				out.values[key] = payload;
 			} else {
 				var _out, _ref, _themeName;
 				;
-				((_ref = (_out = out).themes || (_out.themes = {}))[_themeName = themeName] || (_ref[_themeName] = {}))[key] = clause.payload;
+				((_ref = (_out = out).themes || (_out.themes = {}))[_themeName = themeName] || (_ref[_themeName] = {}))[key] = payload;
 			}
 		}
 	} catch (err) {
@@ -582,10 +568,11 @@ function getInlineValuesFromProps(props, conf, onIssue) {
 		cacheKey += `${key.length}:${key}${serialized.length}:${serialized}`;
 	}
 	if (!hasKey) return null;
-	var configLayers = flatLayers.get(conf.themes);
+	var generation = getConfigRevisionState(conf);
+	var configLayers = flatLayers.get(generation);
 	if (!configLayers) {
 		configLayers = /* @__PURE__ */ new Map();
-		flatLayers.set(conf.themes, configLayers);
+		flatLayers.set(generation, configLayers);
 	}
 	var cached = onIssue ? void 0 : configLayers.get(cacheKey);
 	if (cached) return cached;
@@ -613,6 +600,7 @@ function getInlineValuesFromProps(props, conf, onIssue) {
 }
 var mergedThemeCache = /* @__PURE__ */ new WeakMap();
 function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
+	var generation = getConfigRevisionState(conf);
 	var name = themeName || "light";
 	var activeScheme = name === "dark" || name.startsWith("dark_") ? "dark" : "light";
 	var bucketNames = getThemedBucketNames(inline.themes);
@@ -647,11 +635,12 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 		}
 	}
 	var cacheKey = `${getInlineValuesKey(inline)}|${activeScheme}|${matched ? matched.join(",") : ""}`;
-	var existingInfo = parentTheme[inlineLayerKey];
-	if ((existingInfo === null || existingInfo === void 0 ? void 0 : existingInfo.key) === cacheKey) {
+	var existingInfo = parentTheme[themeUpdateStateKey];
+	if ((existingInfo === null || existingInfo === void 0 ? void 0 : existingInfo.generation) === generation && existingInfo.key === cacheKey) {
 		return parentTheme;
 	}
-	var byKey = mergedThemeCache.get(parentTheme);
+	var generationCache = mergedThemeCache.get(generation);
+	var byKey = generationCache === null || generationCache === void 0 ? void 0 : generationCache.get(parentTheme);
 	var cached = byKey === null || byKey === void 0 ? void 0 : byKey.get(cacheKey);
 	if (cached) return cached;
 	var values = inline.values || {};
@@ -705,7 +694,7 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 			if (themeValue !== void 0) {
 				return isVariable(themeValue) ? themeValue.val : themeValue;
 			}
-			var token = findToken(conf.tokensParsed, name2);
+			var token = findVariableToken(conf.tokensParsed, name2);
 			if (token) return token.val;
 			return value;
 		}
@@ -716,6 +705,7 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 	};
 	var info = {
 		key: cacheKey,
+		generation,
 		overridden: new Set(existingInfo === null || existingInfo === void 0 ? void 0 : existingInfo.overridden),
 		pairs: { ...existingInfo === null || existingInfo === void 0 ? void 0 : existingInfo.pairs }
 	};
@@ -744,7 +734,7 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 			var activeLiteral = effective[key];
 			var oppositeLiteral = opposite[key];
 			var isLiteral = function(v) {
-				return typeof v === "string" && !(v in effective) && !(v in parentTheme) && !findToken(conf.tokensParsed, v) || typeof v === "number";
+				return typeof v === "string" && !(v in effective) && !(v in parentTheme) && !findVariableToken(conf.tokensParsed, v) || typeof v === "number";
 			};
 			if (isLiteral(activeLiteral) && isLiteral(oppositeLiteral)) {
 				info.pairs[key] = {
@@ -770,72 +760,22 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 	if (!didOverride) {
 		return parentTheme;
 	}
-	Object.defineProperty(merged, inlineLayerKey, {
+	Object.defineProperty(merged, themeUpdateStateKey, {
 		value: info,
 		enumerable: false
 	});
 	byKey || (byKey = /* @__PURE__ */ new Map());
-	mergedThemeCache.set(parentTheme, byKey);
+	if (!generationCache) {
+		generationCache = /* @__PURE__ */ new WeakMap();
+		mergedThemeCache.set(generation, generationCache);
+	}
+	generationCache.set(parentTheme, byKey);
 	if (byKey.size >= 1e4) {
 		byKey.clear();
 	}
 	byKey.set(cacheKey, merged);
 	return merged;
 }
-function mergeConfigVariablesIntoTheme(theme, themeName, variables, tokensParsed) {
-	var scheme = themeName.startsWith("dark") ? "dark" : "light";
-	var resolving = /* @__PURE__ */ new Set();
-	var resolveRawValue = function(key2, value) {
-		if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && value !== null) {
-			if (isVariable(value)) return value.val;
-			if ("needsPx" in value) return value;
-			if ("light" in value || "dark" in value) {
-				var _value_scheme;
-				return resolveRawValue(key2, (_value_scheme = value[scheme]) !== null && _value_scheme !== void 0 ? _value_scheme : value.light);
-			}
-			return;
-		}
-		if (typeof value === "string") {
-			var name = value;
-			if (name in variables && !(name in theme)) {
-				if (resolving.has(name)) {
-					warnOnce(`config-cycle:${name}`, `createTamagui variables: reference cycle at "${name}" \u2014 dropping.`);
-					return;
-				}
-				resolving.add(name);
-				var res = resolveRawValue(name, variables[name]);
-				resolving.delete(name);
-				return res;
-			}
-			var themeValue = theme[name];
-			if (themeValue !== void 0) {
-				return isVariable(themeValue) ? themeValue.val : themeValue;
-			}
-			var token = findToken(tokensParsed, name);
-			return token ? token.val : value;
-		}
-		return value;
-	};
-	for (var key in variables) {
-		if (key in theme) continue;
-		var raw = resolveRawValue(key, variables[key]);
-		if (raw === void 0) continue;
-		var needsPx = typeof raw === "number" && !isUnitlessVariableKey(key);
-		if ((typeof raw === "undefined" ? "undefined" : _type_of(raw)) === "object" && raw !== null && "needsPx" in raw) {
-			needsPx = true;
-			raw = raw.val;
-		}
-		var variable = createVariable({
-			key,
-			name: key,
-			val: raw
-		});
-		if (needsPx) {
-			variable.needsPx = true;
-		}
-		theme[key] = variable;
-	}
-}
 
-export { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme, getThemeKeySet, getVariablesCSSRules, inlineLayerKey, isUnitlessVariableKey, mergeConfigVariablesIntoTheme, resolveVariableValueToCSS };
+export { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme, getThemeKeySet, getVariablesCSSRules, resolveVariableValueToCSS };
 //# sourceMappingURL=variables.native.js.map