deckjsx 0.4.0 → 0.4.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as isContentNode, c as toLegacyJsxNode, d as Slide, f as Text, i as isAuthorNode, l as Image, m as isAuthorTreeNode, n as createElement, o as isSlideNode, p as View, s as isLegacyAuthorNode, t as Fragment, u as Shape } from "./jsx-Crlbye9V.mjs";
+import { a as isContentNode, c as toLegacyJsxNode, d as Shape, f as Slide, h as isAuthorTreeNode, i as isAuthorNode, l as isAuthoredTag, m as View, n as createElement, o as isSlideNode, p as Text, s as isLegacyAuthorNode, t as Fragment, u as Image } from "./jsx-B9HB9_cS.mjs";
 import { createRequire } from "node:module";
 import { mkdir, writeFile } from "node:fs/promises";
 import { dirname } from "node:path";
@@ -4502,7 +4502,7 @@ function assetEntityId(material) {
 //#region src/graph/roles.ts
 function semanticKindForTag(tag) {
 	if (tag === "img") return "image";
-	if (tag === "p" || tag.startsWith("h") || tag === "span") return tag === "span" ? "textRun" : "text";
+	if (tag === "p" || /^h[1-6]$/.test(tag) || tag === "span") return tag === "span" ? "textRun" : "text";
 	return "container";
 }
 function semanticKindForComponent(component) {
@@ -4957,6 +4957,7 @@ function buildSemanticAuthorGraph(roots) {
 }
 //#endregion
 //#region src/style/resolve.ts
+const EMPTY_CLASS_NAMES = /* @__PURE__ */ new Set();
 function sourceKeyFor(source) {
 	return !source || source.kind === "root" ? "root" : source.sourceIdentity;
 }
@@ -4981,11 +4982,10 @@ function targetsFor(definition) {
 function invalidClassNameReason(name) {
 	if (name.trim().length === 0) return "Style Class names must not be empty.";
 	if (/\s/.test(name)) return "Style Class names must not contain whitespace.";
-	if (name.includes("/")) return "Style Class names must not contain /.";
 }
 function styleDiagnostic(input) {
 	return diagnostic({
-		severity: "error",
+		severity: input.severity ?? "error",
 		code: input.code,
 		title: input.title,
 		message: input.message,
@@ -4999,51 +4999,243 @@ function styleDiagnostic(input) {
 function compareSpecificity(left, right) {
 	return left[0] - right[0] || left[1] - right[1] || left[2] - right[2];
 }
-function parseSelector(selector) {
-	const value = selector.trim();
-	if (value.length === 0 || /[\s>+~#:[\],*]/.test(value)) return;
+function addSpecificity(left, right) {
+	return [
+		left[0] + right[0],
+		left[1] + right[1],
+		left[2] + right[2]
+	];
+}
+function isHexDigit(value) {
+	return value !== void 0 && /^[0-9a-fA-F]$/.test(value);
+}
+function isSelectorDelimiter(value) {
+	return value === void 0 || /[\s.#:[\]>+~*,/]/.test(value);
+}
+function decodeEscape(input, start) {
+	const next = input[start + 1];
+	if (next === void 0 || next === "\n" || next === "\r" || next === "\f") return;
+	if (!isHexDigit(next)) return {
+		value: next,
+		next: start + 2
+	};
+	let index = start + 1;
+	let hex = "";
+	while (index < input.length && hex.length < 6 && isHexDigit(input[index])) {
+		hex += input[index];
+		index += 1;
+	}
+	if (/\s/.test(input[index] ?? "")) index += 1;
+	const codePoint = Number.parseInt(hex, 16);
+	if (codePoint === 0 || codePoint > 1114111) return {
+		value: "�",
+		next: index
+	};
+	return {
+		value: String.fromCodePoint(codePoint),
+		next: index
+	};
+}
+function parseClassIdentifier(input, start) {
+	let index = start;
+	let value = "";
+	while (index < input.length && !isSelectorDelimiter(input[index])) {
+		if (input[index] === "\\") {
+			const escaped = decodeEscape(input, index);
+			if (!escaped) return;
+			value += escaped.value;
+			index = escaped.next;
+			continue;
+		}
+		value += input[index];
+		index += 1;
+	}
+	return value.length === 0 ? void 0 : {
+		value,
+		next: index
+	};
+}
+function cssEscapeIdentifier(value) {
+	let escaped = "";
+	const firstCodePoint = value.codePointAt(0);
+	let position = 0;
+	for (const char of value) {
+		const codePoint = char.codePointAt(0);
+		if (codePoint === void 0) continue;
+		if (codePoint === 0) {
+			escaped += "�";
+			position += 1;
+			continue;
+		}
+		if (codePoint >= 1 && codePoint <= 31 || codePoint === 127 || position === 0 && codePoint >= 48 && codePoint <= 57 || position === 1 && codePoint >= 48 && codePoint <= 57 && firstCodePoint === 45) {
+			escaped += `\\${codePoint.toString(16)} `;
+			position += 1;
+			continue;
+		}
+		if (position === 0 && value === "-" && codePoint === 45) {
+			escaped += `\\${char}`;
+			position += 1;
+			continue;
+		}
+		if (codePoint >= 128 || codePoint === 45 || codePoint === 95 || codePoint >= 48 && codePoint <= 57 || codePoint >= 65 && codePoint <= 90 || codePoint >= 97 && codePoint <= 122) {
+			escaped += char;
+			position += 1;
+			continue;
+		}
+		escaped += `\\${char}`;
+		position += 1;
+	}
+	return escaped;
+}
+function parseSelectorPart(value) {
+	if (value.length === 0) return;
 	const tag = value.match(/^[a-z][a-z0-9-]*/)?.[0];
+	if (tag !== void 0 && !isAuthoredTag(tag)) return;
 	const rest = tag ? value.slice(tag.length) : value;
 	if (rest.length === 0) return {
-		...tag ? { tag } : {},
-		classes: [],
+		part: {
+			...tag ? { tag } : {},
+			classes: []
+		},
 		specificity: [
 			0,
 			0,
 			tag ? 1 : 0
 		]
 	};
-	const classMatches = [...rest.matchAll(/\.([_a-zA-Z-][_a-zA-Z0-9-]*)/g)];
-	if (classMatches.map((match) => match[0]).join("") !== rest || classMatches.length === 0) return;
+	const classes = [];
+	let index = 0;
+	while (index < rest.length) {
+		if (rest[index] !== ".") return;
+		const parsedClass = parseClassIdentifier(rest, index + 1);
+		if (!parsedClass) return;
+		classes.push(parsedClass.value);
+		index = parsedClass.next;
+	}
 	return {
-		...tag ? { tag } : {},
-		classes: classMatches.map((match) => match[1]),
+		part: {
+			...tag ? { tag } : {},
+			classes
+		},
 		specificity: [
 			0,
-			classMatches.length,
+			classes.length,
 			tag ? 1 : 0
 		]
 	};
 }
+function parseSelector(selector) {
+	const value = selector.trim();
+	if (value.length === 0) return;
+	const parsedParts = splitSelectorParts(value).map(parseSelectorPart);
+	const parts = [];
+	let specificity = [
+		0,
+		0,
+		0
+	];
+	for (const parsedPart of parsedParts) {
+		if (parsedPart === void 0) return;
+		parts.push(parsedPart.part);
+		specificity = addSpecificity(specificity, parsedPart.specificity);
+	}
+	if (parts.length === 0) return;
+	return {
+		parts,
+		specificity
+	};
+}
+function splitSelectorParts(value) {
+	const parts = [];
+	let current = "";
+	let index = 0;
+	while (index < value.length) {
+		const char = value[index];
+		if (/\s/.test(char)) {
+			if (current.length > 0) {
+				parts.push(current);
+				current = "";
+			}
+			index += 1;
+			continue;
+		}
+		if (char !== "\\") {
+			current += char;
+			index += 1;
+			continue;
+		}
+		const next = value[index + 1];
+		current += char;
+		if (isHexDigit(next)) {
+			let hexIndex = index + 1;
+			let hexLength = 0;
+			while (hexIndex < value.length && hexLength < 6 && isHexDigit(value[hexIndex])) {
+				current += value[hexIndex];
+				hexIndex += 1;
+				hexLength += 1;
+			}
+			if (/\s/.test(value[hexIndex] ?? "")) {
+				current += value[hexIndex];
+				hexIndex += 1;
+			}
+			index = hexIndex;
+			continue;
+		}
+		if (next !== void 0) {
+			current += next;
+			index += 2;
+			continue;
+		}
+		index += 1;
+	}
+	if (current.length > 0) parts.push(current);
+	return parts;
+}
 function selectorFor(className, target) {
-	if (target === void 0) return `.${className}`;
+	if (target === void 0) return `.${cssEscapeIdentifier(className)}`;
 	return target;
 }
-function effectiveSpecificity(className, selector) {
-	const includesClassName = selector.classes.includes(className);
-	return [
-		selector.specificity[0],
-		selector.specificity[1] + (includesClassName ? 0 : 1),
-		selector.specificity[2]
-	];
+function rightmostSelectorHasClass(selector, className) {
+	return selector.parts.at(-1)?.classes.includes(className) ?? false;
+}
+function collectSelectorConditionClassNames(className, selector) {
+	return selector.parts.flatMap((part, index) => index === selector.parts.length - 1 ? part.classes.filter((name) => name !== className) : part.classes);
+}
+function classNamesFor(node, context) {
+	return context.classNamesByNodeId.get(node.id) ?? EMPTY_CLASS_NAMES;
+}
+function selectorPartMatches(part, node, context) {
+	if (part.tag !== void 0 && node.authoredTag !== part.tag) return false;
+	const activeClassNames = classNamesFor(node, context);
+	return part.classes.every((name) => activeClassNames.has(name));
+}
+function ancestorMatches(parts, node, context) {
+	let parentId = context.parentById.get(node.id);
+	for (let index = parts.length - 1; index >= 0; index -= 1) {
+		const part = parts[index];
+		let matched = false;
+		while (parentId !== void 0) {
+			const parent = context.graph.nodes.get(parentId);
+			parentId = context.parentById.get(parentId);
+			if (!parent) continue;
+			if (selectorPartMatches(part, parent, context)) {
+				matched = true;
+				break;
+			}
+		}
+		if (!matched) return false;
+	}
+	return true;
 }
-function selectorMatches(className, selector, node, activeClassNames) {
+function selectorMatches(className, selector, node, activeClassNames, context) {
 	if (!activeClassNames.has(className)) return false;
-	if (selector.tag !== void 0 && node.authoredTag !== selector.tag) return false;
-	return selector.classes.every((name) => activeClassNames.has(name));
+	const targetPart = selector.parts.at(-1);
+	if (!targetPart || !selectorPartMatches(targetPart, node, context)) return false;
+	return ancestorMatches(selector.parts.slice(0, -1), node, context);
 }
 function registerStylesheets(sourceKey, stylesheets, diagnostics) {
 	const classes = /* @__PURE__ */ new Map();
+	const selectorConditionClassNames = /* @__PURE__ */ new Set();
 	let ruleIndex = 0;
 	stylesheets?.forEach((stylesheet, stylesheetIndex) => {
 		Object.entries(stylesheet.classes).forEach(([className, definition]) => {
@@ -5058,26 +5250,66 @@ function registerStylesheets(sourceKey, stylesheets, diagnostics) {
 				}));
 				return;
 			}
+			const targets = targetsFor(definition);
+			const selectorTexts = targets === void 0 ? [selectorFor(className, void 0)] : targets;
+			let hasTargetDiagnostics = false;
+			const selectors = [];
+			selectorTexts.forEach((selectorText) => {
+				const selector = parseSelector(selectorText);
+				if (!selector) {
+					hasTargetDiagnostics = true;
+					diagnostics.push(styleDiagnostic({
+						code: "E_STYLE_UNSUPPORTED_SELECTOR",
+						title: "unsupported stylesheet selector",
+						path,
+						message: `Selector "${selectorText}" is not supported in v0.4.1.`,
+						help: ["Use class, tag, compound tag/class, or descendant selectors such as .title, p.title, or .card .caption."]
+					}));
+					return;
+				}
+				if (!rightmostSelectorHasClass(selector, className)) {
+					hasTargetDiagnostics = true;
+					diagnostics.push(styleDiagnostic({
+						code: "E_STYLE_INVALID_CLASS_TARGET",
+						title: "style class target must include its class selector",
+						path,
+						message: `Style Class "${className}" target must include .${cssEscapeIdentifier(className)} in the rightmost selector.`,
+						help: ["Write the target as a CSS selector such as p.title or .card .title."]
+					}));
+					return;
+				}
+				collectSelectorConditionClassNames(className, selector).forEach((name) => selectorConditionClassNames.add(name));
+				selectors.push({
+					text: selectorText,
+					selector
+				});
+			});
 			const list = classes.get(className) ?? [];
 			classes.set(className, [...list, {
 				className,
 				definition,
 				stylesheetIndex,
 				ruleIndex: ruleIndex++,
-				path
+				path,
+				selectors,
+				hasTargetDiagnostics
 			}]);
 		});
 	});
-	return classes;
+	return {
+		classes,
+		selectorConditionClassNames
+	};
 }
-function resolveClassMatches(node, entity, registry, diagnostics) {
+function resolveClassMatches(node, entity, registry, context, diagnostics) {
 	const classRefs = entity.authored.classRefs ?? [];
 	const activeClassNames = new Set(classRefs.map((ref) => ref.name));
 	const matched = [];
 	[...activeClassNames].forEach((className) => {
-		const registrations = registry.get(className);
+		const registrations = registry.classes.get(className);
 		if (!registrations || registrations.length === 0) {
-			diagnostics.push(styleDiagnostic({
+			if (!registry.selectorConditionClassNames.has(className)) diagnostics.push(styleDiagnostic({
+				severity: "warning",
 				code: "E_STYLE_UNKNOWN_CLASS",
 				title: "unknown style class",
 				path: node.origin.path,
@@ -5087,33 +5319,20 @@ function resolveClassMatches(node, entity, registry, diagnostics) {
 			return;
 		}
 		const before = matched.length;
-		let hasSelectorDiagnostic = false;
+		let hasTargetDiagnostics = false;
 		registrations.forEach((registration) => {
-			const targets = targetsFor(registration.definition);
-			(targets === void 0 ? [void 0] : targets).forEach((target) => {
-				const selectorText = selectorFor(className, target);
-				const selector = parseSelector(selectorText);
-				if (!selector) {
-					hasSelectorDiagnostic = true;
-					diagnostics.push(styleDiagnostic({
-						code: "E_STYLE_UNSUPPORTED_SELECTOR",
-						title: "unsupported stylesheet selector",
-						path: registration.path,
-						message: `Selector "${selectorText}" is not supported in v0.4.0.`,
-						help: ["Use a simple class selector such as .title or a compound selector such as p.title."]
-					}));
-					return;
-				}
-				if (!selectorMatches(className, selector, node, activeClassNames)) return;
+			hasTargetDiagnostics ||= registration.hasTargetDiagnostics;
+			registration.selectors.forEach(({ selector, text }) => {
+				if (!selectorMatches(className, selector, node, activeClassNames, context)) return;
 				matched.push({
 					registration,
-					selector: selectorText,
-					specificity: effectiveSpecificity(className, selector),
+					selector: text,
+					specificity: selector.specificity,
 					style: styleObjectFor(registration.definition)
 				});
 			});
 		});
-		if (matched.length === before && !hasSelectorDiagnostic) diagnostics.push(styleDiagnostic({
+		if (matched.length === before && !hasTargetDiagnostics) diagnostics.push(styleDiagnostic({
 			code: "E_STYLE_TARGET_MISMATCH",
 			title: "style class target does not match element",
 			path: node.origin.path,
@@ -5133,10 +5352,10 @@ function applyProperties(style, source, properties) {
 		};
 	});
 }
-function resolvedStyleFor(node, entity, registry, diagnostics) {
+function resolvedStyleFor(node, entity, registry, context, diagnostics) {
 	const properties = {};
 	const appliedClasses = [];
-	resolveClassMatches(node, entity, registry, diagnostics).forEach((match) => {
+	resolveClassMatches(node, entity, registry, context, diagnostics).forEach((match) => {
 		const source = {
 			layer: "class",
 			className: match.registration.className,
@@ -5161,11 +5380,33 @@ function nodeByStyleRef(graph) {
 	});
 	return nodes;
 }
+function parentMapFor(graph) {
+	const parentById = /* @__PURE__ */ new Map();
+	graph.nodes.forEach((node) => {
+		("children" in node ? node.children : "inlineChildren" in node ? node.inlineChildren : []).forEach((childId) => {
+			parentById.set(childId, node.id);
+		});
+	});
+	return parentById;
+}
+function classNamesByNodeIdFor(graph) {
+	const classNamesByNodeId = /* @__PURE__ */ new Map();
+	graph.nodes.forEach((node) => {
+		const classRefs = node.styleRef ? graph.styles.get(node.styleRef)?.authored.classRefs : void 0;
+		classNamesByNodeId.set(node.id, new Set(classRefs?.map((ref) => ref.name) ?? []));
+	});
+	return classNamesByNodeId;
+}
 function resolveStyles(graph, roots) {
 	const diagnostics = [];
 	const stylesheets = classesBySource(roots);
 	const registries = /* @__PURE__ */ new Map();
 	const nodes = nodeByStyleRef(graph);
+	const selectorContext = {
+		graph,
+		parentById: parentMapFor(graph),
+		classNamesByNodeId: classNamesByNodeIdFor(graph)
+	};
 	const resolvedStyles = /* @__PURE__ */ new Map();
 	stylesheets.forEach((sourceStylesheets, sourceKey) => {
 		registries.set(sourceKey, registerStylesheets(sourceKey, sourceStylesheets, diagnostics));
@@ -5179,7 +5420,7 @@ function resolveStyles(graph, roots) {
 			registry = registerStylesheets(sourceKey, stylesheets.get(sourceKey), diagnostics);
 			registries.set(sourceKey, registry);
 		}
-		resolvedStyles.set(id, resolvedStyleFor(node, entity, registry, diagnostics));
+		resolvedStyles.set(id, resolvedStyleFor(node, entity, registry, selectorContext, diagnostics));
 	});
 	return {
 		resolvedStyles,

package/dist/{jsx-Crlbye9V.mjs → jsx-B9HB9_cS.mjs}

@@ -287,4 +287,4 @@ function isContentNode(value) {
 	return isAuthorNode(value) && value.kind !== "slide";
 }
 //#endregion
-export { isContentNode as a, toLegacyJsxNode as c, Slide as d, Text as f, isAuthorNode as i, Image as l, isAuthorTreeNode as m, createElement as n, isSlideNode as o, View as p, createElementWithMetadata as r, isLegacyAuthorNode as s, Fragment as t, Shape as u };
+export { isContentNode as a, toLegacyJsxNode as c, Shape as d, Slide as f, isAuthorTreeNode as h, isAuthorNode as i, isAuthoredTag as l, View as m, createElement as n, isSlideNode as o, Text as p, createElementWithMetadata as r, isLegacyAuthorNode as s, Fragment as t, Image as u };

package/dist/jsx-dev-runtime.mjs

@@ -1,4 +1,4 @@
-import { r as createElementWithMetadata, t as Fragment } from "./jsx-Crlbye9V.mjs";
+import { r as createElementWithMetadata, t as Fragment } from "./jsx-B9HB9_cS.mjs";
 import { jsx, jsxs } from "./jsx-runtime.mjs";
 //#region src/jsx-dev-runtime.ts
 function sourceSpanFromDevSource(source) {

package/dist/jsx-runtime.mjs

@@ -1,4 +1,4 @@
-import { r as createElementWithMetadata, t as Fragment } from "./jsx-Crlbye9V.mjs";
+import { r as createElementWithMetadata, t as Fragment } from "./jsx-B9HB9_cS.mjs";
 //#region src/jsx-runtime.ts
 function jsx(type, props, key) {
 	return createElementWithMetadata(type, props, key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckjsx",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Generate PowerPoint presentations from TSX/JSX through a compiler pipeline.",
   "license": "MIT",
   "author": "deckjsx contributors",