@tamagui/web 3.0.0-beta.1093.1 → 3.0.0-beta.1097.1

package/dist/esm/helpers/getSplitStyles.mjs

@@ -1,8 +1,8 @@
 import { getTransitionResolver } from "@tamagui/animation-helpers/transitionResolver";
 import { isClient } from "@tamagui/constants";
 import { nonAnimatableStyleProps, stylePropsAll, stylePropsInput, stylePropsText, stylePropsTransform, validStyles } from "@tamagui/helpers";
-import { addTransformValue, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, removeTransformValue } from "@tamagui/style-grammar/runtime";
-import { getConfig, getConfigMaybe } from "../config.mjs";
+import { addTransformValue, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, grammarMaxNonPlatformDepth, namedCssColors, removeTransformValue } from "@tamagui/style-grammar/runtime";
+import { getConfig, getConfigMaybe, getSetting } from "../config.mjs";
 import { isDevTools } from "../constants/isDevTools.mjs";
 import { defaultComponentStateMounted } from "../defaultComponentState.mjs";
 import { isVariable } from "../createVariable.mjs";
@@ -397,6 +397,19 @@ function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false
 		} else return;
 	}
 	let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
+	if (process.env.NODE_ENV === "development") {
+		if (!isValidStyleKeyInit && (!variants || !(keyInit in variants))) {
+			let replacement;
+			if (keyInit === "animation") replacement = "transition=";
+			else if (keyInit === "hoverStyle") replacement = "hover: clause";
+			else if (keyInit === "pressStyle") replacement = "press: clause";
+			else if (keyInit === "focusStyle") replacement = "focus: clause";
+			else if (keyInit === "enterStyle") replacement = "enter: clause";
+			else if (keyInit === "exitStyle") replacement = "exit: clause";
+			else if (keyInit.charCodeAt(0) === 36 && keyInit.length > 1) replacement = `${keyInit.slice(1)}: clause`;
+			if (replacement) warnOnce(`v2-prop:${keyInit}`, `prop "${keyInit}" was removed in v3; use ${replacement}`);
+		}
+	}
 	if (keyInit.startsWith("data-")) {
 		viewProps[keyInit] = valInit;
 		return;
@@ -1185,7 +1198,7 @@ function emitUnderCondition(state, property, value, cursor, originalValue, conte
 	}
 	return condition;
 }
-const formatScanFailure = (failure, source, failureIndex) => failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : "an unterminated \"(\"";
+const formatScanFailure = (failure, source, failureIndex) => failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : failure === "over-deep-clause" ? `a clause with more than ${grammarMaxNonPlatformDepth} non-platform conditions` : "an unterminated \"(\"";
 const warnScanFailure = (property, source, failure, failureIndex) => {
 	if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, formatScanFailure(failure, source, failureIndex));
 };
@@ -1195,6 +1208,15 @@ let valueCaches = /* @__PURE__ */ new WeakMap();
 let valueCacheEntries = 0;
 const valueCacheRoot = {};
 const parsedSlices = /* @__PURE__ */ new WeakMap();
+const cssWideColorKeywords = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"currentcolor",
+	"transparent"
+]);
 function configuredValue(state, property, raw, embedded = false) {
 	const grammar = getConfigRevisionState(state.conf);
 	let name = raw;
@@ -1267,8 +1289,75 @@ function configuredValue(state, property, raw, embedded = false) {
 		}
 	}
 	if (process.env.NODE_ENV === "development") {
-		const category = grammar.tokenCategory(property);
+		const category = grammar.tokenCategory(property) || grammar.tokenCategory(state.conf.shorthands[property] || property);
 		if (category && category !== "color" && state.conf.tokensParsed.color?.[name]) warnOnce(`"${name}" contributes to "color", not "${property}"`);
+		if (!value && !fontProperty) {
+			if (name.charCodeAt(0) === 36 || raw.charCodeAt(0) === 36) {
+				const suggested = name.charCodeAt(0) === 36 ? name.slice(1) : raw.slice(1);
+				warnOnce(`v2-token:${property}=${raw}`, `${property}="${raw}": v3 tokens have no "$" prefix, did you mean "${suggested}"?`);
+			} else if ((category === "size" || category === "space" || category === "radius" || category === "zIndex") && /^-?\d+(?:\.\d+)?$/.test(name)) {
+				let nearest;
+				let minDistance = Infinity;
+				const rawNum = Number(name);
+				const tokens = category ? state.conf.tokensParsed[category] : void 0;
+				if (tokens && Number.isFinite(rawNum)) for (const key in tokens) {
+					const keyNum = Number(key);
+					if (Number.isFinite(keyNum)) {
+						const dist = Math.abs(keyNum - rawNum);
+						if (dist < minDistance) {
+							minDistance = dist;
+							nearest = key;
+						}
+					} else {
+						const val = tokens[key]?.val;
+						const valNum = typeof val === "number" ? val : Number(val);
+						if (Number.isFinite(valNum)) {
+							const dist = Math.abs(valNum - rawNum);
+							if (dist < minDistance) {
+								minDistance = dist;
+								nearest = key;
+							}
+						}
+					}
+				}
+				warnOnce(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is with px units${nearest ? `; nearest token is "${nearest}"` : ""}`);
+			} else if (category === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
+				const lower = name.toLowerCase();
+				if (!namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
+					const themeKeys = [];
+					if (state.theme && typeof state.theme === "object") for (const k in state.theme) themeKeys.push(k);
+					if (state.conf.themes) {
+						const active = state.conf.themes[state.flatThemeName || ""];
+						if (active) for (const k in active) themeKeys.push(k);
+						else for (const t in state.conf.themes) for (const k in state.conf.themes[t]) themeKeys.push(k);
+					}
+					let bestMatch;
+					let minDistance = 3;
+					for (const key of themeKeys) {
+						if (Math.abs(key.length - name.length) > 2) continue;
+						const m = name.length;
+						const n = key.length;
+						const d = [];
+						for (let i = 0; i <= m; i++) d[i] = i;
+						for (let j = 1; j <= n; j++) {
+							let prev = d[0];
+							d[0] = j;
+							for (let i = 1; i <= m; i++) {
+								const temp = d[i];
+								d[i] = name[i - 1] === key[j - 1] ? prev : Math.min(prev, d[i], d[i - 1]) + 1;
+								prev = temp;
+							}
+						}
+						const dist = d[m];
+						if (dist <= 2 && dist < minDistance) {
+							minDistance = dist;
+							bestMatch = key;
+						}
+					}
+					warnOnce(`unknown-color:${property}=${raw}`, bestMatch ? `unknown color "${name}", did you mean "${bestMatch}"?` : `unknown color "${name}"`);
+				}
+			}
+		}
 	}
 	let out = raw;
 	if (isVariable(value)) {
@@ -1473,6 +1562,11 @@ function walkConditionalValue(state, property, value, parent, sink, warnMode = 0
 	if (typeof value === "string") {
 		const parsed = getConfigRevisionState(state.conf).parseFlatValue(value);
 		const [segments, failure, failureIndex] = parsed;
+		if (process.env.NODE_ENV === "development") {
+			if (getSetting("styleValueSyntax") === "object") {
+				if (segments.length > 5 || segments.length >= 5 && segments[2] !== -1 || value.includes(":")) warnOnce(`syntax:string:${property}=${value}`, `string syntax is disabled by config (styleValueSyntax: 'object'); received "${property}=${value}"`);
+			}
+		}
 		let slices = parsedSlices.get(parsed);
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		const chainCount = segments.length / 5 - 1;
@@ -1518,6 +1612,9 @@ function walkConditionalValue(state, property, value, parent, sink, warnMode = 0
 		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
 	} else {
 		if (!value || typeof value !== "object" || Array.isArray(value) || isVariable(value) || !classifyConditionalObject(value, state)) return false;
+		if (process.env.NODE_ENV === "development") {
+			if (getSetting("styleValueSyntax") === "string") warnOnce(`syntax:object:${property}=${JSON.stringify(value)}`, `object-form conditional syntax is disabled by config (styleValueSyntax: 'string'); received "${property}"`);
+		}
 		if (value.default != null) {
 			emitConditionalValue(state, property, value.default, parentCondition, value.default, sink, warnMode, contextOnly);
 			hasBase = true;