sheetom 0.1.0-rc.9 → 0.1.1

package/dist/index.js

@@ -4,9 +4,9 @@ import { fileURLToPath } from "node:url";
 //#endregion
 //#region src/internal/engine-binding.ts
 const expectedEngineAbiIdentity = Object.freeze({
-	abiVersion: 1,
-	sheetomVersion: "0.1.0-rc.9",
-	syntaxEngineSetSha256: "2af7ec76ba46a3f20f74a90172a708afab5dcb20f45b658a4d975caed76dc855"
+	abiVersion: 4,
+	sheetomVersion: "0.1.1",
+	syntaxEngineSetSha256: "a0f10d0c1f0fe9e5bac9002e8ee548e7b5f6e2c7add1af3d953ae718d25cb37b"
 });
 var SheetOMEngineBindingError = class extends Error {
 	code;
@@ -41,7 +41,7 @@ function loadBinding() {
 	validateEngineBindingIdentity(addon);
 	return {
 		...addon,
-		createDeclarationState: (context, ...budget) => new addon.NativeDeclarationState(context, ...budget)
+		createDeclarationState: (context, ...arguments_) => new addon.NativeDeclarationState(context, ...arguments_)
 	};
 }
 //#endregion
@@ -90,18 +90,54 @@ function limitValue(value, name, fallback, maximum = maximumUnsignedLong) {
 	throw new RangeError(`${name} must be an integer between 0 and ${maximum}`);
 }
 //#endregion
+//#region src/serialization-error.ts
+/** A reparsable stylesheet cannot faithfully represent the current CSSOM state. */
+var SheetOMSerializationError = class extends Error {
+	code;
+	shorthand;
+	conflictingLonghands;
+	constructor(shorthand, conflictingLonghands, options) {
+		super(`SheetOM cannot serialize the pending ${shorthand} shorthand without changing its semantics.`, options);
+		this.name = "SheetOMSerializationError";
+		this.code = "UNREPRESENTABLE_PENDING_SHORTHAND";
+		this.shorthand = shorthand;
+		this.conflictingLonghands = Object.freeze([...conflictingLonghands]);
+	}
+};
+const unrepresentablePendingShorthandPattern = /^SHEETOM_UNREPRESENTABLE_PENDING_SHORTHAND: shorthand=([^;]+); conflicting=([a-z0-9,-]+)$/u;
+function serializationErrorFrom(error) {
+	if (!(error instanceof Error)) return null;
+	const match = unrepresentablePendingShorthandPattern.exec(error.message);
+	if (!match) return null;
+	const shorthand = match[1];
+	const conflicts = match[2];
+	if (!shorthand || !conflicts) return null;
+	return new SheetOMSerializationError(shorthand, conflicts.split(","), { cause: error });
+}
+function rethrowSerializationError(error) {
+	const serializationError = serializationErrorFrom(error);
+	if (serializationError) throw serializationError;
+}
+//#endregion
 //#region src/internal/native-declaration-block.ts
 /** Thin JS ownership boundary around the Rust declaration state machine. */
 var NativeDeclarationBlock = class {
 	#state;
 	#reportDiagnostic;
+	#reportSerializationDiagnostic;
 	#reservedNestingDepth;
 	#observableCache;
 	#serializationCache = /* @__PURE__ */ new Map();
-	constructor(reportDiagnostic, context = "style", resourceBudget = defaultResourceBudget, reservedNestingDepth = () => 0) {
+	constructor(reportDiagnostic, reportSerializationDiagnostic, context = "style", resourceBudget = defaultResourceBudget, reservedNestingDepth = () => 0, initialCssText) {
 		this.#reportDiagnostic = reportDiagnostic;
+		this.#reportSerializationDiagnostic = reportSerializationDiagnostic;
 		this.#reservedNestingDepth = reservedNestingDepth;
-		this.#state = engineBinding.createDeclarationState(context, ...nativeBudgetArguments(resourceBudget));
+		try {
+			this.#state = engineBinding.createDeclarationState(context, ...nativeBudgetArguments(resourceBudget), initialCssText);
+		} catch (error) {
+			rethrowResourceBudgetError(error);
+			throw error;
+		}
 	}
 	get cssText() {
 		this.#observableCache ??= this.#state.cssText;
@@ -131,9 +167,59 @@ var NativeDeclarationBlock = class {
 			this.#invalidateSerialization();
 			return;
 		}
-		const normalizedName = name.startsWith("--") ? name : name.toLowerCase();
-		const [code, input] = outcome === "invalid-priority" ? ["INVALID_PRIORITY", priority] : outcome === "unsupported-shorthand" ? ["UNSUPPORTED_SHORTHAND_VALUE", value] : ["INVALID_PROPERTY_VALUE", value];
-		this.#reportDiagnostic(code, normalizedName, input);
+		this.#diagnosticForOutcome(outcome, name, value, priority);
+	}
+	applyMutations(mutations) {
+		const kinds = [];
+		const properties = [];
+		const values = [];
+		const priorities = [];
+		for (const mutation of mutations) {
+			kinds.push(mutation.kind === "set" ? 0 : 1);
+			properties.push(mutation.property);
+			values.push(mutation.kind === "set" ? mutation.value : "");
+			priorities.push(mutation.kind === "set" ? mutation.priority : "");
+		}
+		let outcomes;
+		try {
+			outcomes = this.#state.applyMutations(kinds, properties, values, priorities, this.#reservedNestingDepth());
+		} catch (error) {
+			rethrowResourceBudgetError(error);
+			throw error;
+		}
+		if (outcomes.length !== mutations.length) throw new Error("SheetOM engine returned an incomplete declaration mutation result.");
+		const results = [];
+		let mutated = false;
+		for (let index = 0; index < outcomes.length; index += 1) {
+			const mutation = mutations[index];
+			const outcome = outcomes[index];
+			if (!mutation || outcome === void 0) throw new Error("SheetOM engine returned a mismatched declaration mutation result.");
+			if (mutation.kind === "remove") {
+				mutated = true;
+				results.push({
+					kind: "remove",
+					value: outcome
+				});
+				continue;
+			}
+			if (outcome === "applied") {
+				mutated = true;
+				results.push({
+					kind: "set",
+					accepted: true,
+					diagnostic: null
+				});
+				continue;
+			}
+			if (!isEngineMutationOutcome(outcome)) throw new Error("SheetOM engine returned an invalid declaration mutation outcome.");
+			results.push({
+				kind: "set",
+				accepted: false,
+				diagnostic: this.#diagnosticForOutcome(outcome, mutation.property, mutation.value, mutation.priority)
+			});
+		}
+		if (mutated) this.#invalidateSerialization();
+		return results;
 	}
 	removeProperty(name) {
 		const removed = this.#state.removeProperty(name);
@@ -149,19 +235,63 @@ var NativeDeclarationBlock = class {
 		}
 		this.#invalidateSerialization();
 	}
-	serialize(safe, indent, separator) {
-		const cacheKey = `${safe ? "1" : "0"}\0${indent}\0${separator}`;
+	serialize(safe, indent, separator, strict = false) {
+		const cacheKey = `${safe ? "1" : "0"}${strict ? "1" : "0"}\0${indent}\0${separator}`;
 		const cached = this.#serializationCache.get(cacheKey);
-		if (cached !== void 0) return cached;
-		const serialized = this.#state.serializeFormatted(safe, indent, separator);
-		this.#serializationCache.set(cacheKey, serialized);
-		return serialized;
+		if (cached !== void 0) {
+			if (typeof cached === "string") return cached;
+			this.#reportSerializationIssues(cached.issues);
+			return cached.serialized;
+		}
+		let result;
+		try {
+			if (strict) result = this.#state.serializeFormatted(safe, indent, separator);
+			else result = parseResilientSerializationResult(this.#state.serializeFormattedResilient(safe, indent, separator));
+		} catch (error) {
+			rethrowResourceBudgetError(error);
+			rethrowSerializationError(error);
+			throw error;
+		}
+		this.#serializationCache.set(cacheKey, result);
+		if (typeof result === "string") return result;
+		this.#reportSerializationIssues(result.issues);
+		return result.serialized;
 	}
 	#invalidateSerialization() {
 		this.#observableCache = void 0;
 		this.#serializationCache.clear();
 	}
+	#diagnosticForOutcome(outcome, name, value, priority) {
+		const normalizedName = name.startsWith("--") ? name : name.toLowerCase();
+		const [code, input] = outcome === "invalid-priority" ? ["INVALID_PRIORITY", priority] : outcome === "unsupported-shorthand" ? ["UNSUPPORTED_SHORTHAND_VALUE", value] : ["INVALID_PROPERTY_VALUE", value];
+		return this.#reportDiagnostic(code, normalizedName, input);
+	}
+	#reportSerializationIssues(issues) {
+		for (const issue of issues) this.#reportSerializationDiagnostic(issue.shorthand, issue.conflictingLonghands);
+	}
 };
+function parseResilientSerializationResult(output) {
+	const serialized = output[0];
+	if (serialized === void 0 || output.length % 2 === 0) throw new Error("SheetOM engine returned an invalid resilient serialization result.");
+	if (output.length === 1) return serialized;
+	const issues = [];
+	for (let index = 1; index < output.length; index += 2) {
+		const shorthand = output[index];
+		const conflicts = output[index + 1];
+		if (!shorthand || !conflicts) throw new Error("SheetOM engine returned an incomplete resilient serialization issue.");
+		issues.push({
+			shorthand,
+			conflictingLonghands: Object.freeze(conflicts.split(","))
+		});
+	}
+	return {
+		serialized,
+		issues
+	};
+}
+function isEngineMutationOutcome(value) {
+	return value === "invalid-name" || value === "invalid-priority" || value === "invalid-value" || value === "unsupported-shorthand";
+}
 function toUnsignedLong$1(value) {
 	const numeric = Number(value);
 	if (!Number.isFinite(numeric) || numeric === 0) return 0;
@@ -353,13 +483,20 @@ var Serializer = class {
 		this.#describe = describe;
 	}
 	serialize(node) {
+		return this.serializeMany([node]);
+	}
+	serializeMany(nodes) {
 		const chunks = [];
-		const pending = [{
-			kind: "node",
-			node,
-			depth: 0,
-			child: false
-		}];
+		const pending = [];
+		for (let index = nodes.length - 1; index >= 0; index -= 1) {
+			const node = nodes[index];
+			if (node) pending.push({
+				kind: "node",
+				node,
+				depth: 0,
+				child: false
+			});
+		}
 		while (pending.length > 0) {
 			const frame = pending.pop();
 			if (!frame) continue;
@@ -466,6 +603,7 @@ const pageMarginRuleNames = /* @__PURE__ */ new Set([
 	"left-top"
 ]);
 const ignoreDiagnostic = () => {};
+const normalizedSelectorText = Symbol("normalizedSelectorText");
 const ruleDiagnostics = /* @__PURE__ */ new WeakMap();
 const ruleTree = new RuleTree((rule, parentRule, parentStyleSheet) => {
 	ruleParentage.set(rule, {
@@ -473,7 +611,8 @@ const ruleTree = new RuleTree((rule, parentRule, parentStyleSheet) => {
 		parentStyleSheet
 	});
 }, (rule) => rule.parentStyleSheet);
-const safeSerializer = new Serializer(describeRuleSafe);
+const safeSerializer = new Serializer((rule) => describeRuleSafe(rule, false));
+const strictSerializer = new Serializer((rule) => describeRuleSafe(rule, true));
 let activeConstructionResourceBudget = defaultResourceBudget;
 function constructWithResourceBudget(factory, resourceBudget) {
 	const previous = activeConstructionResourceBudget;
@@ -1121,24 +1260,37 @@ var CSSViewTransitionRule = class extends CSSRule {
 var CSSStyleDeclaration = class {
 	parentRule;
 	#block;
-	constructor(parentRule) {
+	constructor(parentRule, initialCssText) {
 		assertInternalConstructor("CSSStyleDeclaration");
 		this.parentRule = parentRule;
 		lockOwnProperties(this, "parentRule");
 		const reportDeclarationDiagnostic = (code, property, input) => {
-			const priority = code === "INVALID_PRIORITY";
-			const unsupportedShorthand = code === "UNSUPPORTED_SHORTHAND_VALUE";
-			(ruleDiagnostics.get(this.parentRule) ?? ignoreDiagnostic)({
+			const diagnostic = {
 				code,
 				severity: "warning",
 				operation: "setProperty",
-				message: priority ? `The mutation was ignored because ${input} is not a valid priority.` : unsupportedShorthand ? `The value was ignored because the shorthand codec for ${property} cannot expand it.` : `The value was ignored because it is invalid for ${property}.`,
+				message: code === "INVALID_PRIORITY" ? `The mutation was ignored because ${input} is not a valid priority.` : code === "UNSUPPORTED_SHORTHAND_VALUE" ? `The value was ignored because the shorthand codec for ${property} cannot expand it.` : `The value was ignored because it is invalid for ${property}.`,
 				property,
 				input,
 				location: null
-			});
+			};
+			(ruleDiagnostics.get(this.parentRule) ?? ignoreDiagnostic)(diagnostic);
+			return diagnostic;
+		};
+		const reportSerializationDiagnostic = (shorthand, conflictingLonghands) => {
+			const diagnostic = {
+				code: "UNREPRESENTABLE_PENDING_SHORTHAND",
+				severity: "warning",
+				operation: "serialize",
+				message: `The pending ${shorthand} shorthand required a best-effort recovery during serialization.`,
+				property: shorthand,
+				input: "",
+				location: null,
+				conflictingLonghands: Object.freeze([...conflictingLonghands])
+			};
+			(ruleDiagnostics.get(this.parentRule) ?? ignoreDiagnostic)(diagnostic);
 		};
-		this.#block = new NativeDeclarationBlock(reportDeclarationDiagnostic, parentRule instanceof CSSFontFaceRule ? "font-face" : parentRule instanceof CSSFunctionDeclarations ? "function" : "style", ruleResourceBudgets.get(parentRule) ?? defaultResourceBudget, () => declarationSerializationDepth(parentRule));
+		this.#block = new NativeDeclarationBlock(reportDeclarationDiagnostic, reportSerializationDiagnostic, parentRule instanceof CSSFontFaceRule ? "font-face" : parentRule instanceof CSSFunctionDeclarations ? "function" : "style", ruleResourceBudgets.get(parentRule) ?? defaultResourceBudget, () => declarationSerializationDepth(parentRule), initialCssText);
 		return new Proxy(this, {
 			get(target, property) {
 				if (typeof property === "string" && arrayIndexPattern.test(property)) return target.item(Number(property)) || void 0;
@@ -1183,21 +1335,49 @@ var CSSStyleDeclaration = class {
 		const stringPriority = priority === null ? "" : `${priority}`;
 		this.#block.setProperty(stringName, stringValue, stringPriority);
 	}
+	/** Apply ordered declaration mutations through one engine boundary crossing. */
+	applyMutations(mutations) {
+		requireArguments(arguments.length, 1, "CSSStyleDeclaration", "applyMutations");
+		if (!Array.isArray(mutations)) throw new TypeError("CSSStyleDeclaration.applyMutations requires an array.");
+		const normalized = [];
+		for (let index = 0; index < mutations.length; index += 1) {
+			const mutation = mutations[index];
+			if (typeof mutation !== "object" || mutation === null) throw new TypeError(`Declaration mutation at index ${index} must be an object.`);
+			if (mutation.kind !== "set" && mutation.kind !== "remove") throw new TypeError(`Declaration mutation at index ${index} has an invalid kind.`);
+			if (typeof mutation.property !== "string") throw new TypeError(`Declaration mutation at index ${index} requires a string property.`);
+			if (mutation.kind === "remove") {
+				normalized.push({
+					kind: "remove",
+					property: mutation.property
+				});
+				continue;
+			}
+			if (typeof mutation.value !== "string" && mutation.value !== null) throw new TypeError(`Declaration mutation at index ${index} requires a string or null value.`);
+			if (mutation.priority !== void 0 && mutation.priority !== null && typeof mutation.priority !== "string") throw new TypeError(`Declaration mutation at index ${index} requires a string priority.`);
+			normalized.push({
+				kind: "set",
+				property: mutation.property,
+				value: mutation.value ?? "",
+				priority: mutation.priority ?? ""
+			});
+		}
+		return this.#block.applyMutations(normalized);
+	}
 	removeProperty(name) {
 		requireArguments(arguments.length, 1, "CSSStyleDeclaration", "removeProperty");
 		return this.#block.removeProperty(`${name}`);
 	}
 	/** @internal */
-	serializeSafe(indent) {
-		return this.#block.serialize(true, indent, "\n");
+	serializeSafe(indent, strict = false) {
+		return this.#block.serialize(true, indent, "\n", strict);
 	}
 };
 /** A live `@font-face` descriptor rule. */
 var CSSFontFaceRule = class extends CSSRule {
 	style;
-	constructor() {
+	constructor(initialCssText) {
 		super(CSSRule.FONT_FACE_RULE);
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 		lockOwnProperties(this, "style");
 	}
 	get cssText() {
@@ -1208,9 +1388,9 @@ var CSSFontFaceRule = class extends CSSRule {
 /** Declarations ordered after a nested style rule. */
 var CSSNestedDeclarations = class extends CSSRule {
 	#style;
-	constructor() {
+	constructor(initialCssText) {
 		super(0);
-		this.#style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.#style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 	}
 	get style() {
 		return this.#style;
@@ -1226,9 +1406,9 @@ var CSSNestedDeclarations = class extends CSSRule {
 /** A run of live descriptors inside a custom function. */
 var CSSFunctionDeclarations = class extends CSSRule {
 	#style;
-	constructor() {
+	constructor(initialCssText) {
 		super(0);
-		this.#style = constructWebIDL(CSSFunctionDescriptors, [this]);
+		this.#style = constructWebIDL(CSSFunctionDescriptors, [this, initialCssText]);
 	}
 	get style() {
 		return this.#style;
@@ -1252,10 +1432,10 @@ var CSSFunctionDescriptors = class extends CSSStyleDeclaration {
 var CSSMarginRule = class extends CSSRule {
 	name;
 	style;
-	constructor(name) {
+	constructor(name, initialCssText) {
 		super(CSSRule.MARGIN_RULE);
 		this.name = name;
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 		lockOwnProperties(this, "name", "style");
 	}
 	get cssText() {
@@ -1267,10 +1447,10 @@ var CSSMarginRule = class extends CSSRule {
 var CSSPageRule = class extends CSSGroupingRule {
 	style;
 	#selectorText;
-	constructor(selectorText) {
+	constructor(selectorText, initialCssText) {
 		super(CSSRule.PAGE_RULE);
 		this.#selectorText = selectorText;
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 		lockOwnProperties(this, "style");
 	}
 	get selectorText() {
@@ -1291,10 +1471,10 @@ var CSSPageRule = class extends CSSGroupingRule {
 var CSSPositionTryRule = class extends CSSRule {
 	name;
 	style;
-	constructor(name) {
+	constructor(name, initialCssText) {
 		super(0);
 		this.name = name;
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 		lockOwnProperties(this, "name", "style");
 	}
 	get cssText() {
@@ -1328,10 +1508,10 @@ function normalizeKeyText(value) {
 var CSSKeyframeRule = class extends CSSRule {
 	style;
 	#keyText;
-	constructor(keyText) {
+	constructor(keyText, initialCssText) {
 		super(CSSRule.KEYFRAME_RULE);
 		this.#keyText = normalizeKeyText(keyText) ?? keyText;
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 		lockOwnProperties(this, "style");
 	}
 	get keyText() {
@@ -1642,10 +1822,10 @@ var CSSFontFeatureValuesRule = class extends CSSRule {
 var CSSStyleRule = class extends CSSGroupingRule {
 	style;
 	#selectorText;
-	constructor(selectorText) {
+	constructor(selectorText, normalized, initialCssText) {
 		super(CSSRule.STYLE_RULE);
-		this.#selectorText = normalizeSelectorText(`${selectorText}`, currentConstructionResourceBudget()) ?? `${selectorText}`;
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
+		this.#selectorText = normalized === normalizedSelectorText ? selectorText : normalizeSelectorText(`${selectorText}`, currentConstructionResourceBudget()) ?? `${selectorText}`;
+		this.style = constructWebIDL(CSSStyleDeclaration, [this, initialCssText]);
 		lockOwnProperties(this, "style");
 	}
 	get selectorText() {
@@ -1678,26 +1858,23 @@ function replaceGroupingRules(group, rules) {
 function attachRuleTree(rule, parentRule, parentStyleSheet) {
 	ruleTree.attach(rule, parentRule, parentStyleSheet);
 }
-function serializeRuleSafe(rule) {
-	return safeSerializer.serialize(rule);
-}
-function describeRuleSafe(rule) {
+function describeRuleSafe(rule, strict) {
 	if (rule instanceof CSSStyleRule) return {
 		kind: "block",
 		header: rule.selectorText,
-		declarations: rule.style.serializeSafe("  "),
+		declarations: rule.style.serializeSafe("  ", strict),
 		children: ruleTree.children(rule)
 	};
 	if (rule instanceof CSSNestedDeclarations || rule instanceof CSSFunctionDeclarations) return {
 		kind: "declarations",
-		declarations: rule.style.serializeSafe("")
+		declarations: rule.style.serializeSafe("", strict)
 	};
 	if (rule instanceof CSSFontFaceRule || rule instanceof CSSMarginRule || rule instanceof CSSPositionTryRule || rule instanceof CSSKeyframeRule) {
 		const blockIndex = rule.cssText.indexOf("{");
 		return {
 			kind: "block",
 			header: rule.cssText.slice(0, blockIndex).trimEnd(),
-			declarations: rule.style.serializeSafe("  ")
+			declarations: rule.style.serializeSafe("  ", strict)
 		};
 	}
 	if (rule instanceof CSSKeyframesRule) return {
@@ -1708,7 +1885,7 @@ function describeRuleSafe(rule) {
 	if (rule instanceof CSSPageRule) return {
 		kind: "block",
 		header: `@page${rule.selectorText === "" ? "" : ` ${rule.selectorText}`}`,
-		declarations: rule.style.serializeSafe("  "),
+		declarations: rule.style.serializeSafe("  ", strict),
 		children: ruleTree.children(rule)
 	};
 	if (!(rule instanceof CSSGroupingRule)) return {
@@ -1815,24 +1992,19 @@ function isNativeMetadataRule(description) {
 function createRuleShellFromNative(description, reportDiagnostic, preserveImports, resourceBudget) {
 	let rule;
 	switch (description.kind) {
-		case "style": {
-			const style = constructWebIDL(CSSStyleRule, [description.prelude]);
-			style.style.cssText = description.declarations;
-			rule = style;
+		case "style":
+			rule = constructWebIDL(CSSStyleRule, [
+				description.prelude,
+				normalizedSelectorText,
+				description.declarations
+			]);
 			break;
-		}
-		case "nested-declarations": {
-			const nested = constructWebIDL(CSSNestedDeclarations);
-			nested.style.cssText = description.declarations;
-			rule = nested;
+		case "nested-declarations":
+			rule = constructWebIDL(CSSNestedDeclarations, [description.declarations]);
 			break;
-		}
-		case "function-declarations": {
-			const declarations = constructWebIDL(CSSFunctionDeclarations);
-			declarations.style.cssText = description.declarations;
-			rule = declarations;
+		case "function-declarations":
+			rule = constructWebIDL(CSSFunctionDeclarations, [description.declarations]);
 			break;
-		}
 		case "import": {
 			if (!preserveImports) return null;
 			const parsed = parseImportPrelude(description.cssText.replace(/^@import\s+/iu, "").replace(/;\s*$/u, ""));
@@ -1845,39 +2017,24 @@ function createRuleShellFromNative(description, reportDiagnostic, preserveImport
 			]);
 			break;
 		}
-		case "font-face": {
-			const fontFace = constructWebIDL(CSSFontFaceRule);
-			fontFace.style.cssText = description.declarations;
-			rule = fontFace;
+		case "font-face":
+			rule = constructWebIDL(CSSFontFaceRule, [description.declarations]);
 			break;
-		}
-		case "page": {
-			const page = constructWebIDL(CSSPageRule, [description.prelude]);
-			page.style.cssText = description.declarations;
-			rule = page;
+		case "page":
+			rule = constructWebIDL(CSSPageRule, [description.prelude, description.declarations]);
 			break;
-		}
-		case "margin": {
-			const margin = constructWebIDL(CSSMarginRule, [description.prelude]);
-			margin.style.cssText = description.declarations;
-			rule = margin;
+		case "margin":
+			rule = constructWebIDL(CSSMarginRule, [description.prelude, description.declarations]);
 			break;
-		}
-		case "position-try": {
-			const positionTry = constructWebIDL(CSSPositionTryRule, [description.prelude]);
-			positionTry.style.cssText = description.declarations;
-			rule = positionTry;
+		case "position-try":
+			rule = constructWebIDL(CSSPositionTryRule, [description.prelude, description.declarations]);
 			break;
-		}
 		case "keyframes":
 			rule = constructWebIDL(CSSKeyframesRule, [description.prelude]);
 			break;
-		case "keyframe": {
-			const keyframe = constructWebIDL(CSSKeyframeRule, [description.prelude]);
-			keyframe.style.cssText = description.declarations;
-			rule = keyframe;
+		case "keyframe":
+			rule = constructWebIDL(CSSKeyframeRule, [description.prelude, description.declarations]);
 			break;
-		}
 		case "counter-style": {
 			const counterStyle = constructWebIDL(CSSCounterStyleRule, [description.prelude]);
 			hydrateCounterStyleDescriptors(counterStyle, description.declarations, resourceBudget);
@@ -2103,9 +2260,13 @@ var CSSStyleSheet = class {
 	}
 	/** Serialize current state as reparsable CSS without mutating live objects. */
 	serialize() {
-		return this.#rules.map(serializeRuleSafe).join("");
+		return safeSerializer.serializeMany(this.#rules);
+	}
+	/** Serialize current state only when its CSS semantics can be preserved exactly. */
+	serializeStrict() {
+		return strictSerializer.serializeMany(this.#rules);
 	}
-	/** Drain opt-in mutation diagnostics without affecting CSSOM behavior. */
+	/** Drain opt-in mutation and serialization diagnostics without affecting CSSOM behavior. */
 	takeDiagnostics() {
 		if (!this.#diagnostics) return [];
 		return this.#diagnostics.splice(0);
@@ -2123,6 +2284,6 @@ function parseStyleSheet(cssText, options = {}) {
 	return sheet;
 }
 //#endregion
-export { CSSConditionRule, CSSContainerRule, CSSCounterStyleRule, CSSFontFaceRule, CSSFontFeatureValuesMap, CSSFontFeatureValuesRule, CSSFontPaletteValuesRule, CSSFunctionDeclarations, CSSFunctionDescriptors, CSSFunctionRule, CSSGroupingRule, CSSImportRule, CSSKeyframeRule, CSSKeyframesRule, CSSLayerBlockRule, CSSLayerStatementRule, CSSMarginRule, CSSMediaRule, CSSNamespaceRule, CSSNestedDeclarations, CSSPageRule, CSSPositionTryRule, CSSPropertyRule, CSSRule, CSSRuleList, CSSScopeRule, CSSStartingStyleRule, CSSStyleDeclaration, CSSStyleRule, CSSStyleSheet, CSSSupportsRule, CSSViewTransitionRule, MediaList, parseStyleSheet };
+export { CSSConditionRule, CSSContainerRule, CSSCounterStyleRule, CSSFontFaceRule, CSSFontFeatureValuesMap, CSSFontFeatureValuesRule, CSSFontPaletteValuesRule, CSSFunctionDeclarations, CSSFunctionDescriptors, CSSFunctionRule, CSSGroupingRule, CSSImportRule, CSSKeyframeRule, CSSKeyframesRule, CSSLayerBlockRule, CSSLayerStatementRule, CSSMarginRule, CSSMediaRule, CSSNamespaceRule, CSSNestedDeclarations, CSSPageRule, CSSPositionTryRule, CSSPropertyRule, CSSRule, CSSRuleList, CSSScopeRule, CSSStartingStyleRule, CSSStyleDeclaration, CSSStyleRule, CSSStyleSheet, CSSSupportsRule, CSSViewTransitionRule, MediaList, SheetOMSerializationError, parseStyleSheet };
 
 //# sourceMappingURL=index.js.map