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

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -437,6 +437,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) (0, import_warnOnce.warnOnce)(`v2-prop:${keyInit}`, `prop "${keyInit}" was removed in v3; use ${replacement}`);
+		}
+	}
 	if (keyInit.startsWith("data-")) {
 		viewProps[keyInit] = valInit;
 		return;
@@ -1225,7 +1238,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 ${import_runtime.grammarMaxNonPlatformDepth} non-platform conditions` : "an unterminated \"(\"";
 const warnScanFailure = (property, source, failure, failureIndex) => {
 	if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnRefusedValue)(property, source, formatScanFailure(failure, source, failureIndex));
 };
@@ -1235,6 +1248,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 = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
 	let name = raw;
@@ -1307,8 +1329,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]) (0, import_warnOnce.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);
+				(0, import_warnOnce.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;
+							}
+						}
+					}
+				}
+				(0, import_warnOnce.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 (!import_runtime.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;
+						}
+					}
+					(0, import_warnOnce.warnOnce)(`unknown-color:${property}=${raw}`, bestMatch ? `unknown color "${name}", did you mean "${bestMatch}"?` : `unknown color "${name}"`);
+				}
+			}
+		}
 	}
 	let out = raw;
 	if ((0, import_createVariable.isVariable)(value)) {
@@ -1513,6 +1602,11 @@ function walkConditionalValue(state, property, value, parent, sink, warnMode = 0
 	if (typeof value === "string") {
 		const parsed = (0, import_grammarConfig.getConfigRevisionState)(state.conf).parseFlatValue(value);
 		const [segments, failure, failureIndex] = parsed;
+		if (process.env.NODE_ENV === "development") {
+			if ((0, import_config.getSetting)("styleValueSyntax") === "object") {
+				if (segments.length > 5 || segments.length >= 5 && segments[2] !== -1 || value.includes(":")) (0, import_warnOnce.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;
@@ -1558,6 +1652,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) || (0, import_createVariable.isVariable)(value) || !classifyConditionalObject(value, state)) return false;
+		if (process.env.NODE_ENV === "development") {
+			if ((0, import_config.getSetting)("styleValueSyntax") === "string") (0, import_warnOnce.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;

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

@@ -489,6 +489,19 @@ function contributeProp(pass, keyOg, valOg) {
 	if (!isNativeInputColor && keyInit in import_skipProps.skipProps && shouldSkipDirectProps && !(neverSkipProps === null || neverSkipProps === void 0 ? void 0 : neverSkipProps[keyInit])) if (keyInit === "transition" && typeof valInit === "string") return;
 	else return;
 	var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
+	if (process.env.NODE_ENV === "development") {
+		if (!isValidStyleKeyInit && (!variants || !(keyInit in variants))) {
+			var 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) (0, import_warnOnce.warnOnce)(`v2-prop:${keyInit}`, `prop "${keyInit}" was removed in v3; use ${replacement}`);
+		}
+	}
 	if (!isValidStyleKeyInit) {
 		if (!import_constants.isAndroid) {
 			if (keyInit === "elevationAndroid") return;
@@ -1218,7 +1231,7 @@ function emitUnderCondition(state, property, value, cursor, originalValue, conte
 	return condition;
 }
 var formatScanFailure = function(failure, source, failureIndex) {
-	return 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 \"(\"";
+	return 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 ${import_runtime.grammarMaxNonPlatformDepth} non-platform conditions` : "an unterminated \"(\"";
 };
 var warnScanFailure = function(property, source, failure, failureIndex) {
 	if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnRefusedValue)(property, source, formatScanFailure(failure, source, failureIndex));
@@ -1244,6 +1257,15 @@ var valueCaches = /* @__PURE__ */ new WeakMap();
 var valueCacheEntries = 0;
 var valueCacheRoot = {};
 var parsedSlices = /* @__PURE__ */ new WeakMap();
+var cssWideColorKeywords = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"currentcolor",
+	"transparent"
+]);
 function configuredValue(state, property, raw) {
 	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
 	var grammar = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
@@ -1329,8 +1351,89 @@ function configuredValue(state, property, raw) {
 	}
 	if (process.env.NODE_ENV === "development") {
 		var _state_conf_tokensParsed_color1;
-		var category1 = grammar.tokenCategory(property);
+		var category1 = grammar.tokenCategory(property) || grammar.tokenCategory(state.conf.shorthands[property] || property);
 		if (category1 && category1 !== "color" && ((_state_conf_tokensParsed_color1 = state.conf.tokensParsed.color) === null || _state_conf_tokensParsed_color1 === void 0 ? void 0 : _state_conf_tokensParsed_color1[name])) (0, import_warnOnce.warnOnce)(`"${name}" contributes to "color", not "${property}"`);
+		if (!value && !fontProperty) {
+			if (name.charCodeAt(0) === 36 || raw.charCodeAt(0) === 36) {
+				var suggested = name.charCodeAt(0) === 36 ? name.slice(1) : raw.slice(1);
+				(0, import_warnOnce.warnOnce)(`v2-token:${property}=${raw}`, `${property}="${raw}": v3 tokens have no "$" prefix, did you mean "${suggested}"?`);
+			} else if ((category1 === "size" || category1 === "space" || category1 === "radius" || category1 === "zIndex") && /^-?\d+(?:\.\d+)?$/.test(name)) {
+				var nearest;
+				var minDistance = Infinity;
+				var rawNum = Number(name);
+				var tokens = category1 ? state.conf.tokensParsed[category1] : void 0;
+				if (tokens && Number.isFinite(rawNum)) for (var key in tokens) {
+					var keyNum = Number(key);
+					if (Number.isFinite(keyNum)) {
+						var dist = Math.abs(keyNum - rawNum);
+						if (dist < minDistance) {
+							minDistance = dist;
+							nearest = key;
+						}
+					} else {
+						var _tokens_key;
+						var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
+						var valNum = typeof val === "number" ? val : Number(val);
+						if (Number.isFinite(valNum)) {
+							var dist1 = Math.abs(valNum - rawNum);
+							if (dist1 < minDistance) {
+								minDistance = dist1;
+								nearest = key;
+							}
+						}
+					}
+				}
+				(0, import_warnOnce.warnOnce)(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is with px units${nearest ? `; nearest token is "${nearest}"` : ""}`);
+			} else if (category1 === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
+				var lower = name.toLowerCase();
+				if (!import_runtime.namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
+					var themeKeys = [];
+					if (state.theme && typeof state.theme === "object") for (var k in state.theme) themeKeys.push(k);
+					if (state.conf.themes) {
+						var active = state.conf.themes[state.flatThemeName || ""];
+						if (active) for (var k1 in active) themeKeys.push(k1);
+						else for (var t in state.conf.themes) for (var k2 in state.conf.themes[t]) themeKeys.push(k2);
+					}
+					var bestMatch;
+					var minDistance1 = 3;
+					var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+					try {
+						for (var _iterator = themeKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+							var key1 = _step.value;
+							if (Math.abs(key1.length - name.length) > 2) continue;
+							var m = name.length;
+							var n = key1.length;
+							var d = [];
+							for (var i = 0; i <= m; i++) d[i] = i;
+							for (var j = 1; j <= n; j++) {
+								var prev = d[0];
+								d[0] = j;
+								for (var i1 = 1; i1 <= m; i1++) {
+									var temp = d[i1];
+									d[i1] = name[i1 - 1] === key1[j - 1] ? prev : Math.min(prev, d[i1], d[i1 - 1]) + 1;
+									prev = temp;
+								}
+							}
+							var dist2 = d[m];
+							if (dist2 <= 2 && dist2 < minDistance1) {
+								minDistance1 = dist2;
+								bestMatch = key1;
+							}
+						}
+					} catch (err) {
+						_didIteratorError = true;
+						_iteratorError = err;
+					} finally {
+						try {
+							if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+						} finally {
+							if (_didIteratorError) throw _iteratorError;
+						}
+					}
+					(0, import_warnOnce.warnOnce)(`unknown-color:${property}=${raw}`, bestMatch ? `unknown color "${name}", did you mean "${bestMatch}"?` : `unknown color "${name}"`);
+				}
+			}
+		}
 	}
 	var out = raw;
 	if ((0, import_createVariable.isVariable)(value)) {
@@ -1661,6 +1764,11 @@ function walkConditionalValue(state, property, value, parent, sink) {
 	if (typeof value === "string") {
 		var parsed = (0, import_grammarConfig.getConfigRevisionState)(state.conf).parseFlatValue(value);
 		var [segments, failure, failureIndex] = parsed;
+		if (process.env.NODE_ENV === "development") {
+			if ((0, import_config.getSetting)("styleValueSyntax") === "object") {
+				if (segments.length > 5 || segments.length >= 5 && segments[2] !== -1 || value.includes(":")) (0, import_warnOnce.warnOnce)(`syntax:string:${property}=${value}`, `string syntax is disabled by config (styleValueSyntax: 'object'); received "${property}=${value}"`);
+			}
+		}
 		var slices = parsedSlices.get(parsed);
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		var chainCount = segments.length / 5 - 1;
@@ -1714,6 +1822,9 @@ function walkConditionalValue(state, property, value, parent, sink) {
 		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
 	} else {
 		if (!value || typeof value !== "object" || Array.isArray(value) || (0, import_createVariable.isVariable)(value) || !classifyConditionalObject(value, state)) return false;
+		if (process.env.NODE_ENV === "development") {
+			if ((0, import_config.getSetting)("styleValueSyntax") === "string") (0, import_warnOnce.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;

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

@@ -489,6 +489,19 @@ function contributeProp(pass, keyOg, valOg) {
 	if (!isNativeInputColor && keyInit in import_skipProps.skipProps && shouldSkipDirectProps && !(neverSkipProps === null || neverSkipProps === void 0 ? void 0 : neverSkipProps[keyInit])) if (keyInit === "transition" && typeof valInit === "string") return;
 	else return;
 	var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
+	if (process.env.NODE_ENV === "development") {
+		if (!isValidStyleKeyInit && (!variants || !(keyInit in variants))) {
+			var 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) (0, import_warnOnce.warnOnce)(`v2-prop:${keyInit}`, `prop "${keyInit}" was removed in v3; use ${replacement}`);
+		}
+	}
 	if (!isValidStyleKeyInit) {
 		if (!import_constants.isAndroid) {
 			if (keyInit === "elevationAndroid") return;
@@ -1218,7 +1231,7 @@ function emitUnderCondition(state, property, value, cursor, originalValue, conte
 	return condition;
 }
 var formatScanFailure = function(failure, source, failureIndex) {
-	return 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 \"(\"";
+	return 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 ${import_runtime.grammarMaxNonPlatformDepth} non-platform conditions` : "an unterminated \"(\"";
 };
 var warnScanFailure = function(property, source, failure, failureIndex) {
 	if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnRefusedValue)(property, source, formatScanFailure(failure, source, failureIndex));
@@ -1244,6 +1257,15 @@ var valueCaches = /* @__PURE__ */ new WeakMap();
 var valueCacheEntries = 0;
 var valueCacheRoot = {};
 var parsedSlices = /* @__PURE__ */ new WeakMap();
+var cssWideColorKeywords = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"currentcolor",
+	"transparent"
+]);
 function configuredValue(state, property, raw) {
 	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
 	var grammar = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
@@ -1329,8 +1351,89 @@ function configuredValue(state, property, raw) {
 	}
 	if (process.env.NODE_ENV === "development") {
 		var _state_conf_tokensParsed_color1;
-		var category1 = grammar.tokenCategory(property);
+		var category1 = grammar.tokenCategory(property) || grammar.tokenCategory(state.conf.shorthands[property] || property);
 		if (category1 && category1 !== "color" && ((_state_conf_tokensParsed_color1 = state.conf.tokensParsed.color) === null || _state_conf_tokensParsed_color1 === void 0 ? void 0 : _state_conf_tokensParsed_color1[name])) (0, import_warnOnce.warnOnce)(`"${name}" contributes to "color", not "${property}"`);
+		if (!value && !fontProperty) {
+			if (name.charCodeAt(0) === 36 || raw.charCodeAt(0) === 36) {
+				var suggested = name.charCodeAt(0) === 36 ? name.slice(1) : raw.slice(1);
+				(0, import_warnOnce.warnOnce)(`v2-token:${property}=${raw}`, `${property}="${raw}": v3 tokens have no "$" prefix, did you mean "${suggested}"?`);
+			} else if ((category1 === "size" || category1 === "space" || category1 === "radius" || category1 === "zIndex") && /^-?\d+(?:\.\d+)?$/.test(name)) {
+				var nearest;
+				var minDistance = Infinity;
+				var rawNum = Number(name);
+				var tokens = category1 ? state.conf.tokensParsed[category1] : void 0;
+				if (tokens && Number.isFinite(rawNum)) for (var key in tokens) {
+					var keyNum = Number(key);
+					if (Number.isFinite(keyNum)) {
+						var dist = Math.abs(keyNum - rawNum);
+						if (dist < minDistance) {
+							minDistance = dist;
+							nearest = key;
+						}
+					} else {
+						var _tokens_key;
+						var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
+						var valNum = typeof val === "number" ? val : Number(val);
+						if (Number.isFinite(valNum)) {
+							var dist1 = Math.abs(valNum - rawNum);
+							if (dist1 < minDistance) {
+								minDistance = dist1;
+								nearest = key;
+							}
+						}
+					}
+				}
+				(0, import_warnOnce.warnOnce)(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is with px units${nearest ? `; nearest token is "${nearest}"` : ""}`);
+			} else if (category1 === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
+				var lower = name.toLowerCase();
+				if (!import_runtime.namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
+					var themeKeys = [];
+					if (state.theme && typeof state.theme === "object") for (var k in state.theme) themeKeys.push(k);
+					if (state.conf.themes) {
+						var active = state.conf.themes[state.flatThemeName || ""];
+						if (active) for (var k1 in active) themeKeys.push(k1);
+						else for (var t in state.conf.themes) for (var k2 in state.conf.themes[t]) themeKeys.push(k2);
+					}
+					var bestMatch;
+					var minDistance1 = 3;
+					var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+					try {
+						for (var _iterator = themeKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+							var key1 = _step.value;
+							if (Math.abs(key1.length - name.length) > 2) continue;
+							var m = name.length;
+							var n = key1.length;
+							var d = [];
+							for (var i = 0; i <= m; i++) d[i] = i;
+							for (var j = 1; j <= n; j++) {
+								var prev = d[0];
+								d[0] = j;
+								for (var i1 = 1; i1 <= m; i1++) {
+									var temp = d[i1];
+									d[i1] = name[i1 - 1] === key1[j - 1] ? prev : Math.min(prev, d[i1], d[i1 - 1]) + 1;
+									prev = temp;
+								}
+							}
+							var dist2 = d[m];
+							if (dist2 <= 2 && dist2 < minDistance1) {
+								minDistance1 = dist2;
+								bestMatch = key1;
+							}
+						}
+					} catch (err) {
+						_didIteratorError = true;
+						_iteratorError = err;
+					} finally {
+						try {
+							if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+						} finally {
+							if (_didIteratorError) throw _iteratorError;
+						}
+					}
+					(0, import_warnOnce.warnOnce)(`unknown-color:${property}=${raw}`, bestMatch ? `unknown color "${name}", did you mean "${bestMatch}"?` : `unknown color "${name}"`);
+				}
+			}
+		}
 	}
 	var out = raw;
 	if ((0, import_createVariable.isVariable)(value)) {
@@ -1661,6 +1764,11 @@ function walkConditionalValue(state, property, value, parent, sink) {
 	if (typeof value === "string") {
 		var parsed = (0, import_grammarConfig.getConfigRevisionState)(state.conf).parseFlatValue(value);
 		var [segments, failure, failureIndex] = parsed;
+		if (process.env.NODE_ENV === "development") {
+			if ((0, import_config.getSetting)("styleValueSyntax") === "object") {
+				if (segments.length > 5 || segments.length >= 5 && segments[2] !== -1 || value.includes(":")) (0, import_warnOnce.warnOnce)(`syntax:string:${property}=${value}`, `string syntax is disabled by config (styleValueSyntax: 'object'); received "${property}=${value}"`);
+			}
+		}
 		var slices = parsedSlices.get(parsed);
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		var chainCount = segments.length / 5 - 1;
@@ -1714,6 +1822,9 @@ function walkConditionalValue(state, property, value, parent, sink) {
 		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
 	} else {
 		if (!value || typeof value !== "object" || Array.isArray(value) || (0, import_createVariable.isVariable)(value) || !classifyConditionalObject(value, state)) return false;
+		if (process.env.NODE_ENV === "development") {
+			if ((0, import_config.getSetting)("styleValueSyntax") === "string") (0, import_warnOnce.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;