sheetom 0.1.0 → 0.2.0

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: 3,
-	sheetomVersion: "0.1.0",
-	syntaxEngineSetSha256: "31990c26ede4e17c3a8941027f92b2be96a167984d0ab6529e724c3d6126be50"
+	abiVersion: 5,
+	sheetomVersion: "0.2.0",
+	syntaxEngineSetSha256: "954d76058dc35ad2a5c85e41fd66e35d308856e554c93563e7eee8a4704d4b70"
 });
 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
@@ -128,11 +128,16 @@ var NativeDeclarationBlock = class {
 	#reservedNestingDepth;
 	#observableCache;
 	#serializationCache = /* @__PURE__ */ new Map();
-	constructor(reportDiagnostic, reportSerializationDiagnostic, 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;
@@ -351,8 +356,8 @@ function isNativeRuleDescription(value) {
 }
 //#endregion
 //#region src/internal/native-rule-syntax.ts
-function normalizeNativeSelector(source, resourceBudget = defaultResourceBudget) {
-	return callNative(() => engineBinding.normalizeSelector(source, ...nativeBudgetArguments(resourceBudget)));
+function normalizeNativeSelector(source, resourceBudget = defaultResourceBudget, namespaces = "") {
+	return callNative(() => engineBinding.normalizeSelector(source, namespaces, ...nativeBudgetArguments(resourceBudget)));
 }
 function normalizeNativeMedia(source, resourceBudget = defaultResourceBudget) {
 	return callNative(() => engineBinding.normalizeMedia(source, ...nativeBudgetArguments(resourceBudget)));
@@ -391,6 +396,9 @@ function callNative(operation) {
 		return null;
 	}
 }
+function supportsNativeCss(source, value) {
+	return engineBinding.supportsCss(source, value);
+}
 //#endregion
 //#region src/internal/rule-tree.ts
 /** Owns child-list identity and parent propagation for every live rule node. */
@@ -570,6 +578,39 @@ function assertInternalConstructor(name) {
 }
 //#endregion
 //#region src/index.ts
+/** CSS authoring utilities, without installing or replacing the global CSS namespace. */
+const CSS = {
+	/** Serialize a DOMString as a CSS identifier, including lone UTF-16 surrogates. */
+	escape(value) {
+		requireArguments(arguments.length, 1, "CSS", "escape");
+		const input = `${value}`;
+		let output = "";
+		for (let index = 0; index < input.length; index += 1) {
+			const code = input.charCodeAt(index);
+			const character = input[index];
+			if (code === 0) output += "�";
+			else if (code <= 31 || code === 127 || code >= 48 && code <= 57 && (index === 0 || index === 1 && input[0] === "-")) output += `\\${code.toString(16)} `;
+			else if (input === "-") output += "\\-";
+			else if (code >= 128 || /[a-zA-Z0-9_-]/u.test(character)) output += character;
+			else output += `\\${character}`;
+		}
+		return output;
+	},
+	/** Test a declaration or supports condition against the pinned authoring capabilities. */
+	supports(propertyOrCondition, value) {
+		requireArguments(arguments.length, 1, "CSS", "supports");
+		try {
+			return arguments.length > 1 ? supportsNativeCss(`${propertyOrCondition}`, `${value}`) : supportsNativeCss(`${propertyOrCondition}`);
+		} catch (error) {
+			rethrowResourceBudgetError(error);
+			throw error;
+		}
+	}
+};
+Object.defineProperty(CSS, Symbol.toStringTag, {
+	value: "CSS",
+	configurable: true
+});
 const arrayIndexPattern = /^(0|[1-9]\d*)$/;
 const regularSheetMetadata = /* @__PURE__ */ new WeakMap();
 const ruleParentage = /* @__PURE__ */ new WeakMap();
@@ -577,7 +618,19 @@ const ruleResourceBudgets = /* @__PURE__ */ new WeakMap();
 const sheetResourceBudgets = /* @__PURE__ */ new WeakMap();
 const sheetRuleArrays = /* @__PURE__ */ new WeakMap();
 const sheetRuleCounts = /* @__PURE__ */ new WeakMap();
+const sheetNamespaces = /* @__PURE__ */ new WeakMap();
+function namespaceText(sheet) {
+	if (!sheet) return "";
+	return sheetNamespaces.get(sheet) ?? "";
+}
+function namespaceRulesText(rules) {
+	return rules.filter((rule) => rule instanceof CSSNamespaceRule).map((rule) => rule.cssText).join("");
+}
+function permitsNamespaceMutation(rules) {
+	return rules.every((rule) => rule instanceof CSSNamespaceRule || rule instanceof CSSImportRule);
+}
 const functionRuleHeaders = /* @__PURE__ */ new WeakMap();
+const mixinRuleHeaders = /* @__PURE__ */ new WeakMap();
 const unsignedLongRange = 2 ** 32;
 const pageMarginRuleNames = /* @__PURE__ */ new Set([
 	"top-left-corner",
@@ -598,6 +651,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, {
@@ -629,8 +683,8 @@ function namedPropertyToCSS(property) {
 	if (/^(webkit|moz|ms|o)-/.test(cssName)) cssName = `-${cssName}`;
 	return cssName;
 }
-function normalizeSelectorText(value, resourceBudget = defaultResourceBudget) {
-	return normalizeNativeSelector(value, resourceBudget);
+function normalizeSelectorText(value, resourceBudget = defaultResourceBudget, namespaces = "") {
+	return normalizeNativeSelector(value, resourceBudget, namespaces);
 }
 function toUnsignedLong(value) {
 	const number = Number(value);
@@ -1022,6 +1076,112 @@ var CSSFunctionRule = class extends CSSGroupingRule {
 	}
 	set cssText(_value) {}
 };
+/** Experimental revision-pinned native CSS mixin definition. */
+var CSSMixinRule = class extends CSSGroupingRule {
+	name;
+	contents = true;
+	#parameters;
+	constructor(name, parameters) {
+		super(0);
+		this.name = serializeNativeIdentifier(name);
+		this.#parameters = parameters.map((parameter) => ({ ...parameter }));
+		const header = serializeFunctionHeader(name, parameters, "*").replace(/^@function /u, "@mixin ");
+		mixinRuleHeaders.set(this, parameters.length === 0 ? header.slice(0, -2) : header);
+		lockOwnProperties(this, "name", "contents");
+	}
+	getParameters() {
+		return this.#parameters.map((parameter) => ({ ...parameter }));
+	}
+	get cssText() {
+		return serializeMixinCssText(this);
+	}
+	set cssText(_value) {}
+};
+/** Experimental native CSS mixin application with a contents block. */
+var CSSApplyBlockRule = class extends CSSGroupingRule {
+	name;
+	#arguments;
+	constructor(name, args, header) {
+		super(0);
+		this.name = serializeNativeIdentifier(name);
+		this.#arguments = [...args];
+		mixinRuleHeaders.set(this, header);
+		lockOwnProperties(this, "name");
+	}
+	getArguments() {
+		return [...this.#arguments];
+	}
+	get cssText() {
+		return serializeMixinCssText(this);
+	}
+	set cssText(_value) {}
+};
+/** Experimental native CSS mixin application without a contents block. */
+var CSSApplyStatementRule = class extends CSSRule {
+	name;
+	#arguments;
+	#header;
+	constructor(name, args, header) {
+		super(0);
+		this.name = serializeNativeIdentifier(name);
+		this.#arguments = [...args];
+		this.#header = header;
+		lockOwnProperties(this, "name");
+	}
+	getArguments() {
+		return [...this.#arguments];
+	}
+	get cssText() {
+		return `${this.#header};`;
+	}
+	set cssText(_value) {}
+};
+/** Experimental native CSS mixin contents placeholder with a fallback block. */
+var CSSContentsBlockRule = class extends CSSGroupingRule {
+	constructor() {
+		super(0);
+		mixinRuleHeaders.set(this, "@contents");
+	}
+	get cssText() {
+		return serializeMixinCssText(this);
+	}
+	set cssText(_value) {}
+};
+/** Experimental native CSS mixin contents placeholder without a fallback. */
+var CSSContentsStatementRule = class extends CSSRule {
+	constructor() {
+		super(0);
+	}
+	get cssText() {
+		return "@contents;";
+	}
+	set cssText(_value) {}
+};
+function serializeMixinCssText(root) {
+	const chunks = [];
+	const pending = [root];
+	while (pending.length > 0) {
+		const item = pending.pop();
+		if (typeof item === "string") {
+			chunks.push(item);
+			continue;
+		}
+		if (!(item instanceof CSSGroupingRule)) {
+			chunks.push(item.cssText);
+			continue;
+		}
+		const header = groupingRuleHeader(item);
+		chunks.push(header, item instanceof CSSMixinRule ? "{ " : " { ");
+		pending.push(" }");
+		const children = ruleTree.children(item);
+		for (let index = children.length - 1; index >= 0; index -= 1) {
+			pending.push(children[index]);
+			if (index > 0) pending.push(" ");
+		}
+		if (item instanceof CSSStyleRule && item.style.cssText !== "") pending.push(children.length ? `${item.style.cssText} ` : item.style.cssText);
+	}
+	return chunks.join("");
+}
 function serializeFunctionHeader(name, parameters, returnType) {
 	const serializedParameters = parameters.map((parameter) => {
 		const type = serializeFunctionType(parameter.type);
@@ -1254,7 +1414,7 @@ var CSSViewTransitionRule = class extends CSSRule {
 var CSSStyleDeclaration = class {
 	parentRule;
 	#block;
-	constructor(parentRule) {
+	constructor(parentRule, initialCssText) {
 		assertInternalConstructor("CSSStyleDeclaration");
 		this.parentRule = parentRule;
 		lockOwnProperties(this, "parentRule");
@@ -1284,7 +1444,7 @@ var CSSStyleDeclaration = class {
 			};
 			(ruleDiagnostics.get(this.parentRule) ?? ignoreDiagnostic)(diagnostic);
 		};
-		this.#block = new NativeDeclarationBlock(reportDeclarationDiagnostic, reportSerializationDiagnostic, 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 CSSPositionTryRule ? "position-try" : 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;
@@ -1369,9 +1529,9 @@ var CSSStyleDeclaration = class {
 /** 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() {
@@ -1382,9 +1542,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;
@@ -1400,9 +1560,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;
@@ -1426,10 +1586,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() {
@@ -1441,10 +1601,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() {
@@ -1461,15 +1621,76 @@ var CSSPageRule = class extends CSSGroupingRule {
 	}
 	set cssText(_value) {}
 };
-/** A live `@position-try` declaration rule. */
+/** The allowed descriptors of an anchor positioning fallback rule. */
+var CSSPositionTryDescriptors = class extends CSSStyleDeclaration {};
+for (const name of [
+	"margin",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"margin-block",
+	"margin-block-start",
+	"margin-block-end",
+	"margin-inline",
+	"margin-inline-start",
+	"margin-inline-end",
+	"inset",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"inset-block",
+	"inset-block-start",
+	"inset-block-end",
+	"inset-inline",
+	"inset-inline-start",
+	"inset-inline-end",
+	"width",
+	"min-width",
+	"max-width",
+	"height",
+	"min-height",
+	"max-height",
+	"block-size",
+	"min-block-size",
+	"max-block-size",
+	"inline-size",
+	"min-inline-size",
+	"max-inline-size",
+	"place-self",
+	"align-self",
+	"justify-self",
+	"position-anchor",
+	"position-area"
+]) {
+	const camelCase = name.replace(/-([a-z])/gu, (_match, letter) => letter.toUpperCase());
+	for (const accessor of /* @__PURE__ */ new Set([name, camelCase])) Object.defineProperty(CSSPositionTryDescriptors.prototype, accessor, {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return this.getPropertyValue(name);
+		},
+		set(value) {
+			this.setProperty(name, value);
+		}
+	});
+}
+/** A named anchor positioning fallback rule. */
 var CSSPositionTryRule = class extends CSSRule {
 	name;
-	style;
-	constructor(name) {
+	#style;
+	constructor(name, initialCssText) {
 		super(0);
 		this.name = name;
-		this.style = constructWebIDL(CSSStyleDeclaration, [this]);
-		lockOwnProperties(this, "name", "style");
+		this.#style = constructWebIDL(CSSPositionTryDescriptors, [this, initialCssText]);
+		lockOwnProperties(this, "name");
+	}
+	get style() {
+		return this.#style;
+	}
+	set style(cssText) {
+		this.#style.cssText = `${cssText}`;
 	}
 	get cssText() {
 		return `@position-try ${this.name} {${this.style.cssText === "" ? "" : ` ${this.style.cssText}`} }`;
@@ -1502,10 +1723,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() {
@@ -1816,17 +2037,20 @@ var CSSFontFeatureValuesRule = class extends CSSRule {
 var CSSStyleRule = class extends CSSGroupingRule {
 	style;
 	#selectorText;
-	constructor(selectorText) {
+	#namespaces() {
+		return namespaceText(this.parentStyleSheet);
+	}
+	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() {
 		return this.#selectorText;
 	}
 	set selectorText(value) {
-		const normalized = normalizeSelectorText(`${value}`, ruleResourceBudgets.get(this) ?? defaultResourceBudget);
+		const normalized = normalizeSelectorText(`${value}`, ruleResourceBudgets.get(this) ?? defaultResourceBudget, this.#namespaces());
 		if (normalized === null) return;
 		this.#selectorText = normalized;
 	}
@@ -1882,17 +2106,24 @@ function describeRuleSafe(rule, strict) {
 		declarations: rule.style.serializeSafe("  ", strict),
 		children: ruleTree.children(rule)
 	};
+	if (rule instanceof CSSApplyStatementRule && rule.getArguments().length === 1 && rule.getArguments()[0] === "") return {
+		kind: "raw",
+		cssText: `@apply ${rule.name}({ });`
+	};
 	if (!(rule instanceof CSSGroupingRule)) return {
 		kind: "raw",
 		cssText: rule.cssText
 	};
 	return {
 		kind: "block",
-		header: groupingRuleHeader(rule),
+		header: rule instanceof CSSApplyBlockRule && rule.getArguments().length === 1 && rule.getArguments()[0] === "" ? `@apply ${rule.name}({ })` : groupingRuleHeader(rule),
 		children: ruleTree.children(rule)
 	};
 }
 function groupingRuleHeader(rule) {
+	const mixinHeader = mixinRuleHeaders.get(rule);
+	if (mixinHeader !== void 0) return mixinHeader;
+	if (rule instanceof CSSStyleRule) return rule.selectorText;
 	if (rule instanceof CSSFunctionRule) return functionRuleHeaders.get(rule) ?? "@function";
 	if (rule instanceof CSSMediaRule) return `@media ${rule.media.mediaText}`;
 	if (rule instanceof CSSSupportsRule) return `@supports ${rule.conditionText}`;
@@ -1944,12 +2175,13 @@ function parseImportPrelude(prelude) {
 		supports
 	};
 }
-function createRuleFromNative(description, reportDiagnostic, preserveImports, resourceBudget) {
-	return constructWithResourceBudget(() => createRuleTreeFromNative(description, reportDiagnostic, preserveImports, resourceBudget), resourceBudget);
+function createRuleFromNative(description, reportDiagnostic, preserveImports, resourceBudget, parentRule = null) {
+	return constructWithResourceBudget(() => createRuleTreeFromNative(description, reportDiagnostic, preserveImports, resourceBudget, parentRule), resourceBudget);
 }
-function createRuleTreeFromNative(description, reportDiagnostic, preserveImports, resourceBudget) {
+function createRuleTreeFromNative(description, reportDiagnostic, preserveImports, resourceBudget, parentRule) {
 	const root = createRuleShellFromNative(description, reportDiagnostic, preserveImports, resourceBudget);
 	if (!root) return null;
+	attachRuleTree(root, parentRule, parentRule?.parentStyleSheet ?? null);
 	const pending = [{
 		description,
 		rule: root
@@ -1961,9 +2193,10 @@ function createRuleTreeFromNative(description, reportDiagnostic, preserveImports
 		const childFrames = [];
 		for (const childDescription of current.description.children) {
 			if (isNativeMetadataRule(childDescription)) continue;
+			if (!isMixinContextAllowed(childDescription.kind, current.rule)) continue;
 			const child = createRuleShellFromNative(childDescription, reportDiagnostic, preserveImports, resourceBudget);
 			if (!child) continue;
-			if (child instanceof CSSFunctionDeclarations && child.style.length === 0) continue;
+			if ((child instanceof CSSFunctionDeclarations || child instanceof CSSNestedDeclarations) && child.style.length === 0) continue;
 			if (current.rule instanceof CSSKeyframesRule && !(child instanceof CSSKeyframeRule)) continue;
 			children.push(child);
 			childFrames.push({
@@ -1981,29 +2214,24 @@ function createRuleTreeFromNative(description, reportDiagnostic, preserveImports
 	return root;
 }
 function isNativeMetadataRule(description) {
-	return description.kind === "function-parameter" || description.kind === "property-descriptor" || description.kind === "view-transition-type" || description.kind === "layer-name";
+	return description.kind === "function-parameter" || description.kind === "mixin-argument" || description.kind === "property-descriptor" || description.kind === "view-transition-type" || description.kind === "layer-name";
 }
 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, ""));
@@ -2016,39 +2244,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);
@@ -2089,7 +2302,8 @@ function createRuleShellFromNative(description, reportDiagnostic, preserveImport
 			description.children.filter((candidate) => candidate.kind === "view-transition-type").map((candidate) => candidate.prelude),
 			description.cssText
 		]);
-		case "function": {
+		case "function":
+		case "mixin": {
 			const parameters = description.children.filter((candidate) => candidate.kind === "function-parameter").map((candidate) => {
 				const defaultValue = candidate.children.find((child) => child.kind === "property-descriptor" && child.prelude === "default-value");
 				return defaultValue ? {
@@ -2101,13 +2315,35 @@ function createRuleShellFromNative(description, reportDiagnostic, preserveImport
 					type: candidate.declarations
 				};
 			});
-			rule = constructWebIDL(CSSFunctionRule, [
+			rule = description.kind === "mixin" ? constructWebIDL(CSSMixinRule, [description.prelude, parameters]) : constructWebIDL(CSSFunctionRule, [
 				description.prelude,
 				parameters,
 				description.declarations
 			]);
 			break;
 		}
+		case "apply-block":
+		case "apply-statement": {
+			const arguments_ = description.children.filter((child) => child.kind === "mixin-argument");
+			const args = arguments_.map((argument) => argument.declarations);
+			const header = `@apply ${serializeNativeIdentifier(description.prelude)}${args.length ? `(${arguments_.map((argument) => argument.cssText).join(", ")})` : ""}`;
+			rule = description.kind === "apply-block" ? constructWebIDL(CSSApplyBlockRule, [
+				description.prelude,
+				args,
+				header
+			]) : constructWebIDL(CSSApplyStatementRule, [
+				description.prelude,
+				args,
+				header
+			]);
+			break;
+		}
+		case "contents-block":
+			rule = constructWebIDL(CSSContentsBlockRule);
+			break;
+		case "contents-statement":
+			rule = constructWebIDL(CSSContentsStatementRule);
+			break;
 		case "namespace": return constructWebIDL(CSSNamespaceRule, [
 			nativeRuleDescriptor(description, "namespace-uri"),
 			nativeRuleDescriptor(description, "prefix"),
@@ -2145,7 +2381,7 @@ function nativeRuleDescriptor(description, name) {
 function hydrateCounterStyleDescriptors(rule, declarations, resourceBudget) {
 	for (const descriptor of parseNativeCounterStyleDescriptors(declarations, resourceBudget)) rule.setParsedDescriptor(descriptor.name, descriptor.value);
 }
-function parseStrictRule(ruleText, reportDiagnostic, preserveImports = false, parentRule = null, resourceBudget = defaultResourceBudget) {
+function parseStrictRule(ruleText, reportDiagnostic, preserveImports = false, parentRule = null, resourceBudget = defaultResourceBudget, namespaces = namespaceText(parentRule?.parentStyleSheet ?? null)) {
 	if (parentRule instanceof CSSPageRule) {
 		const page = parseNativeRule(`@page { ${ruleText} }`, resourceBudget);
 		if (page?.kind !== "page" || page.children.length !== 1) return null;
@@ -2155,7 +2391,41 @@ function parseStrictRule(ruleText, reportDiagnostic, preserveImports = false, pa
 	}
 	const description = parseNativeRule(ruleText, resourceBudget) ?? (parentRule && hasFunctionAncestor(parentRule) ? parseNativeRuleWithErrorRecovery(ruleText, resourceBudget) : null);
 	if (!description || description.kind === "import" && !preserveImports) return null;
-	return createRuleFromNative(description, reportDiagnostic, preserveImports, resourceBudget);
+	if (!isMixinContextAllowed(description.kind, parentRule)) return null;
+	const validSelector = (rule) => {
+		if (rule.kind !== "style" || !rule.prelude.includes("|")) return true;
+		const normalized = normalizeNativeSelector(rule.prelude, resourceBudget, namespaces);
+		if (normalized === null) return false;
+		rule.prelude = normalized;
+		return true;
+	};
+	if (!validSelector(description)) return null;
+	const pending = [description];
+	while (pending.length) {
+		const current = pending.pop();
+		current.children = current.children.filter(validSelector);
+		for (const child of current.children) pending.push(child);
+	}
+	return createRuleFromNative(description, reportDiagnostic, preserveImports, resourceBudget, parentRule);
+}
+function isMixinContextAllowed(kind, parent) {
+	if (![
+		"mixin",
+		"apply-block",
+		"apply-statement",
+		"contents-block",
+		"contents-statement",
+		"private"
+	].includes(kind)) return true;
+	let nested = false;
+	let mixin = false;
+	for (let current = parent; current; current = current.parentRule) {
+		if (current instanceof CSSFunctionRule) return false;
+		if (current instanceof CSSStyleRule || current instanceof CSSMixinRule) nested = true;
+		if (current instanceof CSSMixinRule) mixin = true;
+	}
+	if (kind === "mixin") return !nested;
+	return kind.startsWith("contents-") ? mixin : nested;
 }
 function hasFunctionAncestor(rule) {
 	let current = rule;
@@ -2179,11 +2449,17 @@ function genericRuleType(name) {
 	}
 }
 function parseStyleSheetRules(cssText, reportDiagnostic, preserveImports, resourceBudget) {
+	let namespaces = "";
+	let namespaceRulesAllowed = true;
 	const rules = [];
 	let parsedRuleCount = 0;
 	for (const rawRule of scanTopLevelRules(cssText, resourceBudget)) {
-		const rule = parseStrictRule(rawRule, reportDiagnostic, preserveImports, null, resourceBudget);
+		const rule = parseStrictRule(rawRule, reportDiagnostic, preserveImports, null, resourceBudget, namespaces);
 		if (rule) {
+			if (rule instanceof CSSNamespaceRule) {
+				if (!namespaceRulesAllowed) continue;
+				namespaces += rule.cssText;
+			} else if (!(rule instanceof CSSImportRule)) namespaceRulesAllowed = false;
 			parsedRuleCount += ruleForestSize([rule]);
 			assertRuleCountBudget(parsedRuleCount, resourceBudget);
 			rules.push(rule);
@@ -2195,38 +2471,50 @@ function parseStyleSheetRules(cssText, reportDiagnostic, preserveImports, resour
 		assertRuleCountBudget(parsedRuleCount, resourceBudget);
 		rules.push(opaque);
 	}
-	return rules;
+	return {
+		rules,
+		namespaces
+	};
 }
-/** A mutable, browser-shaped authoring stylesheet. */
-var CSSStyleSheet = class {
-	cssRules;
+const stylesheetConstructionKey = Symbol("StyleSheet construction");
+/** Shared stylesheet metadata. Instances are created through CSSStyleSheet. */
+var StyleSheet = class {
 	media;
 	ownerNode = null;
 	parentStyleSheet = null;
-	ownerRule = null;
 	title = null;
 	type = "text/css";
 	disabled;
+	constructor(options = {}, resourceBudget = defaultResourceBudget, key) {
+		if (key !== stylesheetConstructionKey) throw new TypeError("Illegal constructor");
+		const media = options.media === void 0 ? "" : `${options.media}`;
+		this.media = constructWithResourceBudget(() => constructWebIDL(MediaList, [media]), resourceBudget);
+		this.disabled = Boolean(options.disabled);
+	}
+	get href() {
+		return regularSheetMetadata.get(this)?.href ?? null;
+	}
+};
+/** A mutable, browser-shaped authoring stylesheet. */
+var CSSStyleSheet = class extends StyleSheet {
+	cssRules;
+	ownerRule = null;
 	#rules = [];
 	#diagnostics;
 	#constructedBaseURL;
 	constructor(options = {}) {
 		const normalizedOptions = options ?? {};
 		const resourceBudget = normalizeResourceBudget(normalizedOptions.resourceBudget);
+		super(normalizedOptions, resourceBudget, stylesheetConstructionKey);
 		sheetResourceBudgets.set(this, resourceBudget);
 		sheetRuleArrays.set(this, this.#rules);
 		sheetRuleCounts.set(this, 0);
+		sheetNamespaces.set(this, "");
 		this.#diagnostics = Boolean(normalizedOptions.diagnostics) ? [] : null;
 		this.#constructedBaseURL = normalizedOptions.baseURL === void 0 ? "about:blank" : `${normalizedOptions.baseURL}`;
-		const media = normalizedOptions.media === void 0 ? "" : `${normalizedOptions.media}`;
-		this.media = constructWithResourceBudget(() => constructWebIDL(MediaList, [media]), resourceBudget);
-		this.disabled = Boolean(normalizedOptions.disabled);
 		this.cssRules = constructInternally(() => constructWebIDL(CSSRuleList, [this.#rules]));
 		lockOwnProperties(this, "cssRules", "media", "ownerNode", "parentStyleSheet", "ownerRule", "title", "type");
 	}
-	get href() {
-		return regularSheetMetadata.get(this)?.href ?? null;
-	}
 	get baseURL() {
 		return regularSheetMetadata.get(this)?.baseURL ?? this.#constructedBaseURL;
 	}
@@ -2239,14 +2527,16 @@ var CSSStyleSheet = class {
 		if (normalizedIndex > this.#rules.length) throw new DOMException("The index is outside the allowed range.", "IndexSizeError");
 		const regular = regularSheetMetadata.has(this);
 		const resourceBudget = sheetResourceBudgets.get(this) ?? defaultResourceBudget;
-		const rule = parseStrictRule(`${ruleText}`, this.#reportDiagnostic, regular, null, resourceBudget);
+		const rule = parseStrictRule(`${ruleText}`, this.#reportDiagnostic, regular, null, resourceBudget, namespaceText(this));
 		if (!rule) throw new DOMException("The rule could not be parsed.", "SyntaxError");
+		if (rule instanceof CSSNamespaceRule && !permitsNamespaceMutation(this.#rules)) throw new DOMException("Namespace rules cannot change after other rules exist.", "InvalidStateError");
 		const precedingRules = this.#rules.slice(0, normalizedIndex);
 		const followingRules = this.#rules.slice(normalizedIndex);
 		if (rule instanceof CSSImportRule ? precedingRules.some((candidate) => !(candidate instanceof CSSImportRule)) : followingRules.some((candidate) => candidate instanceof CSSImportRule)) throw new DOMException("The rule violates stylesheet ordering.", "HierarchyRequestError");
 		const insertedCount = assertRuleInsertionBudget(this, rule, resourceBudget);
 		attachRuleTree(rule, null, this);
 		this.#rules.splice(normalizedIndex, 0, rule);
+		if (rule instanceof CSSNamespaceRule) sheetNamespaces.set(this, namespaceRulesText(this.#rules));
 		adjustSheetRuleCount(this, insertedCount);
 		return normalizedIndex;
 	}
@@ -2254,15 +2544,18 @@ var CSSStyleSheet = class {
 		requireArguments(arguments.length, 1, "CSSStyleSheet", "deleteRule");
 		const normalizedIndex = toUnsignedLong(index);
 		if (normalizedIndex >= this.#rules.length) throw new DOMException("The index is outside the allowed range.", "IndexSizeError");
+		if (this.#rules[normalizedIndex] instanceof CSSNamespaceRule && !permitsNamespaceMutation(this.#rules)) throw new DOMException("Namespace rules cannot change while other rules exist.", "InvalidStateError");
 		const [removed] = this.#rules.splice(normalizedIndex, 1);
 		if (!removed) return;
+		if (removed instanceof CSSNamespaceRule) sheetNamespaces.set(this, namespaceRulesText(this.#rules));
 		adjustSheetRuleCount(this, -ruleForestSize([removed]));
 		attachRuleTree(removed, null, null);
 	}
 	replaceSync(cssText) {
 		requireArguments(arguments.length, 1, "CSSStyleSheet", "replaceSync");
-		const replacement = parseStyleSheetRules(`${cssText}`, this.#reportDiagnostic, regularSheetMetadata.has(this), sheetResourceBudgets.get(this) ?? defaultResourceBudget);
+		const { rules: replacement, namespaces } = parseStyleSheetRules(`${cssText}`, this.#reportDiagnostic, regularSheetMetadata.has(this), sheetResourceBudgets.get(this) ?? defaultResourceBudget);
 		for (const rule of this.#rules) attachRuleTree(rule, null, null);
+		sheetNamespaces.set(this, namespaces);
 		for (const rule of replacement) attachRuleTree(rule, null, this);
 		this.#rules.splice(0, this.#rules.length, ...replacement);
 		sheetRuleCounts.set(this, ruleForestSize(replacement));
@@ -2298,6 +2591,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, SheetOMSerializationError, parseStyleSheet };
+export { CSS, CSSApplyBlockRule, CSSApplyStatementRule, CSSConditionRule, CSSContainerRule, CSSContentsBlockRule, CSSContentsStatementRule, CSSCounterStyleRule, CSSFontFaceRule, CSSFontFeatureValuesMap, CSSFontFeatureValuesRule, CSSFontPaletteValuesRule, CSSFunctionDeclarations, CSSFunctionDescriptors, CSSFunctionRule, CSSGroupingRule, CSSImportRule, CSSKeyframeRule, CSSKeyframesRule, CSSLayerBlockRule, CSSLayerStatementRule, CSSMarginRule, CSSMediaRule, CSSMixinRule, CSSNamespaceRule, CSSNestedDeclarations, CSSPageRule, CSSPositionTryDescriptors, CSSPositionTryRule, CSSPropertyRule, CSSRule, CSSRuleList, CSSScopeRule, CSSStartingStyleRule, CSSStyleDeclaration, CSSStyleRule, CSSStyleSheet, CSSSupportsRule, CSSViewTransitionRule, MediaList, SheetOMSerializationError, StyleSheet, parseStyleSheet };
 
 //# sourceMappingURL=index.js.map