@master/css-binding 0.0.0-site.1793659883.g69c9aebcf628

package/dist/engine-js/src/session.js

@@ -0,0 +1,540 @@
+import { UTILITY_LAYERS } from "./program-model.js";
+import { compareText, wellFormed } from "./text.js";
+import { cssEscape, decodeProgram } from "./program.js";
+import { compareStoredRules } from "./order.js";
+import { declarationAnimationReferences, generateClassRules } from "./generate.js";
+var EngineError = class extends Error {
+	code;
+	constructor(code, message) {
+		super(message);
+		this.code = code;
+	}
+};
+function decode(program) {
+	const decoded = decodeProgram(program);
+	if (!decoded.ok) throw new EngineError(decoded.error.code, decoded.error.message);
+	return decoded.program;
+}
+const globalsOf = (emitted = {}) => ({
+	variables: new Map(Object.entries(emitted.variables ?? {})),
+	keyframes: new Map(Object.entries(emitted.keyframes ?? {}))
+});
+const sameCounts = (left, right) => left.size === right.size && [...left].every(([name, count]) => right.get(name) === count);
+const sameGlobals = (left, right) => sameCounts(left.variables, right.variables) && sameCounts(left.keyframes, right.keyframes);
+/** Counts are `u32`, which adding saturates. */
+const addCount = (count, added) => Math.min(count + added, 4294967295);
+function renderTheme(nodes, active) {
+	let text = "";
+	for (const node of nodes) if (node.type === "declaration") {
+		if (active.has(node.name)) text += `${cssEscape(`--${node.name}`)}:${node.value};`;
+	} else {
+		const body = renderTheme(node.children, active);
+		if (body) text += `${node.prelude}{${body}}`;
+	}
+	return text.endsWith(";") ? text.slice(0, -1) : text;
+}
+const containersShape = (containers) => containers.map(({ id, prelude }) => ({
+	id,
+	prelude
+}));
+/** A keyframe definition as the Rust engine serializes it: without its source, and absent options, empty lists and `false` omitted. */
+function keyframeDefinitionShape(definition) {
+	return {
+		id: definition.id,
+		name: definition.name,
+		text: definition.text,
+		...definition.containers.length ? { containers: containersShape(definition.containers) } : {},
+		...definition.native ? { native: true } : {},
+		...definition.safelisted ? { safelisted: true } : {},
+		...definition.dependencies.length ? { dependencies: [...definition.dependencies] } : {}
+	};
+}
+const samePlacement = (left, right) => left[0] === right[0] && left[1] === right[1] && left[2].length === right[2].length && left[2].every((container, index) => container.id === right[2][index].id && container.prelude === right[2][index].prelude);
+var Session = class {
+	program;
+	globals;
+	/** Per layer, rules in CSS order. */
+	layers = UTILITY_LAYERS.map(() => []);
+	/** Per layer, each rule by key with the number of classes that reference it. */
+	layerRules = UTILITY_LAYERS.map(() => /* @__PURE__ */ new Map());
+	classRules = /* @__PURE__ */ new Map();
+	/** Connected classes in request order, kept even while they generate no rules. */
+	classOrder = /* @__PURE__ */ new Set();
+	variableCounts = /* @__PURE__ */ new Map();
+	keyframeCounts = /* @__PURE__ */ new Map();
+	/** Counts the host emitted, which removing rules never goes below. */
+	variableFloors = /* @__PURE__ */ new Map();
+	keyframeFloors = /* @__PURE__ */ new Map();
+	/** The keyframes rules the host has, in order. */
+	keyframeTexts = [];
+	themeVariableNames = [];
+	themeText;
+	themeDirty = false;
+	batchDepth = 0;
+	disposed = false;
+	constructor(program, globals) {
+		this.program = program;
+		this.globals = globals;
+		this.initializeResources();
+		this.syncThemeText();
+		this.syncKeyframes();
+	}
+	assertActive() {
+		if (this.disposed) throw new EngineError("SESSION_DISPOSED", "Master CSS engine session has been disposed.");
+	}
+	initializeResources() {
+		const { globals, program } = this;
+		for (const [name, count] of globals.variables) if (count > 0) this.variableCounts.set(name, count);
+		for (const [id, count] of [...globals.keyframes].sort(([left], [right]) => compareText(left, right))) {
+			const definition = program.keyframes.find((keyframe) => keyframe.id === id);
+			if (!definition || count <= 0) continue;
+			this.keyframeCounts.set(id, count);
+			this.registerVariables(definition.dependencies);
+		}
+		for (const definition of program.keyframes) if (definition.safelisted && !this.keyframeCounts.has(definition.id)) {
+			this.keyframeCounts.set(definition.id, 1);
+			this.registerVariables(definition.dependencies);
+		}
+		for (const name of program.variableOrder) {
+			const variable = program.variables.get(name);
+			if (!variable.isStatic) continue;
+			this.registerVariable(name);
+			if (variable.namespace === "animate") {
+				const { names, retainAll } = declarationAnimationReferences(`animation:var(--${name})`, program);
+				this.registerKeyframes(names, retainAll);
+			}
+		}
+		this.variableFloors = new Map(this.variableCounts);
+		this.keyframeFloors = new Map(this.keyframeCounts);
+	}
+	/** Counts a variable and, the first time, each dependency it pulls into the theme. */
+	registerVariable(name) {
+		const visited = /* @__PURE__ */ new Set();
+		const stack = [name];
+		while (stack.length) {
+			const current = stack.pop();
+			if (visited.has(current)) continue;
+			visited.add(current);
+			const variable = this.program.variables.get(current);
+			if (!variable) continue;
+			for (let index = variable.dependencies.length - 1; index >= 0; index--) stack.push(variable.dependencies[index]);
+			const count = (this.variableCounts.get(current) ?? 0) + 1;
+			this.variableCounts.set(current, count);
+			if (count === 1) {
+				this.themeVariableNames.push(current);
+				this.themeDirty = true;
+			}
+		}
+	}
+	registerVariables(names) {
+		for (const name of names) this.registerVariable(name);
+	}
+	unregisterVariable(name) {
+		const visited = /* @__PURE__ */ new Set();
+		const stack = [name];
+		while (stack.length) {
+			const current = stack.pop();
+			if (visited.has(current)) continue;
+			visited.add(current);
+			const variable = this.program.variables.get(current);
+			if (!variable) continue;
+			for (let index = variable.dependencies.length - 1; index >= 0; index--) stack.push(variable.dependencies[index]);
+			const floor = this.variableFloors.get(current) ?? 0;
+			const count = this.variableCounts.get(current);
+			if (count === void 0 || count <= floor) continue;
+			if (floor === 0 && count === 1) {
+				this.variableCounts.delete(current);
+				this.themeVariableNames = this.themeVariableNames.filter((variableName) => variableName !== current);
+				this.themeDirty = true;
+			} else this.variableCounts.set(current, count - 1);
+		}
+	}
+	unregisterVariables(names) {
+		for (const name of names) this.unregisterVariable(name);
+	}
+	/** The keyframes a rule references by name, or all of them. */
+	referencedKeyframes(names, all) {
+		if (!all && !names.length) return [];
+		return this.program.keyframes.filter((definition) => all || names.includes(definition.name));
+	}
+	registerKeyframes(names = [], all = false) {
+		for (const definition of this.referencedKeyframes(names, all)) {
+			const count = addCount(this.keyframeCounts.get(definition.id) ?? 0, 1);
+			this.keyframeCounts.set(definition.id, count);
+			if (count === 1) this.registerVariables(definition.dependencies);
+		}
+	}
+	unregisterKeyframes(names = [], all = false) {
+		for (const definition of this.referencedKeyframes(names, all)) {
+			const count = this.keyframeCounts.get(definition.id);
+			if (count === void 0 || count <= (this.keyframeFloors.get(definition.id) ?? 0)) continue;
+			if (count === 1) {
+				this.keyframeCounts.delete(definition.id);
+				this.unregisterVariables(definition.dependencies);
+			} else this.keyframeCounts.set(definition.id, count - 1);
+		}
+	}
+	/**
+	* Keyframes this session emits: referenced, on demand and not emitted by the host.
+	* Native definitions are counted for the tokens their frames read, but their
+	* stylesheet delivers them.
+	*/
+	keyframeResources() {
+		const resources = [];
+		for (const definition of this.program.keyframes) {
+			if (definition.native) continue;
+			const count = this.keyframeCounts.get(definition.id) ?? 0;
+			if (count <= 0 || (this.globals.keyframes.get(definition.id) ?? 0) !== 0) continue;
+			const resource = {
+				id: definition.id,
+				name: definition.name,
+				text: definition.text,
+				refCount: count,
+				dependencies: [...definition.dependencies]
+			};
+			if (definition.containers.length) resource.containers = containersShape(definition.containers);
+			resources.push(resource);
+		}
+		return resources;
+	}
+	/** The keyframes rule changes since the last sync. */
+	syncKeyframes() {
+		const next = this.keyframeResources().map(({ id, text, containers }) => [
+			id,
+			text,
+			containers ?? []
+		]);
+		const texts = this.keyframeTexts;
+		const mutations = [];
+		for (let index = texts.length - 1; index >= 0; index--) {
+			if (next.some((placement) => samePlacement(placement, texts[index]))) continue;
+			const [[key]] = texts.splice(index, 1);
+			mutations.push({
+				op: "delete",
+				target: "keyframes",
+				index,
+				key
+			});
+		}
+		for (const [index, placement] of next.entries()) {
+			if (texts[index] && samePlacement(texts[index], placement)) continue;
+			const [key, text] = placement;
+			const previous = texts.findIndex(([id]) => id === key);
+			if (previous >= 0) {
+				texts.splice(previous, 1);
+				mutations.push({
+					op: "delete",
+					target: "keyframes",
+					index: previous,
+					key
+				});
+			}
+			texts.splice(index, 0, placement);
+			mutations.push({
+				op: "insert",
+				target: "keyframes",
+				index,
+				key,
+				text
+			});
+		}
+		return mutations;
+	}
+	/** The emitted keyframes, each wrapped in the containers it was declared in. */
+	keyframesText() {
+		let text = "";
+		let path = [];
+		for (const frame of this.keyframeResources()) {
+			const containers = frame.containers ?? [];
+			let common = 0;
+			while (common < path.length && common < containers.length && path[common].id === containers[common].id) common++;
+			text += "}".repeat(path.length - common);
+			for (const container of containers.slice(common)) text += `${container.prelude}{`;
+			text += frame.text;
+			path = containers;
+		}
+		return text + "}".repeat(path.length);
+	}
+	syncThemeText() {
+		if (!this.themeDirty) return;
+		this.themeText = renderTheme(this.program.theme, new Set(this.themeVariableNames)) || void 0;
+		this.themeDirty = false;
+	}
+	/**
+	* Runs an operation and, outermost, prepends the theme rule change and appends the
+	* keyframes rule changes it caused.
+	*/
+	batch(operation) {
+		this.assertActive();
+		const mutations = [];
+		this.batchDepth++;
+		try {
+			operation(mutations);
+		} catch (error) {
+			if (!--this.batchDepth) {
+				this.syncThemeText();
+				this.syncKeyframes();
+			}
+			throw error;
+		}
+		if (--this.batchDepth) return {
+			version: 5,
+			mutations
+		};
+		if (this.themeDirty) {
+			const previous = this.themeText;
+			this.syncThemeText();
+			if (previous !== this.themeText) {
+				const theme = [];
+				if (previous !== void 0) theme.push({
+					op: "delete",
+					target: "theme",
+					index: 0,
+					key: "theme:root"
+				});
+				if (this.themeText !== void 0) theme.push({
+					op: "insert",
+					target: "theme",
+					index: 0,
+					key: "theme:root",
+					text: this.themeText
+				});
+				mutations.unshift(...theme);
+			}
+		}
+		mutations.push(...this.syncKeyframes());
+		return {
+			version: 5,
+			mutations
+		};
+	}
+	/**
+	* Where a rule belongs in its layer. Rules with distinct keys never compare equal,
+	* so this is also the index of a stored rule.
+	*/
+	position(layer, rule) {
+		const rules = this.layers[layer];
+		let low = 0;
+		let high = rules.length;
+		while (low < high) {
+			const middle = low + high >> 1;
+			if (compareStoredRules(rules[middle], rule) < 0) low = middle + 1;
+			else high = middle;
+		}
+		return low;
+	}
+	insertClassRules(className, generated, mutations) {
+		const references = [];
+		for (const rule of generated) {
+			const { key } = rule.ir;
+			const layer = UTILITY_LAYERS.indexOf(rule.ir.layer);
+			references.push([layer, key]);
+			const stored = this.layerRules[layer].get(key);
+			if (stored) {
+				stored.count++;
+				continue;
+			}
+			this.registerVariables(rule.ir.variableNames ?? []);
+			this.registerKeyframes(rule.ir.keyframeNames, rule.ir.retainAllKeyframes);
+			const index = this.position(layer, rule);
+			this.layers[layer].splice(index, 0, rule);
+			this.layerRules[layer].set(key, {
+				rule,
+				count: 1
+			});
+			mutations.push({
+				op: "insert",
+				target: rule.ir.layer,
+				index,
+				key,
+				text: rule.ir.text,
+				rule: rule.ir
+			});
+		}
+		this.classOrder.add(className);
+		this.classRules.set(className, references);
+	}
+	ensureClassRules(classNames) {
+		return this.batch((mutations) => {
+			for (const name of classNames) {
+				const className = wellFormed(name);
+				if (!className || this.classRules.has(className)) continue;
+				this.insertClassRules(className, generateClassRules(className, this.program), mutations);
+			}
+		});
+	}
+	deleteClassRules(classNames) {
+		return this.batch((mutations) => {
+			for (const name of classNames) {
+				const className = wellFormed(name);
+				const references = this.classRules.get(className);
+				if (!references) continue;
+				this.classRules.delete(className);
+				for (let reference = references.length - 1; reference >= 0; reference--) {
+					const [layer, key] = references[reference];
+					const stored = this.layerRules[layer].get(key);
+					if (!stored) continue;
+					if (stored.count > 1) {
+						stored.count--;
+						continue;
+					}
+					this.layerRules[layer].delete(key);
+					const { rule } = stored;
+					const rules = this.layers[layer];
+					let index = this.position(layer, rule);
+					if (rules[index] !== rule) index = rules.indexOf(rule);
+					rules.splice(index, 1);
+					mutations.push({
+						op: "delete",
+						target: UTILITY_LAYERS[layer],
+						index,
+						key
+					});
+					this.unregisterVariables(rule.ir.variableNames ?? []);
+					this.unregisterKeyframes(rule.ir.keyframeNames, rule.ir.retainAllKeyframes);
+				}
+				this.classOrder.delete(className);
+			}
+		});
+	}
+	/** Re-executes the connected classes against the program and `globals`. */
+	rebuild(globals) {
+		return this.batch((mutations) => {
+			const connected = [...this.classOrder];
+			for (let layer = this.layers.length - 1; layer >= 0; layer--) {
+				const rules = this.layers[layer];
+				for (let index = rules.length - 1; index >= 0; index--) mutations.push({
+					op: "delete",
+					target: UTILITY_LAYERS[layer],
+					index,
+					key: rules[index].ir.key
+				});
+				rules.length = 0;
+				this.layerRules[layer].clear();
+			}
+			this.themeDirty = true;
+			this.variableCounts.clear();
+			this.keyframeCounts.clear();
+			this.themeVariableNames = [];
+			this.globals = globals;
+			this.classRules.clear();
+			this.classOrder.clear();
+			this.initializeResources();
+			mutations.push(...this.ensureClassRules(connected).mutations);
+		});
+	}
+	/** Adds resource counts the host emitted outside this session to the ones it reported before. */
+	registerEmittedGlobals(emittedGlobals) {
+		this.assertActive();
+		const added = globalsOf(emittedGlobals);
+		const merged = {
+			variables: new Map(this.globals.variables),
+			keyframes: new Map(this.globals.keyframes)
+		};
+		let changed = false;
+		for (const [name, count] of added.variables) {
+			if (!count) continue;
+			const current = merged.variables.get(name) ?? 0;
+			const next = addCount(current, count);
+			if (next === current) continue;
+			merged.variables.set(name, next);
+			changed = true;
+		}
+		for (const [id, count] of added.keyframes) {
+			if (count <= 0) continue;
+			merged.keyframes.set(id, addCount(merged.keyframes.get(id) ?? 0, count));
+			changed = true;
+		}
+		return changed ? this.rebuild(merged) : {
+			version: 5,
+			mutations: []
+		};
+	}
+	/** Replaces the host's resource counts with a complete snapshot, as HMR reports it. */
+	replaceEmittedGlobals(emittedGlobals) {
+		this.assertActive();
+		const globals = globalsOf(emittedGlobals);
+		return sameGlobals(globals, this.globals) ? {
+			version: 5,
+			mutations: []
+		} : this.rebuild(globals);
+	}
+	/** Executes another program, with new emitted globals when given. */
+	refresh(program, emittedGlobals) {
+		this.assertActive();
+		this.program = decode(program);
+		return this.rebuild(emittedGlobals === void 0 ? this.globals : globalsOf(emittedGlobals));
+	}
+	keyframeDefinitions() {
+		this.assertActive();
+		return this.program.keyframes.map(keyframeDefinitionShape);
+	}
+	resources() {
+		const variables = [];
+		for (const name of this.themeVariableNames) {
+			const variable = this.program.variables.get(name);
+			if (!variable) continue;
+			const resource = {
+				name,
+				refCount: this.variableCounts.get(name) ?? 0
+			};
+			if (variable.dependencies.length) resource.dependencies = [...variable.dependencies];
+			variables.push(resource);
+		}
+		const keyframes = this.keyframeResources();
+		return this.themeText === void 0 ? {
+			variables,
+			keyframes
+		} : {
+			themeText: this.themeText,
+			variables,
+			keyframes
+		};
+	}
+	executionState(classNames) {
+		this.assertActive();
+		return {
+			classes: classNames.map((name) => {
+				const className = wellFormed(name);
+				return {
+					className,
+					references: (this.classRules.get(className) ?? []).map(([layer, key]) => ({
+						layer: UTILITY_LAYERS[layer],
+						key
+					}))
+				};
+			}),
+			resources: this.resources()
+		};
+	}
+	snapshot() {
+		this.assertActive();
+		let text = this.themeText === void 0 ? "" : `@layer theme{${this.themeText}}`;
+		for (const [index, rules] of this.layers.entries()) if (rules.length) text += `@layer ${UTILITY_LAYERS[index]}{${rules.map((rule) => rule.ir.text).join("")}}`;
+		return {
+			version: 5,
+			rules: this.layers.flatMap((rules) => rules.map((rule) => rule.ir)),
+			resources: this.resources(),
+			text: text + this.keyframesText()
+		};
+	}
+	dispose() {
+		for (const rules of this.layers) rules.length = 0;
+		for (const rules of this.layerRules) rules.clear();
+		this.classRules.clear();
+		this.classOrder.clear();
+		this.variableCounts.clear();
+		this.keyframeCounts.clear();
+		this.variableFloors.clear();
+		this.keyframeFloors.clear();
+		this.keyframeTexts = [];
+		this.themeVariableNames = [];
+		this.themeText = void 0;
+		this.themeDirty = false;
+		this.disposed = true;
+	}
+};
+function createEngineSession(program, emittedGlobals) {
+	return new Session(decode(program), globalsOf(emittedGlobals));
+}
+export { EngineError, createEngineSession };

package/dist/engine-js/src/state.js

@@ -0,0 +1,62 @@
+import { customMediaBranches } from "./program.js";
+import { splitStateToken } from "./class-syntax.js";
+import { parseCustomMediaQuery, parseNativeQuery, renderConditionToken, resolveLayerCondition } from "./condition.js";
+import { selectorTokenToTemplate, validSelectorStructure } from "./selector.js";
+// ../engine-js/src/state.ts
+/** The branches a state token selects; none when any part of it is invalid or unknown. */
+function resolveStateBranches(stateToken, inheritedImportant, program) {
+	let important = inheritedImportant;
+	if (stateToken[0] === "!") {
+		important = true;
+		stateToken = stateToken.slice(1);
+	}
+	const [selector, conditions] = splitStateToken(stateToken);
+	let branches = [{
+		key: "",
+		conditionWrappers: [],
+		important
+	}];
+	if (selector) {
+		const template = selectorTokenToTemplate(selector);
+		if (!validSelectorStructure(template)) return [];
+		branches[0].key = selector;
+		branches[0].selectorTemplate = template;
+	}
+	for (const condition of conditions) {
+		let paths = program.customMediaPaths.get(`--${condition}`);
+		if (!paths) {
+			const query = parseNativeQuery(condition);
+			if (query?.kind === "media" && query.prelude.includes("--")) {
+				const media = parseCustomMediaQuery(query.prelude, (name) => program.customMedia.get(name));
+				paths = media && customMediaBranches(media);
+				if (!paths) return [];
+			}
+		}
+		if (paths) {
+			const branchPaths = paths;
+			branches = branches.flatMap((branch) => branchPaths.map((path, index) => ({
+				...branch,
+				key: `${branch.key}@${condition}#${index}`,
+				conditionWrappers: [...branch.conditionWrappers, ...path.map((query) => ["media", `@media ${query}`])]
+			})));
+			continue;
+		}
+		const layer = resolveLayerCondition(condition);
+		if (layer) {
+			branches = branches.filter((branch) => !branch.layer || branch.layer === layer);
+			for (const branch of branches) {
+				branch.key += `@${condition}`;
+				branch.layer = layer;
+			}
+			continue;
+		}
+		const wrapper = renderConditionToken(condition, program);
+		if (!wrapper) return [];
+		for (const branch of branches) {
+			branch.key += `@${condition}`;
+			branch.conditionWrappers.push(wrapper);
+		}
+	}
+	return branches;
+}
+export { resolveStateBranches };

package/dist/engine-js/src/text.js

@@ -0,0 +1,51 @@
+// ../engine-js/src/text.ts
+const isAsciiDigit = (unit) => unit >= 48 && unit <= 57;
+/** Rust `u8::is_ascii_whitespace`, which is also CSS whitespace. */
+const isAsciiWhitespace = (unit) => unit === 32 || unit === 9 || unit === 10 || unit === 12 || unit === 13;
+/** Rust `char::is_whitespace` (Unicode White_Space), which `trim` uses; JS also trims U+FEFF but not U+0085. */
+function isWhitespace(unit) {
+	if (unit < 128) return unit === 32 || unit >= 9 && unit <= 13;
+	return unit === 133 || unit === 160 || unit === 5760 || unit >= 8192 && unit <= 8202 || unit === 8232 || unit === 8233 || unit === 8239 || unit === 8287 || unit === 12288;
+}
+function trimEnd(value) {
+	let end = value.length;
+	while (end > 0 && isWhitespace(value.charCodeAt(end - 1))) end--;
+	return value.slice(0, end);
+}
+function trim(value) {
+	let start = 0;
+	while (start < value.length && isWhitespace(value.charCodeAt(start))) start++;
+	return trimEnd(value.slice(start));
+}
+const asciiLowercase = (value) => value.replace(/[A-Z]+/g, (letters) => letters.toLowerCase());
+/** Rust `eq_ignore_ascii_case` against a lowercase ASCII `expected`. */
+const isAsciiCase = (value, expected) => value.length === expected.length && asciiLowercase(value) === expected;
+const codePointRank = (unit) => unit >= 55296 ? unit <= 57343 ? unit + 8192 : unit - 2048 : unit;
+/** The Rust `str` (code point) order of two strings. */
+function compareText(left, right) {
+	const length = Math.min(left.length, right.length);
+	for (let index = 0; index < length; index++) {
+		const unit = left.charCodeAt(index);
+		const other = right.charCodeAt(index);
+		if (unit !== other) return codePointRank(unit) < codePointRank(other) ? -1 : 1;
+	}
+	return left.length === right.length ? 0 : left.length < right.length ? -1 : 1;
+}
+/** Replaces lone surrogates with U+FFFD, as the UTF-8 boundary of the Rust engine does. */
+function wellFormed(value) {
+	if (!/[\ud800-\udfff]/.test(value)) return value;
+	let result = "";
+	for (let index = 0; index < value.length; index++) {
+		const unit = value.charCodeAt(index);
+		if (unit >= 55296 && unit <= 56319 && index + 1 < value.length) {
+			const next = value.charCodeAt(index + 1);
+			if (next >= 56320 && next <= 57343) {
+				result += value[index] + value[++index];
+				continue;
+			}
+		}
+		result += unit >= 55296 && unit <= 57343 ? "�" : value[index];
+	}
+	return result;
+}
+export { asciiLowercase, compareText, isAsciiCase, isAsciiDigit, isAsciiWhitespace, isWhitespace, trim, trimEnd, wellFormed };