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

package/dist/cjs/helpers/variables.cjs

@@ -1,4 +1,3 @@
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -26,9 +25,6 @@ __export(variables_exports, {
 	getMergedInlineTheme: () => getMergedInlineTheme,
 	getThemeKeySet: () => getThemeKeySet,
 	getVariablesCSSRules: () => getVariablesCSSRules,
-	inlineLayerKey: () => inlineLayerKey,
-	isUnitlessVariableKey: () => isUnitlessVariableKey,
-	mergeConfigVariablesIntoTheme: () => mergeConfigVariablesIntoTheme,
 	resolveVariableValueToCSS: () => resolveVariableValueToCSS
 });
 module.exports = __toCommonJS(variables_exports);
@@ -36,33 +32,15 @@ var import_helpers = require("@tamagui/helpers");
 var import_runtime = require("@tamagui/style-grammar/runtime");
 var import_config = require("../config.cjs");
 var import_createVariable = require("../createVariable.cjs");
+var import_grammarConfig = require("./grammarConfig.cjs");
+var import_themeUpdateState = require("./themeUpdateState.cjs");
 var import_directStyle = require("./directStyle.cjs");
+var import_variableValue = require("./variableValue.cjs");
 var import_warnOnce = require("./warnOnce.cjs");
-const unitlessSuffixes = [
-	"opacity",
-	"scale",
-	"zindex",
-	"weight",
-	"flex",
-	"grow",
-	"shrink",
-	"ratio",
-	"elevation"
-];
-const isUnitlessVariableKey = (key) => {
-	const lower = key.toLowerCase();
-	return unitlessSuffixes.some((suffix) => lower.endsWith(suffix));
-};
-const tokenCategoryOrder = [
-	"color",
-	"space",
-	"size",
-	"radius",
-	"zIndex"
-];
 const themeKeySets = /* @__PURE__ */ new WeakMap();
 const getThemeKeySet = (conf) => {
-	const existing = themeKeySets.get(conf.themes);
+	const generation = (0, import_grammarConfig.getConfigRevisionState)(conf);
+	const existing = themeKeySets.get(generation);
 	if (existing) return existing;
 	const set = /* @__PURE__ */ new Set();
 	for (const themeName in conf.themes) {
@@ -73,35 +51,18 @@ const getThemeKeySet = (conf) => {
 	if (process.env.NODE_ENV === "development") {
 		for (const key of set) {
 			if (import_helpers.reservedThemeProps[key]) {
-				console.error(`[tamagui] theme key "${key}" collides with a <Theme> prop, so it can never be set inline (<Theme ${key}="...">). Rename it.`);
+				console.error(`[tamagui] theme key "${key}" collides with a reserved theme prop, so it cannot be set with <ThemeUpdate ${key}="...">. Rename it.`);
 			}
 		}
 	}
-	themeKeySets.set(conf.themes, set);
+	themeKeySets.set(generation, set);
 	return set;
 };
-const findToken = (tokensParsed, name) => {
-	let found;
-	let foundCategory;
-	for (const category of tokenCategoryOrder) {
-		const token = tokensParsed[category]?.[name];
-		if (!token) continue;
-		if (!found) {
-			found = token;
-			foundCategory = category;
-			if (process.env.NODE_ENV !== "development") break;
-		} else {
-			(0, import_warnOnce.warnOnce)(`ambiguous:${name}`, `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`);
-			break;
-		}
-	}
-	return found;
-};
 const cssVariablePrefix = process.env.TAMAGUI_CSS_VARIABLE_PREFIX || "";
 const themeKeyVar = (key) => `var(--${cssVariablePrefix}${(0, import_helpers.simpleHash)(key, 40)})`;
 function resolveVariableValueToCSS(key, value, conf) {
 	if (typeof value === "number") {
-		return isUnitlessVariableKey(key) ? `${value}` : `${value}px`;
+		return (0, import_variableValue.isUnitlessVariableKey)(key) ? `${value}` : `${value}px`;
 	}
 	if (typeof value === "object" && value && "needsPx" in value) {
 		return `${value.val}px`;
@@ -113,7 +74,7 @@ function resolveVariableValueToCSS(key, value, conf) {
 	if (getThemeKeySet(conf).has(name)) {
 		return themeKeyVar(name);
 	}
-	const token = findToken(conf.tokensParsed, name);
+	const token = (0, import_variableValue.findVariableToken)(conf.tokensParsed, name);
 	if (token) {
 		return token.variable;
 	}
@@ -153,7 +114,8 @@ const getThemedBucketNames = (themes) => {
 };
 const themeBucketNameSets = /* @__PURE__ */ new WeakMap();
 const getThemeBucketNames = (conf) => {
-	let set = themeBucketNameSets.get(conf.themes);
+	const generation = (0, import_grammarConfig.getConfigRevisionState)(conf);
+	let set = themeBucketNameSets.get(generation);
 	if (!set) {
 		set = /* @__PURE__ */ new Set();
 		for (const themeName in conf.themes) {
@@ -162,7 +124,7 @@ const getThemeBucketNames = (conf) => {
 				set.add(parts.slice(0, i).join("_"));
 			}
 		}
-		themeBucketNameSets.set(conf.themes, set);
+		themeBucketNameSets.set(generation, set);
 	}
 	return set;
 };
@@ -293,7 +255,6 @@ function getVariablesCSSRules(props, conf) {
 	rulesCache.set(payload, result);
 	return result;
 }
-const inlineLayerKey = "_tmgInlineLayer";
 const serializeInlineValue = (value) => value && typeof value === "object" ? `object:px${value.val}` : `${typeof value}:${String(value)}`;
 const serializeBucket = (bucket) => {
 	if (!bucket) return "";
@@ -317,18 +278,44 @@ const getInlineValuesKey = (inline) => {
 	inlineKeys.set(inline, key);
 	return key;
 };
-const registryViews = /* @__PURE__ */ new WeakMap();
-const getModifierRegistry = (conf) => {
-	let view = registryViews.get(conf.themes);
-	if (!view) {
-		view = { get(name) {
-			if (import_runtime.grammarPlatformNames.has(name)) return "platform";
-			if ((0, import_runtime.isRootThemeName)(name) && getThemeBucketNames(conf).has(name)) return "theme";
-			return "state";
-		} };
-		registryViews.set(conf.themes, view);
-	}
-	return view;
+const 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) {
+		const name = ctx.source.slice(start, end);
+		const kind = import_runtime.grammarPlatformNames.has(name) ? import_runtime.modifierKindPlatform : (0, import_runtime.isRootThemeName)(name) && ctx.themeBuckets.has(name) ? import_runtime.modifierKindTheme : 0;
+		ctx.pending.push([name, kind]);
+	},
+	clause(ctx, _start, _chainEnd, start, end) {
+		;
+		(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";
+		}
+	}
 };
 const parsedInlineValues = /* @__PURE__ */ new WeakMap();
 const addFlatValue = (out, key, raw, conf, onIssue) => {
@@ -345,54 +332,68 @@ const addFlatValue = (out, key, raw, conf, onIssue) => {
 		out.values[key] = raw;
 		return;
 	}
-	let configValues = parsedInlineValues.get(conf.themes);
+	const generation = (0, import_grammarConfig.getConfigRevisionState)(conf);
+	let configValues = parsedInlineValues.get(generation);
 	if (!configValues) {
 		configValues = /* @__PURE__ */ new Map();
-		parsedInlineValues.set(conf.themes, configValues);
+		parsedInlineValues.set(generation, configValues);
 	}
 	let parsed = configValues.get(raw);
 	if (!parsed) {
-		parsed = (0, import_runtime.parseValue)(raw, getModifierRegistry(conf));
+		parsed = {
+			base: null,
+			clauses: null,
+			error: null
+		};
+		(0, import_runtime.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;
 	}
-	const { base, clauses } = parsed.value;
+	const { base, clauses } = parsed;
 	if (base !== null) {
 		out.values[key] = base;
 	}
-	for (const clause of clauses) {
+	if (!clauses) return;
+	for (const [payload, modifiers] of clauses) {
 		let themeName;
 		let applies = true;
-		for (const modifier of clause.modifiers) {
-			if (import_runtime.grammarPlatformNames.has(modifier)) {
+		for (const [modifier, kind] of modifiers) {
+			if (kind === import_runtime.modifierKindPlatform) {
 				applies &&= (0, import_directStyle.platformMatches)(modifier);
 				continue;
 			}
-			if ((0, import_runtime.isRootThemeName)(modifier) && getThemeBucketNames(conf).has(modifier)) {
+			if (kind === import_runtime.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;
 		}
 		if (!applies) continue;
 		if (themeName === void 0) {
-			out.values[key] = clause.payload;
+			out.values[key] = payload;
 		} else {
 			;
-			((out.themes ||= {})[themeName] ||= {})[key] = clause.payload;
+			((out.themes ||= {})[themeName] ||= {})[key] = payload;
 		}
 	}
 };
@@ -409,10 +410,11 @@ function getInlineValuesFromProps(props, conf, onIssue) {
 		cacheKey += `${key.length}:${key}${serialized.length}:${serialized}`;
 	}
 	if (!hasKey) return null;
-	let configLayers = flatLayers.get(conf.themes);
+	const generation = (0, import_grammarConfig.getConfigRevisionState)(conf);
+	let configLayers = flatLayers.get(generation);
 	if (!configLayers) {
 		configLayers = /* @__PURE__ */ new Map();
-		flatLayers.set(conf.themes, configLayers);
+		flatLayers.set(generation, configLayers);
 	}
 	const cached = onIssue ? void 0 : configLayers.get(cacheKey);
 	if (cached) return cached;
@@ -440,6 +442,7 @@ function getInlineValuesFromProps(props, conf, onIssue) {
 }
 const mergedThemeCache = /* @__PURE__ */ new WeakMap();
 function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
+	const generation = (0, import_grammarConfig.getConfigRevisionState)(conf);
 	const name = themeName || "light";
 	const activeScheme = name === "dark" || name.startsWith("dark_") ? "dark" : "light";
 	const bucketNames = getThemedBucketNames(inline.themes);
@@ -457,11 +460,12 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 		}
 	}
 	const cacheKey = `${getInlineValuesKey(inline)}|${activeScheme}|${matched ? matched.join(",") : ""}`;
-	const existingInfo = parentTheme[inlineLayerKey];
-	if (existingInfo?.key === cacheKey) {
+	const existingInfo = parentTheme[import_themeUpdateState.themeUpdateStateKey];
+	if (existingInfo?.generation === generation && existingInfo.key === cacheKey) {
 		return parentTheme;
 	}
-	let byKey = mergedThemeCache.get(parentTheme);
+	let generationCache = mergedThemeCache.get(generation);
+	let byKey = generationCache?.get(parentTheme);
 	const cached = byKey?.get(cacheKey);
 	if (cached) return cached;
 	const values = inline.values || {};
@@ -498,7 +502,7 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 			if (themeValue !== void 0) {
 				return (0, import_createVariable.isVariable)(themeValue) ? themeValue.val : themeValue;
 			}
-			const token = findToken(conf.tokensParsed, name2);
+			const token = (0, import_variableValue.findVariableToken)(conf.tokensParsed, name2);
 			if (token) return token.val;
 			return value;
 		}
@@ -509,6 +513,7 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 	};
 	const info = {
 		key: cacheKey,
+		generation,
 		overridden: new Set(existingInfo?.overridden),
 		pairs: { ...existingInfo?.pairs }
 	};
@@ -533,7 +538,7 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 		delete info.pairs[key];
 		const activeLiteral = effective[key];
 		const oppositeLiteral = opposite[key];
-		const isLiteral = (v) => typeof v === "string" && !(v in effective) && !(v in parentTheme) && !findToken(conf.tokensParsed, v) || typeof v === "number";
+		const isLiteral = (v) => typeof v === "string" && !(v in effective) && !(v in parentTheme) && !(0, import_variableValue.findVariableToken)(conf.tokensParsed, v) || typeof v === "number";
 		if (isLiteral(activeLiteral) && isLiteral(oppositeLiteral)) {
 			info.pairs[key] = {
 				light: activeScheme === "light" ? activeLiteral : oppositeLiteral,
@@ -544,68 +549,19 @@ function getMergedInlineTheme(parentTheme, inline, themeName, conf) {
 	if (!didOverride) {
 		return parentTheme;
 	}
-	Object.defineProperty(merged, inlineLayerKey, {
+	Object.defineProperty(merged, import_themeUpdateState.themeUpdateStateKey, {
 		value: info,
 		enumerable: false
 	});
 	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) {
-	const scheme = themeName.startsWith("dark") ? "dark" : "light";
-	const resolving = /* @__PURE__ */ new Set();
-	const resolveRawValue = (key, value) => {
-		if (typeof value === "object" && value !== null) {
-			if ((0, import_createVariable.isVariable)(value)) return value.val;
-			if ("needsPx" in value) return value;
-			if ("light" in value || "dark" in value) {
-				return resolveRawValue(key, value[scheme] ?? value.light);
-			}
-			return;
-		}
-		if (typeof value === "string") {
-			const name = value;
-			if (name in variables && !(name in theme)) {
-				if (resolving.has(name)) {
-					(0, import_warnOnce.warnOnce)(`config-cycle:${name}`, `createTamagui variables: reference cycle at "${name}" \u2014 dropping.`);
-					return;
-				}
-				resolving.add(name);
-				const res = resolveRawValue(name, variables[name]);
-				resolving.delete(name);
-				return res;
-			}
-			const themeValue = theme[name];
-			if (themeValue !== void 0) {
-				return (0, import_createVariable.isVariable)(themeValue) ? themeValue.val : themeValue;
-			}
-			const token = findToken(tokensParsed, name);
-			return token ? token.val : value;
-		}
-		return value;
-	};
-	for (const key in variables) {
-		if (key in theme) continue;
-		let raw = resolveRawValue(key, variables[key]);
-		if (raw === void 0) continue;
-		let needsPx = typeof raw === "number" && !isUnitlessVariableKey(key);
-		if (typeof raw === "object" && raw !== null && "needsPx" in raw) {
-			needsPx = true;
-			raw = raw.val;
-		}
-		const variable = (0, import_createVariable.createVariable)({
-			key,
-			name: key,
-			val: raw
-		});
-		if (needsPx) {
-			variable.needsPx = true;
-		}
-		theme[key] = variable;
-	}
-}