@animus-ui/properties 0.1.18 → 0.1.20

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 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';
 //# 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"}
+{"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"}

package/dist/index.js

@@ -83,4 +83,298 @@ function isUnitlessProperty(property) {
 	return UNITLESS_PROPERTY_SPELLINGS.has(property);
 }
 //#endregion
-export { SHORTHAND_PROPERTIES, UNITLESS_PROPERTIES, isUnitlessProperty };
+//#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;
+				}
+				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
+			});
+			at += ident?.length ?? 1;
+		}
+		return nested ? void 0 : out;
+	}
+	return values(false);
+}
+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;
+}
+function some(values, test) {
+	return values.some((value) => test(value) || value.kind === "function" && some(value.args, test));
+}
+const SUBSTITUTIONS = /* @__PURE__ */ new Set([
+	"var",
+	"env",
+	"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. */
+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));
+}
+const CONTEXT_UNITS = /* @__PURE__ */ new Set([
+	"em",
+	"rem",
+	"ex",
+	"rex",
+	"cap",
+	"rcap",
+	"ch",
+	"rch",
+	"ic",
+	"ric",
+	"lh",
+	"rlh",
+	"cqw",
+	"cqh",
+	"cqi",
+	"cqb",
+	"cqmin",
+	"cqmax"
+]);
+/** 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));
+}
+/** Absolute units, by the canonical unit each converts to. */
+const ABSOLUTE_UNITS = /* @__PURE__ */ new Map([
+	["px", ["length", 1]],
+	["cm", ["length", 96 / 2.54]],
+	["mm", ["length", 96 / 25.4]],
+	["q", ["length", 96 / 101.6]],
+	["in", ["length", 96]],
+	["pt", ["length", 4 / 3]],
+	["pc", ["length", 16]],
+	["deg", ["angle", 1]],
+	["grad", ["angle", .9]],
+	["rad", ["angle", 180 / Math.PI]],
+	["turn", ["angle", 360]],
+	["s", ["time", 1]],
+	["ms", ["time", .001]],
+	["dppx", ["resolution", 1]],
+	["x", ["resolution", 1]],
+	["dpi", ["resolution", 1 / 96]],
+	["dpcm", ["resolution", 2.54 / 96]]
+]);
+const CANONICAL_UNITS = {
+	number: "",
+	length: "px",
+	angle: "deg",
+	time: "s",
+	resolution: "dppx"
+};
+const MATH_FUNCTIONS = /* @__PURE__ */ new Set([
+	"calc",
+	"min",
+	"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;
+		}
+	};
+	function factor() {
+		const value = values[at];
+		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;
+			left = {
+				type: left.type,
+				value: op === "+" ? left.value + right.value : left.value - right.value
+			};
+		}
+		return left;
+	}
+	const result = sum();
+	return at === values.length ? result : void 0;
+}
+function mathFunction(value) {
+	if (value.name === "calc" || value.name === "") return evaluate(value.args);
+	if (!MATH_FUNCTIONS.has(value.name)) return void 0;
+	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;
+		}
+	}
+	const type = args[0]?.type;
+	if (type === void 0 || args.some((arg) => arg.type !== type)) return;
+	const values = args.map((arg) => arg.value);
+	if (value.name === "min") return {
+		type,
+		value: Math.min(...values)
+	};
+	if (value.name === "max") return {
+		type,
+		value: Math.max(...values)
+	};
+	if (values.length !== 3) return void 0;
+	const [low, middle, high] = values;
+	return {
+		type,
+		value: Math.max(low, Math.min(middle, high))
+	};
+}
+/** The data type each folded value is written as, by syntax type. */
+const ACCEPTING_SYNTAX_TYPES = /* @__PURE__ */ new Map([
+	["number", "number"],
+	["integer", "number"],
+	["length", "length"],
+	["length-percentage", "length"],
+	["angle", "angle"],
+	["time", "time"],
+	["resolution", "resolution"]
+]);
+/**
+* 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.
+*/
+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 computed = mathFunction(only);
+	if (computed === void 0) return void 0;
+	const accepted = syntax.split("|").some((component) => {
+		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);
+	});
+	return {
+		text: `${Number(computed.value.toPrecision(12))}${CANONICAL_UNITS[computed.type]}`,
+		accepted,
+		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;
+}
+//#endregion
+export { SHORTHAND_PROPERTIES, UNITLESS_PROPERTIES, dependsOnContext, foldInitialValue, isUnitlessProperty, registeredInitialValue, substitutesValue };

package/dist/registration-values.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/properties",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "CSS property classification data — unitless set, shorthand list, type re-exports",
   "keywords": [
     "animus",