@cssints/css-grammar 0.0.0-stage → 0.1.0

package/dist/query.d.mts

@@ -0,0 +1,34 @@
+import { Consume, Matches, Parse, Stuck, Unexpected } from "./css.mjs";
+//#region src/query.d.ts
+export declare const ENTRY: {
+  readonly media: "media-query-list";
+  readonly container: "container-condition";
+  readonly supports: "supports-condition";
+};
+export type QueryKind = keyof typeof ENTRY;
+type Sp<S extends string> = Colon<S> extends (infer C extends string) ? Slash<C> : never;
+type Colon<S extends string> = S extends `${infer A}:${infer B}` ? `${A} : ${Colon<B>}` : S;
+type Slash<S extends string> = S extends `${infer A}/${infer B}` ? `${A} / ${Slash<B>}` : S;
+type Trim<S extends string> = S extends ` ${infer R}` ? Trim<R> : S;
+/** The query, or a message naming the bad token and the grammar (as `Valid` does for a property). */
+export type ValidQuery<K extends QueryKind, S extends string> = Matches<`<${(typeof ENTRY)[K]}>`, Sp<S>> extends true ? S : S extends string ? Message<K, (typeof ENTRY)[K], S> : never;
+type Message<K extends string, E extends string, S extends string> = `@${K}: ${Unexpected<Stuck<Trim<Sp<S>> | Consume<Parse<`<${E}>`>, Trim<Sp<S>>>>>} in "${S}", grammar <${E}>`;
+type Check<K extends QueryKind, Q extends readonly string[]> = { [I in keyof Q]: ValidQuery<K, Q[I]>; };
+/**
+ * A condition constructor: an object of queries gives an object of `R`, several queries a tuple of `R`, one query `R`.
+ * The one-query overload comes last: when nothing fits, TypeScript shows the message of the last overload, and the
+ * bad query of a single string is the common case. A bad query of an object is marked in place.
+ */
+export interface Condition<K extends QueryKind, R> {
+  <const O extends Record<string, string>>(queries: { [P in keyof O]: ValidQuery<K, O[P]>; }): { [P in keyof O]: R; };
+  <const Q extends readonly [string, string, ...string[]]>(...queries: Check<K, Q>): { [I in keyof Q]: R; };
+  <const Q extends string>(query: ValidQuery<K, Q>): R;
+}
+type Open = {
+  ")": "(";
+  "]": "[";
+};
+type Balanced<S extends string, Stack extends string = ""> = S extends `${infer C}${infer R}` ? C extends "(" | "[" ? Balanced<R, `${C}${Stack}`> : C extends ")" | "]" ? Stack extends `${Open[C]}${infer Rest}` ? Balanced<R, Rest> : false : C extends '"' | "'" ? R extends `${string}${C}${infer After}` ? Balanced<After, Stack> : false : Balanced<R, Stack> : Stack extends "" ? true : false;
+/** The selector of `global()`, or a message: not empty, brackets and quotes balanced. */
+export type ValidSelector<S extends string> = Trim<S> extends "" ? "global(): the selector is empty" : Balanced<S> extends true ? S : `global(): unbalanced brackets or quotes in "${S}"`;
+//#endregion

package/dist/query.mjs

@@ -0,0 +1,8 @@
+//#region src/query.ts
+const ENTRY = {
+	media: "media-query-list",
+	container: "container-condition",
+	supports: "supports-condition"
+};
+//#endregion
+export { ENTRY };

package/dist/rules.d.mts

@@ -0,0 +1,6 @@
+import { RuleError } from "./errors.mjs";
+import { Effect } from "effect";
+//#region src/rules.d.ts
+export declare function violation(p: string, v: string): RuleError | undefined;
+export declare const checkRules: (p: string, v: string) => Effect.Effect<string, RuleError, never>;
+//#endregion

package/dist/rules.mjs

@@ -0,0 +1,218 @@
+import { RuleError } from "./errors.mjs";
+import { matches } from "./twin-core.mjs";
+import { Effect, Formatter } from "effect";
+//#region src/rules.ts
+const splitList = (v) => v.match(/(?:"[^"]*"|'[^']*'|\([^()]*(?:\([^()]*\)[^()]*)*\)|[^,"'()])+/g)?.map((s) => s.trim()) ?? [];
+const CSS_WIDE = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"revert-rule"
+]);
+const strings = (v) => [...v.matchAll(/"([^"]*)"|'([^']*)'/g)].map((m) => m[1] ?? m[2]);
+const negative = (v) => {
+	for (let p = ""; p !== v;) [p, v] = [v, v.replace(/\([^()]*\)/g, "")];
+	return /(^|[\s,])-\.?\d/.test(v);
+};
+const words = (v) => v.toLowerCase().split(/[\s(),]+/).filter(Boolean);
+function gridAreas(v) {
+	const grid = strings(v).map((s) => {
+		const cells = [];
+		for (const [, name, nul, trash] of s.matchAll(/([\w\u0080-\uffff-]+)|(\.+)|\s+|(.)/gu)) {
+			if (trash) return `the string "${s}" has a trash token ${Formatter.formatJson(trash)}`;
+			if (name || nul) cells.push(name ?? "");
+		}
+		return cells;
+	});
+	const bad = grid.find((r) => typeof r === "string");
+	if (bad) return `${bad} (css-grid-2 §7.3)`;
+	const rows = grid;
+	if (rows.some((r) => !r.length || r.length !== rows[0].length)) return `every string needs the same number, at least one, of cell tokens (css-grid-2 §7.3)`;
+	const areas = /* @__PURE__ */ new Map();
+	rows.forEach((r, y) => r.forEach((n, x) => n && areas.set(n, [...areas.get(n) ?? [], [y, x]])));
+	for (const [n, cs] of areas) {
+		const ys = cs.map((c) => c[0]), xs = cs.map((c) => c[1]);
+		if ((Math.max(...ys) - Math.min(...ys) + 1) * (Math.max(...xs) - Math.min(...xs) + 1) !== cs.length) return `the area "${n}" is not a rectangle (css-grid-2 §7.3)`;
+	}
+}
+function gridLine(v) {
+	for (const part of v.split("/")) {
+		const t = words(part);
+		const spans = t.filter((w) => w === "span").length;
+		if (spans > 1 || spans === 1 && t.length === 1) return `"${part.trim()}" uses span as a line name, which the <custom-ident> excludes (css-grid-2 §8.3)`;
+		const ints = t.filter((w) => /^[+-]?\d+$/.test(w)).map(Number);
+		if (ints.includes(0) || spans && ints.some((n) => n < 1)) return `"${part.trim()}" has an integer that is zero, or negative in a span (css-grid-2 §8.3)`;
+	}
+}
+const subgridAutoFill = (v) => /^\s*subgrid\b/.test(v) && (v.match(/repeat\(\s*auto-fill/g) ?? []).length > 1 ? `auto-fill is only valid once on a subgrid (css-grid-2 §7.2.3.2)` : void 0;
+const counterName = (v) => v.trim().toLowerCase() !== "none" && words(v).includes("none") ? `"none" cannot be a counter name (css-lists-3 §4)` : void 0;
+const svgRadius = (v) => negative(v) ? `a negative radius is illegal (svg2 §7.3-7.5)` : void 0;
+const strokeLength = (v) => negative(v) ? `negative values are invalid (fill-stroke-3 §4.2.1, §4.3.1)` : void 0;
+function pathData(d) {
+	const NUMBER = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/y, FLAG = /[01]/y, SEP = /\s*,?\s*/y, ARGS = {
+		m: 2,
+		l: 2,
+		h: 1,
+		v: 1,
+		c: 6,
+		s: 4,
+		q: 4,
+		t: 2,
+		a: 7,
+		z: 0
+	};
+	let i = 0;
+	const eat = (r) => (r.lastIndex = i, r.test(d) && (i = r.lastIndex, true));
+	eat(SEP);
+	if (i === d.length) return true;
+	if (!/[Mm]/.test(d[i])) return false;
+	while (i < d.length) {
+		const n = ARGS[d[i++].toLowerCase()];
+		if (n === void 0) return false;
+		eat(SEP);
+		if (n === 0) continue;
+		do
+			for (let k = 0; k < n; k++) {
+				if (!eat(n === 7 && (k === 3 || k === 4) ? FLAG : NUMBER)) return false;
+				eat(SEP);
+			}
+		while (i < d.length && !/[A-Za-z]/.test(d[i]));
+	}
+	return true;
+}
+const openTypeTags = (v) => {
+	const bad = strings(v).find((s) => !/^[\x20-\x7e]{4}$/.test(s));
+	if (bad !== void 0) return `"${bad}" is not a four-character tag of U+20-7E (css-fonts-4 §6.12, §8.2)`;
+};
+const rules = {
+	"grid-template-areas": gridAreas,
+	"grid-template": gridAreas,
+	grid: gridAreas,
+	"grid-row": gridLine,
+	"grid-column": gridLine,
+	"grid-row-start": gridLine,
+	"grid-row-end": gridLine,
+	"grid-column-start": gridLine,
+	"grid-column-end": gridLine,
+	"grid-area": gridLine,
+	"grid-template-rows": subgridAutoFill,
+	"grid-template-columns": subgridAutoFill,
+	"counter-reset": counterName,
+	"counter-set": counterName,
+	"counter-increment": counterName,
+	"container-name"(v) {
+		const bad = v.trim().toLowerCase() !== "none" && words(v).find((w) => [
+			"none",
+			"and",
+			"not",
+			"or"
+		].includes(w));
+		if (bad) return `"${bad}" cannot be a container name (css-conditional-5 §5.2)`;
+	},
+	"view-transition-class"(v) {
+		if (v.trim().toLowerCase() !== "none" && words(v).includes("none")) return `"none" cannot be combined with another class (css-view-transitions-2 §10.3)`;
+	},
+	"color-scheme"(v) {
+		const t = words(v);
+		if (t.length > 1 && t.includes("normal")) return `"normal" cannot be combined with schemes (css-color-adjust-1 §2.2)`;
+		if (t.some((w, i) => w === "only" && i > 0 && i < t.length - 1) || t.filter((w) => w === "only").length > 1) return `"only" is a keyword, not a scheme name, and goes first or last (css-color-adjust-1 §2.2)`;
+	},
+	"font-feature-settings": openTypeTags,
+	"font-variation-settings": openTypeTags,
+	"font-language-override"(v) {
+		const long = strings(v).find((s) => s.length > 4);
+		if (long !== void 0) return `"${long}" is longer than an OpenType language system tag, four characters (css-fonts-4)`;
+	},
+	font: (v) => rules["font-family"](splitList(v).slice(1).join(", ")),
+	r: svgRadius,
+	rx: svgRadius,
+	ry: svgRadius,
+	"stroke-miterlimit": (v) => negative(v) ? `a negative miter limit is illegal (svg2 §13.5.5)` : void 0,
+	"stroke-width": strokeLength,
+	"stroke-dasharray": strokeLength,
+	transition(v) {
+		const items = splitList(v);
+		if (items.length > 1 && items.some((t) => t.replace(/\([^)]*\)/g, "").split(/\s+/).includes("none"))) return `"none" is only valid when it is the only transition, this list has ${items.length} (css-transitions-1 §2.5)`;
+		for (const item of items) {
+			const times = item.replace(/\([^)]*\)/g, "").split(/\s+/).filter((t) => matches("<time>", t));
+			if (times.length === 2 && times.every((t) => t.startsWith("-"))) return `one of the times in "${item}" is the duration, which cannot be negative (css-transitions-1 §2.2, §2.5)`;
+			const taken = /* @__PURE__ */ new Set();
+			for (const t of item.match(/[\w-]+\([^)]*\)|\S+/g) ?? []) {
+				const slot = ["<easing-function>", "<transition-behavior-value>"].find((g) => matches(g, t));
+				if (slot && !taken.has(slot)) taken.add(slot);
+				else if (slot && (t.includes("(") || taken.has("ident"))) return `"${t}" has no place left in "${item}": an earlier keyword took the ${slot} (css-values-4 §4.2)`;
+				else if (t === "none" || matches("<single-transition-property>", t)) taken.add("ident");
+			}
+		}
+	},
+	animation(v) {
+		const slots = [
+			"<easing-function>",
+			"<single-animation-iteration-count>",
+			"<single-animation-direction>",
+			"<single-animation-fill-mode>",
+			"<single-animation-play-state>"
+		];
+		for (const item of splitList(v)) {
+			const taken = /* @__PURE__ */ new Set();
+			for (const t of item.match(/[\w-]+\([^)]*\)|\S+/g) ?? []) {
+				const slot = slots.find((g) => matches(g, t));
+				if (!slot) continue;
+				if (!taken.has(slot)) taken.add(slot);
+				else if (t.includes("(") || taken.has("name") || !matches("<keyframes-name>", t)) return `"${t}" has no place left in "${item}": an earlier keyword took the ${slot} (css-values-4 §4.2)`;
+				else taken.add("name");
+			}
+		}
+	},
+	"font-family"(v) {
+		const items = splitList(v);
+		for (const item of items) {
+			if (/^["']/.test(item)) continue;
+			const ids = item.split(/\s+/);
+			if (ids.length === 1 && matches("<generic-family>", ids[0].toLowerCase())) continue;
+			if (items.length === 1 && ids.length === 1 && CSS_WIDE.has(ids[0].toLowerCase())) continue;
+			const bad = ids.find((id) => id.toLowerCase() === "default" || CSS_WIDE.has(id.toLowerCase()) || matches("<generic-family>", id.toLowerCase()));
+			if (bad) return `the keyword "${bad}" cannot be (part of) the unquoted family name "${item}", quote the name (css-fonts-4 §2.1.1)`;
+		}
+	}
+};
+const fnRules = [
+	(_, v) => {
+		const m = /\b(grayscale|sepia|saturate|opacity|invert|brightness|contrast|blur)\(\s*-/.exec(v);
+		if (m) return `${m[1]}() cannot take a negative value (filter-effects-1 §6.1)`;
+	},
+	(_, v) => {
+		for (const m of v.matchAll(/\bpath\(\s*(?:(?:nonzero|evenodd)\s*,\s*)?(?:"([^"]*)"|'([^']*)')/g)) {
+			const d = m[1] ?? m[2];
+			if (!pathData(d)) return `"${d}" is not SVG path data (css-shapes-1 §3.1, svg2 §9.3.9)`;
+		}
+	},
+	(_, v) => {
+		for (const [f, n, pos] of v.matchAll(/steps\(\s*([+-]?\d+)\s*(?:,\s*([a-z-]+)\s*)?\)/g)) {
+			const min = pos === "jump-none" ? 2 : 1;
+			if (Number(n) < min) return `${f} needs at least ${min} step${min > 1 ? "s" : ""} (css-easing-2 §2.3)`;
+		}
+	},
+	(p, v) => {
+		if (v.includes("anchor-size(") && !/^((min-|max-)?(width|height|block-size|inline-size)|top|left|right|bottom|inset(-.+)?|margin(-.+)?)$/.test(p)) return `anchor-size() is only valid in sizing, inset and margin properties (css-anchor-position-1 §5)`;
+	}
+];
+function violation(p, v) {
+	let why = rules[p]?.(v);
+	for (const f of fnRules) why ??= f(p, v);
+	return why ? new RuleError({
+		message: `${p}: in "${v}", ${why}`,
+		property: p,
+		value: v,
+		reason: why
+	}) : void 0;
+}
+const checkRules = Effect.fnUntraced(function* (p, v) {
+	const error = violation(p, v);
+	if (error) return yield* error;
+	return v;
+});
+//#endregion
+export { checkRules, violation };

package/dist/selector.d.mts

@@ -0,0 +1,3 @@
+//#region src/selector.d.ts
+export declare function checkSelectorNow(sel: string): void;
+//#endregion

package/dist/selector.mjs

@@ -0,0 +1,79 @@
+import { InvalidValueError } from "./errors.mjs";
+//#region src/selector.ts
+const I = String.raw`(?:--|-?(?:[A-Za-z_\u0080-\uffff]|\\.))(?:[\w\u0080-\uffff-]|\\.)*`;
+const STR = String.raw`"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'`;
+const NS = String.raw`(?:(?:${I}|\*)?\|)?`;
+const y = (src) => new RegExp(src, "y");
+const TYPE = y(`${NS}(?:${I}|\\*)`);
+const SUB = y(String.raw`#${I}|\.${I}|\[\s*${NS}${I}\s*(?:[~|^$*]?=\s*(?:${STR}|${I})\s*[is]?\s*)?\]|::?${I}`);
+const COMB = y(String.raw`(?:\|\||[>+~])\s*`);
+const WS = y(String.raw`\s+`);
+const close = (s, i) => {
+	for (let depth = 0, j = i; j < s.length; j++) {
+		const c = s[j];
+		if (c === "\\") j++;
+		else if (c === "\"" || c === "'") {
+			const end = new RegExp(`${c}(?:[^${c}\\\\]|\\\\.)*${c}`, "y");
+			end.lastIndex = j;
+			const m = end.exec(s);
+			if (!m) return -1;
+			j += m[0].length - 1;
+		} else if (c === "(") depth++;
+		else if (c === ")" && !--depth) return /^\(\s*\)$/.test(s.slice(i, j + 1)) ? -1 : j + 1;
+	}
+	return -1;
+};
+function checkSelectorNow(sel) {
+	let i = 0;
+	const eat = (re) => {
+		re.lastIndex = i;
+		const m = re.exec(sel);
+		if (m) i += m[0].length;
+		return m?.[0];
+	};
+	const stop = () => {
+		const token = /^,|^[^\s,]*/.exec(sel.slice(i))[0];
+		throw new InvalidValueError({
+			message: `selector: ${token ? `unexpected "${token}"` : "unexpected end"} in "${sel}", expected <complex-selector-list>`,
+			property: "selector",
+			value: sel,
+			position: i,
+			expected: ["<complex-selector-list>"]
+		});
+	};
+	const compound = () => {
+		const start = i;
+		let pseudoElement = false;
+		eat(TYPE);
+		for (let s; s = eat(SUB);) {
+			if (pseudoElement && s[0] !== ":") {
+				i -= s.length;
+				return stop();
+			}
+			if (s.startsWith("::")) pseudoElement = true;
+			if (sel[i] === "(" && s[0] === ":") {
+				const end = close(sel, i);
+				if (end < 0) return stop();
+				i = end;
+			}
+		}
+		if (i === start) stop();
+	};
+	eat(WS);
+	for (;;) {
+		compound();
+		for (;;) {
+			const space = eat(WS);
+			if (i === sel.length) return;
+			if (sel[i] === ",") {
+				i++;
+				eat(WS);
+				break;
+			}
+			if (!eat(COMB) && !space) stop();
+			compound();
+		}
+	}
+}
+//#endregion
+export { checkSelectorNow };

package/dist/support.d.mts

@@ -0,0 +1,28 @@
+import { BrowsersError } from "./errors.mjs";
+import { Effect } from "effect";
+import { Identifier } from "@mdn/browser-compat-data";
+//#region src/support.d.ts
+export type Target = [agent: string, version: string];
+export declare const targets: (query?: string | undefined, path?: string | undefined) => Effect.Effect<Target[], BrowsersError, never>;
+declare global {
+  var __cssintsTargets: Target[] | undefined;
+}
+/**
+ * Sets the targets the functions here default to (cssints: those of the Vite root, before each evaluation).
+ * @param {Target[] | undefined} ts the targets, or `undefined` for those of process.cwd()
+ */
+export declare const useTargets: (ts: Target[] | undefined) => void;
+export declare const get: (key: string) => Identifier | undefined;
+export interface Warning {
+  feature: string;
+  key: string;
+  lacking: string[];
+}
+export declare const lackingOf: (key: string, ts?: Target[], exact?: boolean) => Target[];
+export declare const lacking: (key: string, ts?: Target[] | undefined, exact?: boolean | undefined) => Effect.Effect<Target[], never, never>;
+export declare function supportOf(p: string, v: string, ts?: Target[]): Warning[];
+export declare function browsers(lacking: string[]): string;
+export declare const support: (p: string, v: string, ts?: Target[] | undefined) => Effect.Effect<Warning[], never, never>;
+export declare const messageOf: (p: string, v: string, w: Warning) => string;
+export declare const message: (p: string, v: string, w: Warning) => Effect.Effect<string, never, never>;
+//#endregion

package/dist/support.mjs

@@ -0,0 +1,148 @@
+import { browsers as browsers$1 } from "./browsers.mjs";
+import { properties, syntaxes } from "./mdn.mjs";
+import { Effect } from "effect";
+//#region src/support.ts
+const bcd = process.getBuiltinModule("node:module").createRequire(import.meta.url)("@mdn/browser-compat-data");
+const props = properties;
+const syns = syntaxes;
+const BCD_NAME = {
+	chrome: "chrome",
+	and_chr: "chrome_android",
+	edge: "edge",
+	firefox: "firefox",
+	and_ff: "firefox_android",
+	safari: "safari",
+	ios_saf: "safari_ios",
+	opera: "opera",
+	op_mob: "opera_android",
+	samsung: "samsunginternet_android",
+	android: "webview_android",
+	ie: "ie"
+};
+const targets = Effect.fn("support.targets")(function* (query, path) {
+	return (yield* browsers$1(query, path)).map((t) => [t.split(" ")[0], t.split(" ")[1].split("-")[0]]).filter(([a]) => BCD_NAME[a]);
+});
+const DEFAULT = Effect.runSync(targets());
+const current = () => globalThis.__cssintsTargets ?? DEFAULT;
+/**
+* Sets the targets the functions here default to (cssints: those of the Vite root, before each evaluation).
+* @param {Target[] | undefined} ts the targets, or `undefined` for those of process.cwd()
+*/
+const useTargets = (ts) => {
+	globalThis.__cssintsTargets = ts;
+};
+const cmp = (a, b) => {
+	const x = a.replace("≤", "").split("."), y = b.split(".");
+	for (let i = 0; i < Math.max(x.length, y.length); i++) {
+		const d = Number(x[i] ?? 0) - Number(y[i] ?? 0);
+		if (d) return d;
+	}
+	return 0;
+};
+function supports(s, v, exact = false) {
+	if (!s) return true;
+	return [s].flat().some((x) => {
+		if (x.prefix || x.alternative_name || x.flags || exact && x.partial_implementation) return false;
+		const added = x.version_added;
+		if (typeof added !== "string") return added !== false;
+		if (added === "preview" || cmp(added, v) > 0) return false;
+		return !(typeof x.version_removed === "string" && cmp(x.version_removed, v) <= 0);
+	});
+}
+function reach(syntax, seen = /* @__PURE__ */ new Set()) {
+	for (const [, q, n] of syntax.matchAll(/<('?)([a-z-]+)(?:\(\))?'?(?: \[[^\]]*\])?>/g)) {
+		if (seen.has(q + n) || !q && n === "declaration") continue;
+		seen.add(q + n);
+		const g = q ? props[n] : syns[n] ?? syns[`${n}()`];
+		if (g) reach(g, seen);
+	}
+	return seen;
+}
+const get = (key) => key.split(".").reduce((n, k) => n?.[k] ?? n?.[k.toLowerCase()], bcd);
+const lacks = (c, on, exact = false) => on.filter(([a, ver]) => !supports(c.support[BCD_NAME[a]], ver, exact));
+const lackingOf = (key, ts = current(), exact = false) => {
+	const c = get(key)?.__compat;
+	return c ? lacks(c, ts, exact) : [];
+};
+const lacking = Effect.fnUntraced(function* (key, ts = current(), exact = false) {
+	return yield* Effect.sync(() => lackingOf(key, ts, exact));
+});
+const reached = /* @__PURE__ */ new Map();
+const reachOf = (p) => {
+	let r = reached.get(p);
+	if (!r) {
+		const all = [...reach(props[p] ?? "")];
+		r = [all.filter((t) => get(`css.types.${t}`)), [p, ...all.filter((q) => q.startsWith("'")).map((q) => q.slice(1))]];
+		reached.set(p, r);
+	}
+	return r;
+};
+const known = /* @__PURE__ */ new WeakMap();
+function supportOf(p, v, ts = current()) {
+	let byDecl = known.get(ts);
+	if (!byDecl) known.set(ts, byDecl = /* @__PURE__ */ new Map());
+	const key = `${p}\0${v}`;
+	let out = byDecl.get(key);
+	if (!out) byDecl.set(key, out = compute(p, v, ts));
+	return out;
+}
+function compute(p, v, ts) {
+	const pc = get(`css.properties.${p}`)?.__compat;
+	if (!pc) return [];
+	const [types, owners] = reachOf(p);
+	const found = [];
+	const code = v.replace(/"[^"]*"|'[^']*'/g, "");
+	for (const { 0: tok, 1: fn, index } of code.matchAll(/(?<![\w.#-])-?[A-Za-z_][\w-]*(\()?/g)) {
+		const k = fn ? tok.slice(0, -1) : tok;
+		const rel = tok === "from" ? /([a-z-]+)\(\s*$/.exec(code.slice(0, index))?.[1] : void 0;
+		const key = (rel ? [`css.types.color.${rel}.relative_syntax`] : [
+			...owners.map((q) => `css.properties.${q}.${fn ? `${k}_function` : k}`),
+			...fn ? owners.map((q) => `css.properties.${q}.${k}`) : [],
+			...fn ? [`css.types.${k}`] : [],
+			...types.map((t) => `css.types.${t}.${k}`)
+		]).find((x) => get(x)?.__compat);
+		if (key) found.push([fn ? `${k}()` : k, key]);
+	}
+	if (/"[^"]*"|'[^']*'/.test(v)) {
+		const key = owners.map((q) => `css.properties.${q}.string`).find((x) => get(x)?.__compat);
+		if (key) found.push(["string", key]);
+	}
+	const off = lacks(pc, ts).map((t) => t.join(" "));
+	const out = off.length ? [{
+		feature: p,
+		key: `css.properties.${p}`,
+		lacking: off
+	}] : [];
+	const on = ts.filter((t) => !off.includes(t.join(" ")));
+	for (const [feature, key] of found) {
+		const c = get(key)?.__compat;
+		if (!c || out.some((w) => w.key === key)) continue;
+		const lacking = lacks(c, on).map((t) => t.join(" "));
+		if (lacking.length) out.push({
+			feature,
+			key,
+			lacking
+		});
+	}
+	return out;
+}
+function browsers(lacking) {
+	const by = /* @__PURE__ */ new Map();
+	for (const t of lacking) {
+		const [a, ver] = t.split(" ");
+		by.set(a, [...by.get(a) ?? [], ver]);
+	}
+	return [...by].map(([a, vs]) => {
+		vs.sort(cmp);
+		return vs.length === 1 ? `${a} ${vs[0]}` : `${a} ${vs[0]}-${vs.at(-1)}`;
+	}).join(", ");
+}
+const support = Effect.fnUntraced(function* (p, v, ts = current()) {
+	return yield* Effect.sync(() => supportOf(p, v, ts));
+});
+const messageOf = (p, v, w) => `${p}: ${w.feature === p ? "the property" : `"${w.feature}"`} in "${v}" is not supported by ${browsers(w.lacking)} (${w.key})`;
+const message = Effect.fn("support.message")(function* (p, v, w) {
+	return yield* Effect.sync(() => messageOf(p, v, w));
+});
+//#endregion
+export { browsers, get, lacking, lackingOf, message, messageOf, support, supportOf, targets, useTargets };

package/dist/token.d.mts

@@ -0,0 +1,146 @@
+import { Consume, Matches, Parse, Stuck, Unexpected } from "./css.mjs";
+import { CSSStyleValue } from "./values.mjs";
+//#region src/token.d.ts
+/**
+ * Per token type, by the name of `token.<name>`:
+ * - `syntax`: the `@property` syntax, `<syntax>`, checked by the twin and by `ValidSyntax`;
+ * - `sentinels`: the typed-value types the token stands for in a property value (`⟨length⟩`, api-typed.ts);
+ * - `probes`: literals of the type that a build-time check puts in place of the token (one per sentinel), since the
+ *   recognizer reads text and a token is `var(--name)`;
+ * - `grammar`: the grammar of a value when it is not `<syntax>` (a list of shadows);
+ * - `property`: the `@property` syntax when `<syntax>` is not one `@property` takes: `*`, any value, which a browser
+ *   does not check or animate (an easing function, a shadow).
+ */
+export declare const TOKEN_TYPES: {
+  readonly color: {
+    readonly syntax: "color";
+    readonly sentinels: readonly ["color"];
+    readonly probes: readonly ["red"];
+  };
+  readonly length: {
+    readonly syntax: "length";
+    readonly sentinels: readonly ["length"];
+    readonly probes: readonly ["1px"];
+  };
+  readonly percentage: {
+    readonly syntax: "percentage";
+    readonly sentinels: readonly ["percentage"];
+    readonly probes: readonly ["1%"];
+  };
+  readonly lengthPercentage: {
+    readonly syntax: "length-percentage";
+    readonly sentinels: readonly ["length", "percentage"];
+    readonly probes: readonly ["1px", "1%"];
+  };
+  readonly number: {
+    readonly syntax: "number";
+    readonly sentinels: readonly ["number"];
+    readonly probes: readonly ["1"];
+  };
+  readonly integer: {
+    readonly syntax: "integer";
+    readonly sentinels: readonly ["integer"];
+    readonly probes: readonly ["1"];
+  };
+  readonly angle: {
+    readonly syntax: "angle";
+    readonly sentinels: readonly ["angle"];
+    readonly probes: readonly ["1deg"];
+  };
+  readonly time: {
+    readonly syntax: "time";
+    readonly sentinels: readonly ["time"];
+    readonly probes: readonly ["1s"];
+  };
+  readonly customIdent: {
+    readonly syntax: "custom-ident";
+    readonly sentinels: readonly ["custom-ident"];
+    readonly probes: readonly ["x"];
+  };
+  readonly resolution: {
+    readonly syntax: "resolution";
+    readonly sentinels: readonly ["resolution"];
+    readonly probes: readonly ["1dppx"];
+  };
+  readonly url: {
+    readonly syntax: "url";
+    readonly sentinels: readonly ["url"];
+    readonly probes: readonly ["url(x)"];
+  };
+  readonly image: {
+    readonly syntax: "image";
+    readonly sentinels: readonly ["image"];
+    readonly probes: readonly ["linear-gradient(red, blue)"];
+  };
+  readonly transformList: {
+    readonly syntax: "transform-list";
+    readonly sentinels: readonly ["transform-list"];
+    readonly probes: readonly ["translateX(1px)"];
+  };
+  readonly easingFunction: {
+    readonly syntax: "easing-function";
+    readonly sentinels: readonly ["easing-function"];
+    readonly probes: readonly ["ease"];
+    readonly property: "*";
+  };
+  readonly shadow: {
+    readonly syntax: "shadow";
+    readonly sentinels: readonly ["shadow"];
+    readonly probes: readonly ["0 0 red"];
+    readonly grammar: "<shadow>#";
+    readonly property: "*";
+  };
+};
+export type TokenType = keyof typeof TOKEN_TYPES;
+/**
+ * The grammar of a value of a token type.
+ * @param {string} syntax the `syntax` of the token type
+ * @returns {string} `<syntax>`, or the type's `grammar`
+ */
+export declare const grammarOf: (syntax: string) => string;
+/**
+ * DTCG `$type` to token type (createTokens, docs/API.md "Themes"). `fontWeight` is a number: its keywords become numbers.
+ * The other DTCG types (`fontFamily`, `strokeStyle`, `border`, `transition`, `gradient`, `typography`) are an error.
+ */
+export declare const DTCG_TYPES: {
+  readonly color: "color";
+  readonly dimension: "length";
+  readonly number: "number";
+  readonly duration: "time";
+  readonly fontWeight: "number";
+  readonly cubicBezier: "easingFunction";
+  readonly shadow: "shadow";
+};
+export type DtcgType = keyof typeof DTCG_TYPES;
+export type Syntax<K extends TokenType> = (typeof TOKEN_TYPES)[K]["syntax"];
+/** The grammar of a value of the token type `K` (`grammarOf`). */
+export type Grammar<K extends TokenType> = (typeof TOKEN_TYPES)[K] extends {
+  readonly grammar: infer G extends string;
+} ? G : `<${Syntax<K>}>`;
+type Trim<S extends string> = S extends ` ${infer R}` ? Trim<R> : S;
+/** The value, or a message naming the bad token, like `Valid` for a property. */
+export type ValidSyntax<K extends string, S extends string, G extends string = `<${K}>`> = Matches<G, S> extends true ? S : S extends string ? `${K}: ${Unexpected<Stuck<Trim<S> | Consume<Parse<G>, Trim<S>>>>} in "${S}", grammar ${G}` : never;
+/** `ValidSyntax` for a value of the token type `K`. */
+export type ValidToken<K extends TokenType, S extends string> = ValidSyntax<Syntax<K>, S, Grammar<K>>;
+/**
+ * A token: a Typed OM value of its type whose text is `var(--name)`. `Settable` is whether it has a name. `V` is the value of
+ * the definition as text, inferred by `createTokens` (`"#545434"`, `"{color.base}"` for an alias), `string` where nothing
+ * says; a covariant phantom, so a token of any `V` is a `Token<K, S>`.
+ */
+export interface Token<K extends TokenType = TokenType, Settable extends boolean = boolean, V extends string = string> extends CSSStyleValue<(typeof TOKEN_TYPES)[K]["sentinels"][number]> {
+  readonly "~token": K;
+  readonly "~settable": Settable;
+  readonly "~value": V;
+}
+/** `--name`, and whether the variable inherits (default true). */
+export interface TokenName {
+  var: string;
+  inherit?: boolean;
+}
+/** An inline style: what `style()` and `token.set()` give, for a `style` prop. */
+export type StyleObject = Record<string, string>;
+/** `token.<type>(initial, name?)`: with a name the token can be set, without one it is private. */
+export type TokenFn<K extends TokenType> = <const I extends string, const N extends string | TokenName | undefined = undefined>(initial: ValidToken<K, I>, name?: N) => Token<K, [N] extends [undefined] ? false : true>;
+/** `token.set(token, value)`: a style object with one custom property. A private token cannot be set. */
+export type TokenSetFn = <const K extends TokenType, const V extends string>(token: Token<K, true>, value: ValidToken<K, V>) => StyleObject;
+//#endregion