@animus-ui/properties 0.1.20 → 0.1.21

package/dist/index.d.ts

@@ -1,5 +1,145 @@
-export { SHORTHAND_PROPERTIES } from './shorthands';
-export { isUnitlessProperty, UNITLESS_PROPERTIES } from './unitless';
-export { dependsOnContext, foldInitialValue, registeredInitialValue, substitutesValue, } from './registration-values.js';
-export type { FoldedInitialValue } from './registration-values.js';
+//#region src/shorthands.d.ts
+/**
+ * Covers only shorthands registered in the prop system, not all CSS shorthands.
+ */
+export declare const SHORTHAND_PROPERTIES: readonly ['border', 'borderTop', 'borderBottom', 'borderLeft', 'borderRight', 'borderWidth', 'borderStyle', 'borderColor', 'background', 'flex', 'margin', 'padding', 'transition', 'gap', 'grid', 'gridArea', 'gridColumn', 'gridRow', 'gridTemplate', 'overflow'];
+//#endregion
+//#region src/unitless.d.ts
+export declare const UNITLESS_PROPERTIES: Set<string>;
+/** Accepts either spelling: `line-height` or `lineHeight`,
+ *  `-webkit-line-clamp` or `WebkitLineClamp`. */
+export declare function isUnitlessProperty(property: string): boolean;
+//#endregion
+//#region src/css-tokens.d.ts
+/**
+ * CSS tokens as CSS Syntax Level 3 reads them, with their source offsets.
+ * Comments are trivia and make no token. Identifiers, function names,
+ * at-keywords, hashes and units are decoded, escapes included. A quoted
+ * string and an unquoted `url()` are each one opaque token, so nothing inside
+ * them reads as a name or a function.
+ */
+type CssTokenType = 'whitespace' | 'ident' | 'function' | 'at-keyword' | 'hash' | 'string' | 'bad-string' | 'url' | 'bad-url' | 'number' | 'percentage' | 'dimension' | 'delim' | 'CDO' | 'CDC' | '(' | ')' | '[' | ']' | '{' | '}' | ',' | ':' | ';';
+interface CssToken {
+  type: CssTokenType;
+  start: number;
+  end: number;
+  /** The decoded name of an ident, function, at-keyword or hash, the
+   *  decoded unit of a dimension, or a delim's character; otherwise `''`. */
+  value: string;
+  /** A number, percentage or dimension's numeric value; otherwise `0`. */
+  number: number;
+}
+/** The identifier starting at `index`, decoded, or `undefined` when none
+ *  starts there. */
+export declare function identifierAt(css: string, index: number): {
+  name: string;
+  end: number;
+} | undefined;
+/** `name` decoded when it is one whole identifier, else as written. */
+export declare function decodedIdentifier(name: string): string;
+/** Every token of `css`, in order. */
+export declare function tokenize(css: string): CssToken[];
+/** A component value: a function, or a `()`, `[]` or `{}` block, with its
+ *  contents, or a single token. Offsets span the whole value. */
+type ComponentValue = {
+  kind: 'block';
+  /** The function token, or the `(`, `[` or `{` token. */
+  open: CssToken;
+  /** `undefined` when the block is never closed. */
+  close: CssToken | undefined;
+  children: ComponentValue[];
+  start: number;
+  end: number;
+} | {
+  kind: 'token';
+  token: CssToken;
+  start: number;
+  end: number;
+};
+/**
+ * `tokens` as component values. Only the innermost open block's own closer
+ * closes it; any other closer stays a token, and a block left open closes at
+ * the end, as CSS reads them.
+ */
+export declare function componentValues(tokens: readonly CssToken[]): ComponentValue[];
+/** Whether `test` holds for a value at any depth. */
+export declare function someValue(values: readonly ComponentValue[], test: (value: ComponentValue) => boolean): boolean;
+/** A `var()` read: the decoded custom-property name, the call's offsets,
+ *  and its fallback's: after the comma, the first value's start, and before
+ *  the closing parenthesis. */
+interface VariableRead {
+  name: string;
+  start: number;
+  end: number;
+  fallback: {
+    start: number;
+    first: number;
+    end: number;
+  } | undefined;
+}
+/** Whether `value` is whitespace. */
+export declare const isSpace: (value: ComponentValue | undefined) => boolean;
+/**
+ * Every `var()` call in `values` at any depth, fallbacks included, outer
+ * calls first: a function whose decoded name is `var` in any case, and whose
+ * first argument is a custom-property name.
+ */
+export declare function variableReads(values: readonly ComponentValue[]): VariableRead[];
+//#endregion
+//#region src/registration-values.d.ts
+/**
+ * Reads a custom-property registration's initial value as CSS component
+ * values: what it substitutes, which units make it depend on context, and
+ * what an all-absolute math function computes to. Tokens come from the shared
+ * CSS reader, so comments are trivia, quoted strings and `url()` stay text,
+ * and escaped names are decoded.
+ */
+/** Whether `value` substitutes another value (`var()`, `env()`, `attr()`),
+ *  which no registration's initial value may. */
+export declare function substitutesValue(value: string): boolean;
+/** Whether `value` uses a font- or container-relative unit, inside math
+ *  functions too, which makes a typed initial value depend on context. */
+export declare function dependsOnContext(value: string): boolean;
+/** What an all-absolute math expression computes to. */
+interface Computed {
+  type: 'number' | 'length' | 'angle' | 'time' | 'resolution';
+  value: number;
+}
+/** What a math initial value folds to. */
+type FoldedInitialValue =
+/** The computed value the syntax accepts, as CSS text such as `1`, `16px`
+ *  or `90deg`. */
+{
+  kind: 'folded';
+  text: string;
+} |
+/** A computed value no syntax alternative accepts. */
+{
+  kind: 'rejected';
+  text: string;
+  type: Computed['type'];
+} |
+/** Math that breaks CSS calculation syntax, which browsers ignore. */
+{
+  kind: 'invalid';
+  reason: string;
+} |
+/** An infinite or NaN result: browsers clamp it, and it has no plain
+ *  value to write. */
+{
+  kind: 'not-finite';
+};
+/**
+ * The computed value of an initial value that is one math function (`calc()`,
+ * `min()`, `max()`, `clamp()`) over numbers and absolute units, such as
+ * `calc(1px / 1px)` → `1`. The browser computes the same value, and CSS
+ * tooling that cannot parse the function in that position reads the result.
+ * The syntax's alternatives are tried in their declared order, and an
+ * `<integer>` one rounds a number result to the nearest integer, halves
+ * toward positive infinity, as CSS does. `undefined` for anything else, and
+ * for the universal syntax, whose initial value is kept as written.
+ */
+export declare function foldInitialValue(syntax: string, initialValue: string): FoldedInitialValue | undefined;
+//#endregion
+export type { ComponentValue, CssToken, FoldedInitialValue, VariableRead };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/shorthands.ts","../src/unitless.ts","../src/css-tokens.ts","../src/registration-values.ts"],"mappings":";;;;qBAGa;;;qBCHA,qBAAmB;;;wBAgHhB,mBAAmB;;;;;;;;;;KCxGvB;UA0BK;EACf,MAAM;EACN;EACA;;;EAGA;;EAEA;;;;wBAiFc,aACd,aACA;EACG;EAAc;;;wBAOH,kBAAkB;;wBAyFlB,SAAS,cAAc;;;KA0E3B;EAEN;;EAEA,MAAM;;EAEN,OAAO;EACP,UAAU;EACV;EACA;;EAEA;EAAe,OAAO;EAAU;EAAe;;;;;;;wBAgBrC,gBAAgB,iBAAiB,aAAa;;wBAoC9C,UACd,iBAAiB,kBACjB,OAAO,OAAO;;;;UAWC;EACf;EACA;EACA;EACA;IAAY;IAAe;IAAe;;;;qBAI/B,UAAO,OAAW;;;;;;wBAQf,cACd,iBAAiB,mBAChB;;;;;;;;;;;;wBCvWa,iBAAiB;;;wBA6BjB,iBAAiB;;UAWvB;EACR;EACA;;;KA+NU;;;;EAGN;EAAgB;;;;EAEhB;EAAkB;EAAc,MAAM;;;;EAEtC;EAAiB;;;;;EAGjB;;;;;;;;;;;;wBAYU,iBACd,gBACA,uBACC"}

package/dist/index.js

@@ -71,97 +71,382 @@ const UNITLESS_PROPERTIES = /* @__PURE__ */ new Set([
 	"tab-size",
 	"widows",
 	"z-index",
-	"zoom"
+	"zoom",
+	"-moz-animation-iteration-count",
+	"-moz-animation-name",
+	"-moz-box-flex",
+	"-moz-box-ordinal-group",
+	"-moz-column-count",
+	"-moz-columns",
+	"-moz-opacity",
+	"-moz-tab-size",
+	"-ms-flex",
+	"-ms-flex-positive",
+	"-ms-order",
+	"-o-animation-iteration-count",
+	"-o-animation-name",
+	"-o-tab-size",
+	"-webkit-animation-iteration-count",
+	"-webkit-animation-name",
+	"-webkit-border-image-slice",
+	"-webkit-box-flex",
+	"-webkit-box-flex-group",
+	"-webkit-box-ordinal-group",
+	"-webkit-column-count",
+	"-webkit-columns",
+	"-webkit-flex",
+	"-webkit-flex-grow",
+	"-webkit-flex-shrink",
+	"-webkit-line-clamp",
+	"-webkit-order"
 ]);
+/**
+* A style key's vendor prefix and the CSS prefix it stands for:
+* `WebkitLineClamp` is `-webkit-line-clamp`, `msFlex` is `-ms-flex`. The
+* extractor reads this table through `property_table.json`.
+*/
+const VENDOR_PREFIXES = [
+	["Webkit", "-webkit-"],
+	["Moz", "-moz-"],
+	["ms", "-ms-"],
+	["O", "-o-"]
+];
+/** The camelCase style key of a CSS property name. */
+function styleKey(property) {
+	const vendor = VENDOR_PREFIXES.find(([, prefix]) => property.startsWith(prefix));
+	const [key, rest] = vendor ? [vendor[0], property.slice(vendor[1].length - 1)] : ["", property];
+	return key + rest.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+}
 const UNITLESS_PROPERTY_SPELLINGS = /* @__PURE__ */ new Set();
 for (const property of UNITLESS_PROPERTIES) {
 	UNITLESS_PROPERTY_SPELLINGS.add(property);
-	UNITLESS_PROPERTY_SPELLINGS.add(property.replace(/-([a-z])/g, (_, char) => char.toUpperCase()));
+	UNITLESS_PROPERTY_SPELLINGS.add(styleKey(property));
 }
-/** Accepts either spelling: `line-height` or `lineHeight`. */
+/** Accepts either spelling: `line-height` or `lineHeight`,
+*  `-webkit-line-clamp` or `WebkitLineClamp`. */
 function isUnitlessProperty(property) {
 	return UNITLESS_PROPERTY_SPELLINGS.has(property);
 }
 //#endregion
-//#region src/registration-values.ts
-const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/i;
-const IDENT = /^(?:--|-?[a-zA-Z_])[\w-]*/;
-/** The component values of `text`; `undefined` when it does not parse. */
-function parse(text) {
-	let at = 0;
-	function values(nested) {
-		const out = [];
-		while (at < text.length) {
-			const char = text[at];
-			if (/\s/.test(char)) {
-				at += 1;
-				continue;
-			}
-			if (char === ")") {
-				at += 1;
-				return nested ? out : void 0;
-			}
-			if (char === "\"" || char === "'") {
-				const end = stringEnd(text, at);
-				if (end === void 0) return void 0;
-				out.push({
-					kind: "token",
-					text: text.slice(at, end)
-				});
-				at = end;
-				continue;
-			}
-			const rest = text.slice(at);
-			const ident = IDENT.exec(rest)?.[0];
-			if (char === "(" || ident && rest[ident.length] === "(") {
-				const name = (ident ?? "").toLowerCase();
-				at += (ident?.length ?? 0) + 1;
-				if (name === "url") {
-					const end = text.indexOf(")", at);
-					if (end < 0) return void 0;
-					out.push({
-						kind: "token",
-						text: "url()"
-					});
-					at = end + 1;
-					continue;
+//#region src/css-tokens.ts
+const at = (css, index) => index < css.length ? css.charCodeAt(index) : -1;
+const isNewline = (c) => c === 10 || c === 13 || c === 12;
+const isWhitespace = (c) => c === 32 || c === 9 || isNewline(c);
+const isDigit = (c) => c >= 48 && c <= 57;
+const isHexDigit = (c) => isDigit(c) || c >= 65 && c <= 70 || c >= 97 && c <= 102;
+const isIdentStart = (c) => c >= 65 && c <= 90 || c >= 97 && c <= 122 || c === 95 || c >= 128;
+const isIdentChar = (c) => isIdentStart(c) || isDigit(c) || c === 45;
+const isNonPrintable = (c) => c >= 0 && c <= 8 || c === 11 || c >= 14 && c <= 31 || c === 127;
+/** Whether a `\` at `index` starts an escape. */
+const isEscape = (css, index) => at(css, index) === 92 && !isNewline(at(css, index + 1));
+function startsIdentifier(css, index) {
+	const c = at(css, index);
+	if (c === 45) {
+		const next = at(css, index + 1);
+		return isIdentStart(next) || next === 45 || isEscape(css, index + 1);
+	}
+	return isIdentStart(c) || isEscape(css, index);
+}
+function startsNumber(css, index) {
+	const signed = at(css, index) === 43 || at(css, index) === 45 ? 1 : 0;
+	const c = at(css, index + signed);
+	return isDigit(c) || c === 46 && isDigit(at(css, index + signed + 1));
+}
+/** The code point the escape at `index` stands for, and the index after it. */
+function readEscape(css, index) {
+	let i = index + 1;
+	if (i >= css.length) return ["�", i];
+	if (!isHexDigit(at(css, i))) {
+		const char = String.fromCodePoint(css.codePointAt(i) ?? 65533);
+		return [char, i + char.length];
+	}
+	const digitsEnd = Math.min(i + 6, css.length);
+	let value = 0;
+	while (i < digitsEnd && isHexDigit(at(css, i))) {
+		value = value * 16 + parseInt(css[i], 16);
+		i += 1;
+	}
+	if (at(css, i) === 13 && at(css, i + 1) === 10) i += 2;
+	else if (isWhitespace(at(css, i))) i += 1;
+	const valid = value !== 0 && value <= 1114111 && (value < 55296 || value > 57343);
+	return [String.fromCodePoint(valid ? value : 65533), i];
+}
+/** The identifier sequence at `index`, decoded, and the index after it. */
+function readName(css, index) {
+	let name = "";
+	let from = index;
+	let i = index;
+	for (;;) if (isIdentChar(at(css, i))) i += 1;
+	else if (isEscape(css, i)) {
+		const [char, next] = readEscape(css, i);
+		name += css.slice(from, i) + char;
+		i = next;
+		from = i;
+	} else return [name + css.slice(from, i), i];
+}
+/** The identifier starting at `index`, decoded, or `undefined` when none
+*  starts there. */
+function identifierAt(css, index) {
+	if (!startsIdentifier(css, index)) return void 0;
+	const [name, end] = readName(css, index);
+	return {
+		name,
+		end
+	};
+}
+/** `name` decoded when it is one whole identifier, else as written. */
+function decodedIdentifier(name) {
+	const read = identifierAt(name, 0);
+	return read?.end === name.length ? read.name : name;
+}
+function readString(css, index) {
+	const quote = at(css, index);
+	let i = index + 1;
+	for (;;) {
+		const c = at(css, i);
+		if (c === -1) return ["string", i];
+		if (c === quote) return ["string", i + 1];
+		if (isNewline(c)) return ["bad-string", i];
+		if (c === 92) {
+			const next = at(css, i + 1);
+			if (next === -1) i += 1;
+			else if (isNewline(next)) i += next === 13 && at(css, i + 2) === 10 ? 3 : 2;
+			else i = readEscape(css, i)[1];
+		} else i += 1;
+	}
+}
+function badUrlEnd(css, index) {
+	let i = index;
+	for (;;) {
+		const c = at(css, i);
+		if (c === -1) return i;
+		if (c === 41) return i + 1;
+		i = isEscape(css, i) ? readEscape(css, i)[1] : i + 1;
+	}
+}
+/** An unquoted `url(` body starting at `index`. */
+function readUrl(css, index) {
+	let i = index;
+	while (isWhitespace(at(css, i))) i += 1;
+	for (;;) {
+		const c = at(css, i);
+		if (c === -1) return ["url", i];
+		if (c === 41) return ["url", i + 1];
+		if (isWhitespace(c)) {
+			while (isWhitespace(at(css, i))) i += 1;
+			const next = at(css, i);
+			if (next === -1) return ["url", i];
+			if (next === 41) return ["url", i + 1];
+			return ["bad-url", badUrlEnd(css, i)];
+		}
+		if (c === 34 || c === 39 || c === 40 || isNonPrintable(c)) return ["bad-url", badUrlEnd(css, i)];
+		if (c === 92) {
+			if (!isEscape(css, i)) return ["bad-url", badUrlEnd(css, i)];
+			i = readEscape(css, i)[1];
+		} else i += 1;
+	}
+}
+function numberEnd(css, index) {
+	let i = index;
+	if (at(css, i) === 43 || at(css, i) === 45) i += 1;
+	while (isDigit(at(css, i))) i += 1;
+	if (at(css, i) === 46 && isDigit(at(css, i + 1))) {
+		i += 2;
+		while (isDigit(at(css, i))) i += 1;
+	}
+	const e = at(css, i);
+	if (e === 69 || e === 101) {
+		const sign = at(css, i + 1) === 43 || at(css, i + 1) === 45 ? 1 : 0;
+		if (isDigit(at(css, i + 1 + sign))) {
+			i += 2 + sign;
+			while (isDigit(at(css, i))) i += 1;
+		}
+	}
+	return i;
+}
+const SINGLE = new Map([
+	"(",
+	")",
+	"[",
+	"]",
+	"{",
+	"}",
+	",",
+	":",
+	";"
+].map((c) => [c, c]));
+/** Every token of `css`, in order. */
+function tokenize(css) {
+	const tokens = [];
+	let index = 0;
+	const push = (type, end, value = "", number = 0) => {
+		tokens.push({
+			type,
+			start: index,
+			end,
+			value,
+			number
+		});
+		index = end;
+	};
+	while (index < css.length) {
+		const c = css.charCodeAt(index);
+		if (c === 47 && at(css, index + 1) === 42) {
+			const close = css.indexOf("*/", index + 2);
+			index = close === -1 ? css.length : close + 2;
+		} else if (isWhitespace(c)) {
+			let end = index + 1;
+			while (isWhitespace(at(css, end))) end += 1;
+			push("whitespace", end);
+		} else if (c === 34 || c === 39) {
+			const [type, end] = readString(css, index);
+			push(type, end);
+		} else if (startsNumber(css, index)) {
+			const end = numberEnd(css, index);
+			const number = Number(css.slice(index, end));
+			if (startsIdentifier(css, end)) {
+				const [unit, unitEnd] = readName(css, end);
+				push("dimension", unitEnd, unit, number);
+			} else if (at(css, end) === 37) push("percentage", end + 1, "", number);
+			else push("number", end, "", number);
+		} else if (c === 45 && css.startsWith("->", index + 1)) push("CDC", index + 3);
+		else if (startsIdentifier(css, index)) {
+			const [name, end] = readName(css, index);
+			if (at(css, end) !== 40) push("ident", end, name);
+			else if (!/^url$/i.test(name)) push("function", end + 1, name);
+			else {
+				let body = end + 1;
+				while (isWhitespace(at(css, body)) && isWhitespace(at(css, body + 1))) body += 1;
+				const first = at(css, body);
+				const quote = isWhitespace(first) ? at(css, body + 1) : first;
+				if (quote === 34 || quote === 39) push("function", body, name);
+				else {
+					const [type, urlEnd] = readUrl(css, end + 1);
+					push(type, urlEnd);
 				}
-				const args = values(true);
-				if (args === void 0) return void 0;
-				out.push({
-					kind: "function",
-					name,
-					args
-				});
-				continue;
-			}
-			const number = NUMBER.exec(rest)?.[0];
-			if (number !== void 0) {
-				const unit = /^(?:%|[a-zA-Z]+)/.exec(rest.slice(number.length))?.[0];
-				out.push({
-					kind: "numeric",
-					value: Number(number),
-					unit: (unit ?? "").toLowerCase()
-				});
-				at += number.length + (unit?.length ?? 0);
-				continue;
 			}
-			out.push({
-				kind: "token",
-				text: ident ?? char
+		} else if (c === 35 && (isIdentChar(at(css, index + 1)) || isEscape(css, index + 1))) {
+			const [name, end] = readName(css, index + 1);
+			push("hash", end, name);
+		} else if (c === 64 && startsIdentifier(css, index + 1)) {
+			const [name, end] = readName(css, index + 1);
+			push("at-keyword", end, name);
+		} else if (c === 60 && css.startsWith("!--", index + 1)) push("CDO", index + 4);
+		else {
+			const single = SINGLE.get(css[index]);
+			if (single === void 0) push("delim", index + 1, css[index]);
+			else push(single, index + 1);
+		}
+	}
+	return tokens;
+}
+const CLOSERS = /* @__PURE__ */ new Map([
+	["function", ")"],
+	["(", ")"],
+	["[", "]"],
+	["{", "}"]
+]);
+/**
+* `tokens` as component values. Only the innermost open block's own closer
+* closes it; any other closer stays a token, and a block left open closes at
+* the end, as CSS reads them.
+*/
+function componentValues(tokens) {
+	const root = [];
+	const open = [];
+	for (const token of tokens) {
+		const top = open.at(-1);
+		if (top !== void 0 && token.type === top.closer) {
+			top.block.close = token;
+			top.block.end = token.end;
+			open.pop();
+			continue;
+		}
+		const list = top === void 0 ? root : top.block.children;
+		const closer = CLOSERS.get(token.type);
+		if (closer === void 0) list.push({
+			kind: "token",
+			token,
+			start: token.start,
+			end: token.end
+		});
+		else {
+			const block = {
+				kind: "block",
+				open: token,
+				close: void 0,
+				children: [],
+				start: token.start,
+				end: token.end
+			};
+			list.push(block);
+			open.push({
+				block,
+				closer
 			});
-			at += ident?.length ?? 1;
 		}
-		return nested ? void 0 : out;
 	}
-	return values(false);
+	for (let i = open.length - 1; i >= 0; i -= 1) {
+		const { block } = open[i];
+		block.end = Math.max(block.end, block.children.at(-1)?.end ?? block.end);
+	}
+	return root;
 }
-function stringEnd(text, start) {
-	for (let at = start + 1; at < text.length; at += 1) if (text[at] === "\\") at += 1;
-	else if (text[at] === text[start]) return at + 1;
+/** Whether `test` holds for a value at any depth. */
+function someValue(values, test) {
+	return values.some((value) => test(value) || value.kind === "block" && someValue(value.children, test));
 }
-function some(values, test) {
-	return values.some((value) => test(value) || value.kind === "function" && some(value.args, test));
+/** Whether `value` is whitespace. */
+const isSpace = (value) => value?.kind === "token" && value.token.type === "whitespace";
+/**
+* Every `var()` call in `values` at any depth, fallbacks included, outer
+* calls first: a function whose decoded name is `var` in any case, and whose
+* first argument is a custom-property name.
+*/
+function variableReads(values) {
+	const reads = [];
+	const visit = (list) => {
+		for (const value of list) {
+			if (value.kind !== "block") continue;
+			if (value.open.type === "function" && /^var$/i.test(value.open.value)) {
+				const [name, comma, first] = value.children.filter((c) => !isSpace(c));
+				if (name?.kind === "token" && name.token.type === "ident" && name.token.value.startsWith("--")) {
+					const end = value.close?.start ?? value.end;
+					reads.push({
+						name: name.token.value,
+						start: value.start,
+						end: value.end,
+						fallback: comma?.kind === "token" && comma.token.type === "," ? {
+							start: comma.end,
+							first: first?.start ?? end,
+							end
+						} : void 0
+					});
+				}
+			}
+			visit(value.children);
+		}
+	};
+	visit(values);
+	return reads;
+}
+//#endregion
+//#region src/registration-values.ts
+/**
+* Reads a custom-property registration's initial value as CSS component
+* values: what it substitutes, which units make it depend on context, and
+* what an all-absolute math function computes to. Tokens come from the shared
+* CSS reader, so comments are trivia, quoted strings and `url()` stay text,
+* and escaped names are decoded.
+*/
+const asciiLower = (text) => text.replace(/[A-Z]/g, (letter) => letter.toLowerCase());
+const parse = (text) => componentValues(tokenize(text));
+/** A function's ASCII-lowercase name, `''` for a parenthesized block, and
+*  `undefined` for anything else. */
+function functionName(value) {
+	if (value?.kind !== "block") return void 0;
+	if (value.open.type === "function") return asciiLower(value.open.value);
+	return value.open.type === "(" ? "" : void 0;
 }
 const SUBSTITUTIONS = /* @__PURE__ */ new Set([
 	"var",
@@ -169,12 +454,9 @@ const SUBSTITUTIONS = /* @__PURE__ */ new Set([
 	"attr"
 ]);
 /** Whether `value` substitutes another value (`var()`, `env()`, `attr()`),
-*  which no registration's initial value may. Unparseable text is read as
-*  substituting when it names one of them. */
+*  which no registration's initial value may. */
 function substitutesValue(value) {
-	const values = parse(value);
-	if (values === void 0) return /\b(?:var|env|attr)\(/i.test(value);
-	return some(values, (component) => component.kind === "function" && SUBSTITUTIONS.has(component.name));
+	return someValue(parse(value), (component) => SUBSTITUTIONS.has(functionName(component) ?? ""));
 }
 const CONTEXT_UNITS = /* @__PURE__ */ new Set([
 	"em",
@@ -199,9 +481,7 @@ const CONTEXT_UNITS = /* @__PURE__ */ new Set([
 /** Whether `value` uses a font- or container-relative unit, inside math
 *  functions too, which makes a typed initial value depend on context. */
 function dependsOnContext(value) {
-	const values = parse(value);
-	if (values === void 0) return false;
-	return some(values, (component) => component.kind === "numeric" && CONTEXT_UNITS.has(component.unit));
+	return someValue(parse(value), (component) => component.kind === "token" && component.token.type === "dimension" && CONTEXT_UNITS.has(asciiLower(component.token.value)));
 }
 /** Absolute units, by the canonical unit each converts to. */
 const ABSOLUTE_UNITS = /* @__PURE__ */ new Map([
@@ -236,94 +516,157 @@ const MATH_FUNCTIONS = /* @__PURE__ */ new Set([
 	"max",
 	"clamp"
 ]);
-/** Evaluates a math function's arguments: `+ - * /` over numbers and
-*  absolute dimensions, nested `calc()`, `min()`, `max()` and `clamp()`. */
-function evaluate(values) {
-	let at = 0;
-	const operator = (...ops) => {
-		const value = values[at];
-		if (value?.kind === "token" && ops.includes(value.text)) {
-			at += 1;
-			return value.text;
-		}
+const operatorOf = (value) => value?.kind === "token" && value.token.type === "delim" && "+-*/".includes(value.token.value) ? value.token.value : void 0;
+/**
+* A math function's argument read as CSS calculation syntax, or what is out
+* of place: `+` and `-` need whitespace on both sides, every operator needs a
+* value on each side, and two values need an operator between them.
+*/
+function readCalculation(values) {
+	let start = 0;
+	let end = values.length;
+	while (start < end && isSpace(values[start])) start += 1;
+	while (end > start && isSpace(values[end - 1])) end -= 1;
+	if (start === end) return { invalid: "a calculation needs a value" };
+	let at = start;
+	const skipSpace = () => {
+		while (at < end && isSpace(values[at])) at += 1;
 	};
-	function factor() {
+	const operand = () => {
+		skipSpace();
 		const value = values[at];
+		if (at >= end || operatorOf(value) !== void 0) return { invalid: "an operator needs a value on each side" };
 		at += 1;
-		if (value === void 0) return void 0;
-		if (value.kind === "numeric") {
-			if (value.unit === "") return {
-				type: "number",
-				value: value.value
-			};
-			const unit = ABSOLUTE_UNITS.get(value.unit);
-			return unit && {
-				type: unit[0],
-				value: value.value * unit[1]
-			};
-		}
-		if (value.kind === "function") return mathFunction(value);
-	}
-	function product() {
-		let left = factor();
-		for (let op = operator("*", "/"); op && left; op = operator("*", "/")) {
-			const right = factor();
-			if (right === void 0) return void 0;
-			if (op === "*") {
-				if (left.type !== "number" && right.type !== "number") return void 0;
-				left = {
-					type: left.type === "number" ? right.type : left.type,
-					value: left.value * right.value
-				};
-			} else if (right.type === "number") left = {
-				type: left.type,
-				value: left.value / right.value
-			};
-			else if (right.type === left.type) left = {
-				type: "number",
-				value: left.value / right.value
-			};
-			else return;
-		}
-		return left;
-	}
-	function sum() {
-		let left = product();
-		for (let op = operator("+", "-"); op && left; op = operator("+", "-")) {
-			const right = product();
-			if (right === void 0 || right.type !== left.type) return void 0;
+		return { value };
+	};
+	const product = () => {
+		let left = operand();
+		while (!("invalid" in left)) {
+			const before = at;
+			skipSpace();
+			const op = operatorOf(values[at]);
+			if (op !== "*" && op !== "/") {
+				at = before;
+				return left;
+			}
+			at += 1;
+			const right = operand();
+			if ("invalid" in right) return right;
 			left = {
-				type: left.type,
-				value: op === "+" ? left.value + right.value : left.value - right.value
+				op,
+				left,
+				right
 			};
 		}
 		return left;
+	};
+	let sum = product();
+	while (!("invalid" in sum) && at < end) {
+		const spaced = isSpace(values[at]);
+		skipSpace();
+		const op = operatorOf(values[at]);
+		if (op !== "+" && op !== "-") return { invalid: "two values need an operator between them" };
+		if (at + 1 >= end) return { invalid: "an operator needs a value on each side" };
+		if (!spaced || !isSpace(values[at + 1])) return { invalid: "\"+\" and \"-\" need whitespace on both sides" };
+		at += 1;
+		const right = product();
+		if ("invalid" in right) return right;
+		sum = {
+			op,
+			left: sum,
+			right
+		};
 	}
-	const result = sum();
-	return at === values.length ? result : void 0;
+	return sum;
 }
+/** Both sides evaluated, so a broken expression on either side is reported
+*  even where the other cannot be evaluated. */
+function combine(op, left, right) {
+	if (left !== void 0 && "invalid" in left) return left;
+	if (right !== void 0 && "invalid" in right) return right;
+	if (left === void 0 || right === void 0) return void 0;
+	if (op === "+" || op === "-") {
+		if (left.type !== right.type) return void 0;
+		return {
+			type: left.type,
+			value: op === "+" ? left.value + right.value : left.value - right.value
+		};
+	}
+	if (op === "*") {
+		if (left.type !== "number" && right.type !== "number") return void 0;
+		return {
+			type: left.type === "number" ? right.type : left.type,
+			value: left.value * right.value
+		};
+	}
+	if (right.type === "number") return {
+		type: left.type,
+		value: left.value / right.value
+	};
+	return right.type === left.type ? {
+		type: "number",
+		value: left.value / right.value
+	} : void 0;
+}
+/** The calculation constants, by their ASCII-lowercase name. */
+const CONSTANTS = /* @__PURE__ */ new Map([
+	["e", Math.E],
+	["pi", Math.PI],
+	["infinity", Infinity],
+	["-infinity", -Infinity],
+	["nan", NaN]
+]);
+function evaluate(node) {
+	if ("op" in node) return combine(node.op, evaluate(node.left), evaluate(node.right));
+	const { value } = node;
+	if (value.kind === "block") return mathFunction(value);
+	const { token } = value;
+	if (token.type === "number") return {
+		type: "number",
+		value: token.number
+	};
+	if (token.type === "dimension") {
+		const unit = ABSOLUTE_UNITS.get(asciiLower(token.value));
+		return unit && {
+			type: unit[0],
+			value: token.number * unit[1]
+		};
+	}
+	const constant = token.type === "ident" ? CONSTANTS.get(asciiLower(token.value)) : void 0;
+	return constant === void 0 ? void 0 : {
+		type: "number",
+		value: constant
+	};
+}
+/** `calc()`, `min()`, `max()` and `clamp()` over numbers and absolute
+*  dimensions, nested ones and parenthesized blocks included. */
 function mathFunction(value) {
-	if (value.name === "calc" || value.name === "") return evaluate(value.args);
-	if (!MATH_FUNCTIONS.has(value.name)) return void 0;
+	const name = functionName(value);
+	if (name === void 0 || name !== "" && !MATH_FUNCTIONS.has(name)) return;
+	const parts = [[]];
+	for (const arg of value.children) if (arg.kind === "token" && arg.token.type === ",") parts.push([]);
+	else parts[parts.length - 1].push(arg);
+	if ((name === "" || name === "calc") && parts.length > 1) return { invalid: "commas separate only the arguments of min(), max() and clamp()" };
 	const args = [];
-	let start = 0;
-	for (let at = 0; at <= value.args.length; at += 1) {
-		const arg = value.args[at];
-		if (at === value.args.length || arg?.kind === "token" && arg.text === ",") {
-			const computed = evaluate(value.args.slice(start, at));
-			if (computed === void 0) return void 0;
-			args.push(computed);
-			start = at + 1;
-		}
+	let unsupported = false;
+	for (const part of parts) {
+		const calculation = readCalculation(part);
+		if ("invalid" in calculation) return calculation;
+		const computed = evaluate(calculation);
+		if (computed !== void 0 && "invalid" in computed) return computed;
+		if (computed === void 0) unsupported = true;
+		else args.push(computed);
 	}
-	const type = args[0]?.type;
-	if (type === void 0 || args.some((arg) => arg.type !== type)) return;
+	if (unsupported) return void 0;
+	if (name === "" || name === "calc") return args[0];
+	const type = args[0].type;
+	if (args.some((arg) => arg.type !== type)) return void 0;
 	const values = args.map((arg) => arg.value);
-	if (value.name === "min") return {
+	if (name === "min") return {
 		type,
 		value: Math.min(...values)
 	};
-	if (value.name === "max") return {
+	if (name === "max") return {
 		type,
 		value: Math.max(...values)
 	};
@@ -349,32 +692,39 @@ const ACCEPTING_SYNTAX_TYPES = /* @__PURE__ */ new Map([
 * `min()`, `max()`, `clamp()`) over numbers and absolute units, such as
 * `calc(1px / 1px)` → `1`. The browser computes the same value, and CSS
 * tooling that cannot parse the function in that position reads the result.
-* `undefined` for anything else, and for the universal syntax, whose initial
-* value is kept as written.
+* The syntax's alternatives are tried in their declared order, and an
+* `<integer>` one rounds a number result to the nearest integer, halves
+* toward positive infinity, as CSS does. `undefined` for anything else, and
+* for the universal syntax, whose initial value is kept as written.
 */
 function foldInitialValue(syntax, initialValue) {
 	if (syntax.trim() === "*") return void 0;
-	const values = parse(initialValue);
-	const only = values?.length === 1 ? values[0] : void 0;
-	if (only?.kind !== "function" || !MATH_FUNCTIONS.has(only.name)) return;
+	const values = parse(initialValue).filter((value) => !isSpace(value));
+	const only = values.length === 1 ? values[0] : void 0;
+	if (only?.kind !== "block" || !MATH_FUNCTIONS.has(functionName(only) ?? "")) return;
 	const computed = mathFunction(only);
 	if (computed === void 0) return void 0;
-	const accepted = syntax.split("|").some((component) => {
+	if ("invalid" in computed) return {
+		kind: "invalid",
+		reason: computed.invalid
+	};
+	if (!Number.isFinite(computed.value)) return { kind: "not-finite" };
+	for (const component of syntax.split("|")) {
 		const type = /<([a-z-]+)>/.exec(component)?.[1];
-		if (type === void 0 || ACCEPTING_SYNTAX_TYPES.get(type) !== computed.type) return false;
-		return type !== "integer" || Number.isInteger(computed.value);
-	});
+		if (type === void 0 || ACCEPTING_SYNTAX_TYPES.get(type) !== computed.type) continue;
+		return {
+			kind: "folded",
+			text: type === "integer" ? BigInt(Math.round(computed.value)).toString() : written(computed)
+		};
+	}
 	return {
-		text: `${Number(computed.value.toPrecision(12))}${CANONICAL_UNITS[computed.type]}`,
-		accepted,
+		kind: "rejected",
+		text: written(computed),
 		type: computed.type
 	};
 }
-/** An initial value folded when its syntax accepts the computed value, and
-*  unchanged otherwise: what a registration records and emits. */
-function registeredInitialValue(syntax, initialValue) {
-	const folded = foldInitialValue(syntax, initialValue);
-	return folded?.accepted ? folded.text : initialValue;
+function written(computed) {
+	return `${Number(computed.value.toPrecision(12))}${CANONICAL_UNITS[computed.type]}`;
 }
 //#endregion
-export { SHORTHAND_PROPERTIES, UNITLESS_PROPERTIES, dependsOnContext, foldInitialValue, isUnitlessProperty, registeredInitialValue, substitutesValue };
+export { SHORTHAND_PROPERTIES, UNITLESS_PROPERTIES, componentValues, decodedIdentifier, dependsOnContext, foldInitialValue, identifierAt, isSpace, isUnitlessProperty, someValue, substitutesValue, tokenize, variableReads };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/properties",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "CSS property classification data — unitless set, shorthand list, type re-exports",
   "keywords": [
     "animus",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "build": "bun run build:ts",
-    "build:ts": "tsdown && tsc -p tsconfig.build.json",
+    "build:ts": "tsdown",
     "compile": "tsc --noEmit"
   },
   "dependencies": {},

package/dist/registration-values.d.ts

@@ -1,41 +0,0 @@
-/**
- * Reads a custom-property registration's initial value as CSS component
- * values: what it substitutes, which units make it depend on context, and
- * what an all-absolute math function computes to. Quoted text and `url()`
- * stay text.
- */
-/** Whether `value` substitutes another value (`var()`, `env()`, `attr()`),
- *  which no registration's initial value may. Unparseable text is read as
- *  substituting when it names one of them. */
-export declare function substitutesValue(value: string): boolean;
-/** Whether `value` uses a font- or container-relative unit, inside math
- *  functions too, which makes a typed initial value depend on context. */
-export declare function dependsOnContext(value: string): boolean;
-/** What an all-absolute math expression computes to. */
-interface Computed {
-    type: 'number' | 'length' | 'angle' | 'time' | 'resolution';
-    value: number;
-}
-/** A math initial value folded to its computed value. */
-export interface FoldedInitialValue {
-    /** The computed value as CSS text, such as `1`, `16px` or `90deg`. */
-    text: string;
-    /** Whether the registration's syntax accepts it. */
-    accepted: boolean;
-    /** The computed value's data type, for a diagnostic. */
-    type: Computed['type'];
-}
-/**
- * The computed value of an initial value that is one math function (`calc()`,
- * `min()`, `max()`, `clamp()`) over numbers and absolute units, such as
- * `calc(1px / 1px)` → `1`. The browser computes the same value, and CSS
- * tooling that cannot parse the function in that position reads the result.
- * `undefined` for anything else, and for the universal syntax, whose initial
- * value is kept as written.
- */
-export declare function foldInitialValue(syntax: string, initialValue: string): FoldedInitialValue | undefined;
-/** An initial value folded when its syntax accepts the computed value, and
- *  unchanged otherwise: what a registration records and emits. */
-export declare function registeredInitialValue(syntax: string, initialValue: string): string;
-export {};
-//# sourceMappingURL=registration-values.d.ts.map

package/dist/registration-values.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"registration-values.d.ts","sourceRoot":"","sources":["../src/registration-values.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAyFH;;8CAE8C;AAC9C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAQvD;AAuBD;0EAC0E;AAC1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAQvD;AAED,wDAAwD;AACxD,UAAU,QAAQ;IAChB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAwID,yDAAyD;AACzD,MAAM,WAAW,kBAAkB;IACjC,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,GACnB,kBAAkB,GAAG,SAAS,CAyBhC;AAED;kEACkE;AAClE,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,GACnB,MAAM,CAGR"}

package/dist/shorthands.d.ts

@@ -1,5 +0,0 @@
-/**
- * Covers only shorthands registered in the prop system, not all CSS shorthands.
- */
-export declare const SHORTHAND_PROPERTIES: readonly ['border', 'borderTop', 'borderBottom', 'borderLeft', 'borderRight', 'borderWidth', 'borderStyle', 'borderColor', 'background', 'flex', 'margin', 'padding', 'transition', 'gap', 'grid', 'gridArea', 'gridColumn', 'gridRow', 'gridTemplate', 'overflow'];
-//# sourceMappingURL=shorthands.d.ts.map

package/dist/shorthands.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shorthands.d.ts","sourceRoot":"","sources":["../src/shorthands.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,oBAAoB,YAC/B,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,EACT,cAAc,EACd,UAAU,CACF,CAAC"}

package/dist/unitless.d.ts

@@ -1,4 +0,0 @@
-export declare const UNITLESS_PROPERTIES: Set<string>;
-/** Accepts either spelling: `line-height` or `lineHeight`. */
-export declare function isUnitlessProperty(property: string): boolean;
-//# sourceMappingURL=unitless.d.ts.map

package/dist/unitless.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"unitless.d.ts","sourceRoot":"","sources":["../src/unitless.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,aAgD9B,CAAC;AAUH,8DAA8D;AAC9D,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAE5D"}