@tsrx/core 0.1.27 → 0.1.29

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "repository": {
     "type": "git",
@@ -27,6 +27,9 @@
     "./types/acorn": {
       "types": "./types/acorn.d.ts"
     },
+    "./types/helpers": {
+      "types": "./types/helpers.d.ts"
+    },
     "./runtime/ref": {
       "types": "./types/runtime/ref.d.ts",
       "default": "./src/runtime/ref.js"

package/src/analyze/prune.js

@@ -756,11 +756,13 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		if (attribute.type !== 'JSXAttribute') continue;
 
 		const lowerCaseName = name.toLowerCase();
+		const accepted_names = [lowerCaseName, `$${lowerCaseName}`];
+		if (lowerCaseName === 'class') {
+			// React-style targets author the class attribute as `className`.
+			accepted_names.push('classname');
+		}
 		const attributeName = get_attribute_name(attribute);
-		if (
-			!attributeName ||
-			![lowerCaseName, `$${lowerCaseName}`].includes(attributeName.toLowerCase())
-		) {
+		if (!attributeName || !accepted_names.includes(attributeName.toLowerCase())) {
 			continue;
 		}
 

package/src/parse/index.js

@@ -2,6 +2,7 @@
 @import * as AST from 'estree'
 @import * as ESTreeJSX from 'estree-jsx'
 @import { Parse } from '../../types/parse'
+@import { NonEmptyString } from '../../types/helpers'
  */
 
 import * as acorn from 'acorn';
@@ -189,7 +190,7 @@ function elementTemplateClosingTagPlugin(Base) {
  * extend the base parser with framework-specific syntax.
  *
  * @param {...(AcornPlugin | Function)} plugins - Framework parser plugins to compose
- * @returns {(source: string, filename?: string, options?: any) => AST.Program} A parse function
+ * @returns {<T extends string>(source: string, filename: NonEmptyString<T>, options?: any) => AST.Program} A parse function
  */
 export function createParser(...plugins) {
 	const parser = /** @type {Parse.ParserConstructor} */ (
@@ -204,7 +205,7 @@ export function createParser(...plugins) {
 
 	/**
 	 * @param {string} source
-	 * @param {string} [filename]
+	 * @param {string} filename
 	 * @param {any} [options]
 	 * @returns {AST.Program}
 	 */

package/src/parse/parse-module.js

@@ -1,5 +1,6 @@
 /** @import * as AST from 'estree' */
 /** @import { ParseOptions } from '../../types/index' */
+/** @import { NonEmptyString } from '../../types/helpers' */
 
 import { createParser } from './index.js';
 import { TSRXPlugin } from '../plugin.js';
@@ -8,8 +9,9 @@ const parse = createParser(TSRXPlugin());
 
 /**
  * Parse source code to an ESTree AST using the TSRX parser.
+ * @template {string} T
  * @param {string} source
- * @param {string} [filename]
+ * @param {NonEmptyString<T>} filename
  * @param {ParseOptions} [options]
  * @returns {AST.Program}
  */

package/src/parse/style.js

@@ -1,6 +1,7 @@
 /** @import * as AST from 'estree' */
+/** @import { NonEmptyString } from '../../types/helpers' */
 
-import { simple_hash } from '../utils/hashing.js';
+import { strong_hash } from '../utils/hashing.js';
 
 const REGEX_MATCHER = /^[~^$*|]?=/;
 const REGEX_ATTRIBUTE_FLAGS = /^[a-zA-Z]+/;
@@ -110,16 +111,24 @@ class Parser {
 }
 
 /**
+ * @template {string} T
  * @param {string} content
+ * @param {{ filename: NonEmptyString<T>, line: number, column: number }} location position of the `<style>` tag in the source file
  * @param {{ loose?: boolean }} options
  * @returns {AST.CSS.StyleSheet}
  */
-export function parse_style(content, options) {
+export function parse_style(content, location, options) {
 	const parser = new Parser(content, options.loose || false);
 
+	// The filename and the position of the `<style>` tag keep the hash unique
+	// when identical content appears in multiple style blocks within a file or
+	// across files. The filename may be an absolute path, so this must be a
+	// pre-image-resistant hash to avoid leaking file structure into the bundle.
+	const hash_source = `${location.filename}:${location.line}:${location.column}:${content}`;
+
 	return {
 		source: content,
-		hash: `tsrx-${simple_hash(content)}`,
+		hash: `tsrx-${strong_hash(hash_source)}`,
 		type: 'StyleSheet',
 		children: read_body(parser),
 		start: 0,

package/src/plugin.js

@@ -547,7 +547,7 @@ export function TSRXPlugin(config) {
 				let index = start;
 				let value = '';
 				while (index < this.input.length) {
-					if (this.#isTemplateLineCommentStart(index)) {
+					if (this.#isTemplateLineCommentStart(index, start)) {
 						const comment_start = index;
 						const comment_start_loc = acorn.getLineInfo(this.input, comment_start);
 						index += 2;
@@ -600,6 +600,7 @@ export function TSRXPlugin(config) {
 						ch === CharCode.lessThan ||
 						ch === CharCode.openBrace ||
 						ch === CharCode.closeBrace ||
+						this.#isCodeBlockStart(index) ||
 						this.#isJSXControlFlowDirectiveAt(index)
 					) {
 						break;
@@ -961,14 +962,29 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
+			 * A `//` is a comment only when nothing but whitespace precedes it on its
+			 * line, or — given `run_start`, the position where the current text run
+			 * began (right after a sibling element, code block, or expression
+			 * container) — since that boundary. Once real text has begun, `//` is
+			 * literal so inline text like `https://…` stays text.
 			 * @param {number} index
+			 * @param {number} [run_start]
 			 */
-			#isTemplateLineCommentStart(index) {
-				return (
-					this.input.charCodeAt(index) === CharCode.slash &&
-					this.input.charCodeAt(index + 1) === CharCode.slash &&
-					this.#isLineStartPosition(index)
-				);
+			#isTemplateLineCommentStart(index, run_start = -1) {
+				if (
+					this.input.charCodeAt(index) !== CharCode.slash ||
+					this.input.charCodeAt(index + 1) !== CharCode.slash
+				) {
+					return false;
+				}
+				if (this.#isLineStartPosition(index)) return true;
+				if (run_start < 0) return false;
+				for (let i = index - 1; i >= run_start; i--) {
+					const ch = this.input.charCodeAt(i);
+					if (ch === CharCode.lineFeed || ch === CharCode.carriageReturn) return false;
+					if (ch !== CharCode.space && ch !== CharCode.tab) return false;
+				}
+				return true;
 			}
 
 			/**
@@ -996,7 +1012,7 @@ export function TSRXPlugin(config) {
 						ch === CharCode.openBrace ||
 						ch === CharCode.closeBrace ||
 						this.#isJSXControlFlowDirectiveAt(index) ||
-						this.#isTemplateLineCommentStart(index) ||
+						this.#isTemplateLineCommentStart(index, start) ||
 						this.#isTemplateBlockCommentStart(index)
 					) {
 						break;
@@ -1979,11 +1995,25 @@ export function TSRXPlugin(config) {
 			 * @param {boolean} insideHead
 			 */
 			#parseStyleElement(open, node, insideHead) {
+				const filename = this.#filename;
+				if (!filename) {
+					throw new Error(
+						'<style> elements require a filename: pass one to parse so style scope hashes are unique per file.',
+					);
+				}
 				const contentStart = open.end;
 				const input = this.input.slice(contentStart);
 				const relativeCloseStart = input.indexOf('</style>');
 				const content = relativeCloseStart === -1 ? input : input.slice(0, relativeCloseStart);
-				const parsedCss = parse_style(content, { loose: this.#loose });
+				const parsedCss = parse_style(
+					content,
+					{
+						filename,
+						line: open.loc.start.line,
+						column: open.loc.start.column,
+					},
+					{ loose: this.#loose },
+				);
 
 				if (!insideHead) {
 					node.metadata.styleScopeHash = parsedCss.hash;
@@ -2714,7 +2744,10 @@ export function TSRXPlugin(config) {
 					this.pos++;
 					return this.finishToken(tt.arrow);
 				}
-				if (code === CharCode.lessThan) {
+				if (code === CharCode.lessThan && this.type !== tstt.jsxText) {
+					// After a JSX text token a `<` can only open a tag; without this guard
+					// text ending in an identifier character (`hello<div>`) would read as
+					// the start of a type argument list (`hello<T>`).
 					const next = this.input.charCodeAt(this.pos + 1);
 					if (
 						next !== CharCode.slash &&

package/src/transform/jsx/helpers.js

@@ -4,20 +4,19 @@
 import tsx from 'esrap/languages/tsx';
 
 /**
- * Zimmerframe provides `path` as the ancestor chain. A native template node whose
- * parent is another native template node renders as a JSX child; anywhere else it
- * renders as a standalone expression (e.g. a return value).
+ * Zimmerframe provides `path` as the ancestor chain. A native template node in
+ * the children list of any JSX element/fragment renders as a JSX child;
+ * anywhere else it renders as a standalone expression (e.g. a return value).
+ * The parent may be a parsed native template node or a synthetic fragment the
+ * transform built around render children — either way a bare expression in a
+ * child slot would print as JSX text.
  *
  * @param {any[]} path
  * @returns {boolean}
  */
 export function in_jsx_child_context(path) {
 	const parent = path[path.length - 1];
-	return (
-		!!parent &&
-		(parent.type === 'JSXElement' || parent.type === 'JSXFragment') &&
-		parent.metadata?.native_tsrx
-	);
+	return !!parent && (parent.type === 'JSXElement' || parent.type === 'JSXFragment');
 }
 
 /**

package/src/transform/jsx/index.js

@@ -146,10 +146,57 @@ function mark_nested_function_return_jsx(node, inside_function = false, seen = n
 }
 
 /**
- * Flatten a `@{ … }` code block that appears as an element/fragment child into
- * the element's children list: its setup statements followed by its single
- * render output. The render pipeline already handles interleaved setup
- * statements and JSX children. This is the element-scoped equivalent of
+ * Lower a `@{ … }` code block that appears as an element/fragment child,
+ * paying only for what the block uses while keeping each block its own
+ * lexical scope:
+ *
+ * - no setup code: the scope is unobservable, so the render output merges
+ *   directly into the children list (template-only chains collapse to the
+ *   innermost output, empty chains to nothing);
+ * - code-only: a plain `{ … }` statement block — statements run in source
+ *   order, scoped, and render nothing (the render pipeline already handles
+ *   statements interleaved with JSX children);
+ * - setup code + render output: kept as a `JSXCodeBlock` (with any nested
+ *   chain simplified) for the context-aware lowering into a scoped IIFE
+ *   (`transform_jsx_code_block` / `build_render_statements`).
+ *
+ * Always returns zero or one node.
+ * @param {any} block
+ * @returns {any[]}
+ */
+function lower_code_block_child(block) {
+	const body = block.body || [];
+	const render = block.render ?? null;
+
+	if (body.length === 0) {
+		if (render == null) return [];
+		if (render.type === 'JSXCodeBlock') return lower_code_block_child(render);
+		return [render];
+	}
+
+	if (render?.type === 'JSXCodeBlock') {
+		const inner = lower_code_block_child(render);
+		if (inner.length === 0) {
+			return [b.block(body, block)];
+		}
+		if (inner[0].type === 'BlockStatement') {
+			return [b.block([...body, inner[0]], block)];
+		}
+		// The chain still renders — simplify the render to the lowered inner
+		// node and leave the block for the context-aware lowering.
+		return [{ ...block, render: inner[0] }];
+	}
+
+	if (render == null) {
+		return [b.block(body, block)];
+	}
+
+	return [block];
+}
+
+/**
+ * Lower `@{ … }` code blocks that appear as element/fragment children (see
+ * `lower_code_block_child`). This is the element-scoped equivalent of
  * `transform_function`'s body lowering — function and arrow bodies are never
  * element children, so they are untouched here.
  * @param {any} node
@@ -170,9 +217,7 @@ function expand_child_code_blocks(node, seen = new Set()) {
 		node.children.some((/** @type {any} */ c) => c?.type === 'JSXCodeBlock')
 	) {
 		node.children = node.children.flatMap((/** @type {any} */ child) =>
-			child?.type === 'JSXCodeBlock'
-				? [...child.body, ...(child.render != null ? [child.render] : [])]
-				: [child],
+			child?.type === 'JSXCodeBlock' ? lower_code_block_child(child) : [child],
 		);
 	}
 
@@ -396,15 +441,6 @@ export function createJsxTransform(platform) {
 					return next() ?? node;
 				}
 
-				if (is_style_element(node) && is_style_expression_position(path)) {
-					const stylesheet = get_style_element_stylesheet(node);
-					if (stylesheet) {
-						analyze_css(stylesheet);
-						state.stylesheets.push(stylesheet);
-						return /** @type {any} */ (create_style_expression_value(node, stylesheet, state));
-					}
-				}
-
 				// Capture raw children BEFORE the walker transforms them so platform
 				// hooks can inspect the original JSX child shape.
 				const raw_children = /** @type {any} */ (node.children || []).map(
@@ -442,16 +478,14 @@ export function createJsxTransform(platform) {
 					const stylesheet = get_style_element_stylesheet(node);
 					if (stylesheet) {
 						analyze_css(stylesheet);
-						state.stylesheets.push(stylesheet);
+						state.stylesheets.push(prepare_stylesheet_for_render(stylesheet, true));
 						return /** @type {any} */ (create_style_expression_value(node, stylesheet, state));
 					}
 				}
-				return /** @type {any} */ (
-					b.jsx_element(
-						/** @type {ESTreeJSX.JSXElement} */ ({ ...node, type: 'JSXElement', children: [] }),
-						node.openingElement?.attributes ?? [],
-						[],
-					)
+				return b.jsx_element(
+					/** @type {ESTreeJSX.JSXElement} */ ({ ...node, type: 'JSXElement', children: [] }),
+					node.openingElement?.attributes ?? [],
+					[],
 				);
 			},
 
@@ -516,9 +550,7 @@ export function createJsxTransform(platform) {
 			sourceMapContent: source,
 		});
 
-		const { css, cssHash } = render_css_result(
-			/** @type {any} */ (stylesheets.map(prepare_stylesheet_for_render)),
-		);
+		const { css, cssHash } = render_css_result(/** @type {any} */ (stylesheets));
 
 		return { ast: final_program, code: result.code, map: result.map, css, cssHash };
 	}
@@ -801,6 +833,79 @@ function build_component_statements(body_nodes, transform_context) {
 	return build_render_statements(body_nodes, false, transform_context);
 }
 
+/**
+ * Statements for one `@{ … }` scope level: the setup statements followed by
+ * the lowered chain continuation. A nested level that declares anything is
+ * kept in a nested plain `{ … }` block, so a whole chain shares a single
+ * closure while still scoping each level; the generated `return` exits that
+ * closure.
+ * @param {any} block
+ * @param {TransformContext} transform_context
+ * @returns {{ statements: any[], has_render: boolean }}
+ */
+function code_block_scope_statements(block, transform_context) {
+	const statements = [...(block.body || [])];
+	const render = block.render ?? null;
+
+	if (render == null) {
+		return { statements, has_render: false };
+	}
+
+	if (render.type === 'JSXCodeBlock') {
+		const inner = code_block_scope_statements(render, transform_context);
+		if (inner.statements.length > 0) {
+			if ((render.body || []).length > 0) {
+				statements.push(b.block(inner.statements, render));
+			} else {
+				statements.push(...inner.statements);
+			}
+		}
+		return { statements, has_render: inner.has_render };
+	}
+
+	return {
+		statements: [...statements, ...build_render_statements([render], true, transform_context)],
+		has_render: true,
+	};
+}
+
+/**
+ * Lower a `@{ … }` code block that appears in a component/IIFE statement
+ * stream, keeping each block its own lexical scope:
+ *
+ * - no setup code: the scope is unobservable, so the render output (if any)
+ *   merges directly into the stream;
+ * - code-only: a plain `{ … }` statement block;
+ * - setup code + render output: a scoped IIFE expression child whose value is
+ *   the render output, with nested chains folded into the one closure.
+ *
+ * Always returns zero or one node.
+ * @param {any} block
+ * @param {TransformContext} transform_context
+ * @returns {any[]}
+ */
+function lower_code_block_stream_node(block, transform_context) {
+	const body = block.body || [];
+	const render = block.render ?? null;
+
+	if (body.length === 0) {
+		if (render == null) return [];
+		if (render.type === 'JSXCodeBlock') {
+			return lower_code_block_stream_node(render, transform_context);
+		}
+		return [render];
+	}
+
+	const { statements, has_render } = code_block_scope_statements(block, transform_context);
+
+	if (!has_render) {
+		return [b.block(statements, block)];
+	}
+
+	const iife = b.call(b.arrow([], b.block(statements, block)));
+	return [to_jsx_expression_container(iife, block)];
+}
+
 /**
  * @param {any[]} body_nodes
  * @param {boolean} return_null_when_empty
@@ -809,9 +914,7 @@ function build_component_statements(body_nodes, transform_context) {
  */
 function build_render_statements(body_nodes, return_null_when_empty, transform_context) {
 	body_nodes = body_nodes.flatMap((node) =>
-		node?.type === 'JSXCodeBlock'
-			? [...node.body, ...(node.render != null ? [node.render] : [])]
-			: [node],
+		node?.type === 'JSXCodeBlock' ? lower_code_block_stream_node(node, transform_context) : [node],
 	);
 
 	const statements = [];
@@ -1262,10 +1365,10 @@ function transform_return_statement(node, { next, visit, state, path }) {
 
 /**
  * @param {any} node
- * @param {{ state: TransformContext, path: AST.Node[] }} context
+ * @param {{ state: TransformContext, path: AST.Node[], visit: (node: any, state?: TransformContext) => any }} context
  * @returns {any}
  */
-function transform_jsx_code_block(node, { state, path }) {
+function transform_jsx_code_block(node, { state, path, visit }) {
 	const body_nodes = get_jsx_code_block_body_nodes(node, state);
 	const parent = /** @type {any} */ (path.at(-1));
 
@@ -1282,10 +1385,22 @@ function transform_jsx_code_block(node, { state, path }) {
 	}
 
 	const expression = b.call(
-		b.arrow([], b.block(build_render_statements(body_nodes, true, state), node)),
+		b.arrow(
+			[],
+			b.block(
+				mark_native_pretransformed_jsx(build_render_statements(body_nodes, true, state)),
+				node,
+			),
+		),
 	);
 
-	return in_jsx_child_context(path) ? to_jsx_expression_container(expression, node) : expression;
+	// Setup statements were carried over verbatim, so re-visit the lowered
+	// scope: TSRX-only nodes they contain (style elements, nested `@{ … }`
+	// blocks) still need their own lowering before printing.
+	const result = in_jsx_child_context(path)
+		? to_jsx_expression_container(expression, node)
+		: expression;
+	return visit(result, state);
 }
 
 /**
@@ -1806,6 +1921,8 @@ function prepare_tsrx_fragment_styles(node, transform_context) {
 	if (!css) return null;
 
 	const style_refs = collect_style_ref_attributes(node);
+	// `prune_css` inside marks the matching selectors as used/scoped; selectors
+	// that match no element render commented out, like the Ripple target.
 	apply_css_definition_metadata(node, css, transform_context, style_refs.length > 0);
 	transform_context.stylesheets.push(css);
 	const fragment = annotate_tsrx_with_hash(

package/src/transform/scoping.js

@@ -7,20 +7,47 @@
 
 import { walk } from 'zimmerframe';
 import * as b from '../utils/builders.js';
+import { mark_class_map_selectors } from './style-ref.js';
 
 /**
- * Mark every selector inside the stylesheet as "used" so `renderStylesheets`
- * does not comment it out. We skip selector-pruning because component
- * boundaries can be dynamic — any selector authored inside the component's
- * `<style>` block is considered intentional.
+ * Mark selectors inside the stylesheet as "used" so `renderStylesheets` does
+ * not comment them out.
+ *
+ * For a free-standing `<style>` block every selector is marked: we skip
+ * selector-pruning because component boundaries can be dynamic — any selector
+ * authored inside the component's `<style>` block is considered intentional.
+ *
+ * When the `<style>` block is assigned to a variable (`is_style_expression`),
+ * the only selectors reachable through the generated class map are standalone
+ * class selectors — scoped (`.x`) or global-wrapped (`:global(.x)`). Anything
+ * else at the top level — element selectors, compound selectors, descendant
+ * chains, global tag selectors — never ends up in the class map and is marked
+ * unused for `renderStylesheets` to comment out. Selectors of nested rules ride
+ * along with their parent: they apply where the parent's class matched, and the
+ * whole rule is pruned when the parent itself is unreachable.
  *
  * @param {any} stylesheet
+ * @param {boolean} [is_style_expression]
  * @returns {any}
  */
-export function prepare_stylesheet_for_render(stylesheet) {
+export function prepare_stylesheet_for_render(stylesheet, is_style_expression = false) {
+	if (is_style_expression) {
+		mark_class_map_selectors(stylesheet);
+	}
 	walk(stylesheet, null, {
-		_(node, { next }) {
+		_(node, { next, path }) {
 			if (node && node.metadata && typeof node.metadata === 'object') {
+				if (
+					is_style_expression &&
+					node.type === 'ComplexSelector' &&
+					is_unreachable_via_class_map(node, path)
+				) {
+					// Not in the generated class map. The analyzer pre-marks global
+					// selectors as used, so reset, and leave the subtree untouched —
+					// no `scoped` marks that would splice the hash into pruned output.
+					node.metadata.used = false;
+					return;
+				}
 				node.metadata.used = true;
 				if (node.type === 'RelativeSelector' && !node.metadata.is_global) {
 					node.metadata.scoped = true;
@@ -32,6 +59,37 @@ export function prepare_stylesheet_for_render(stylesheet) {
 	return stylesheet;
 }
 
+/**
+ * True when a selector of a style expression should be pruned because nothing
+ * reachable through the generated class map can match it. The class map
+ * collection in `style-ref.js` is the single decider of what the map exposes:
+ * it marks the carrying prelude-level selectors with `class_map_selector`.
+ * The remaining cases are structural, not class-shaped: selectors of nested
+ * rules ride along with their parent (the whole rule is pruned when the parent
+ * is unreachable), selectors inside another selector's arguments belong to
+ * their enclosing prelude-level selector, and a bare `:global` block prelude
+ * is kept because its contents render unscoped as authored and cannot be
+ * pruned selector-by-selector.
+ *
+ * @param {any} complex_selector
+ * @param {any[]} path
+ * @returns {boolean}
+ */
+function is_unreachable_via_class_map(complex_selector, path) {
+	if (complex_selector.metadata.class_map_selector) return false;
+	if (complex_selector.metadata.rule?.metadata?.parent_rule != null) return false;
+	if (path.some((parent) => parent.type === 'ComplexSelector')) return false;
+
+	if (complex_selector.children?.length === 1) {
+		const first = complex_selector.children[0]?.selectors?.[0];
+		if (first?.type === 'PseudoClassSelector' && first.name === 'global' && first.args === null) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
 /**
  * @param {any} node
  * @returns {boolean}

package/src/transform/style-ref.js

@@ -260,22 +260,43 @@ function collect_style_class_map_entries(css) {
 	return entries;
 }
 
+/**
+ * Stamp `class_map_selector` on the prelude-level selectors whose classes the
+ * class map exposes, without building the map. Runs the same collection as
+ * `create_style_class_map_from_stylesheet`, so marking and the generated map
+ * always agree; calling both is harmless.
+ *
+ * @param {any} css
+ * @returns {void}
+ */
+export function mark_class_map_selectors(css) {
+	collect_rule_class_map_entries(css, new Map());
+}
+
 /**
  * @param {any} node
  * @param {Map<string, any>} entries
+ * @param {any} [enclosing_selector] the nearest prelude-level selector; classes
+ *   found inside another selector (e.g. in `:global(...)` args) mark it as the
+ *   selector that carries their class map entry
  * @returns {void}
  */
-function collect_rule_class_map_entries(node, entries) {
+function collect_rule_class_map_entries(node, entries, enclosing_selector = null) {
 	if (!node || typeof node !== 'object') return;
 
 	if (Array.isArray(node)) {
-		for (const child of node) collect_rule_class_map_entries(child, entries);
+		for (const child of node) collect_rule_class_map_entries(child, entries, enclosing_selector);
 		return;
 	}
 
 	if (node.type === 'ComplexSelector') {
+		enclosing_selector ??= node;
 		const class_selector = get_standalone_class_selector(node);
 		if (class_selector) {
+			// Mark the prelude-level selector for every occurrence (not just the
+			// deduped first) so the render preparation of style expressions keeps
+			// exactly the selectors whose classes the map exposes.
+			(enclosing_selector.metadata ??= {}).class_map_selector = true;
 			const name = class_selector.name.replace(regex_backslash_and_following_character, '$1');
 			if (!entries.has(name)) {
 				entries.set(name, {
@@ -295,7 +316,7 @@ function collect_rule_class_map_entries(node, entries) {
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
 			continue;
 		}
-		collect_rule_class_map_entries(node[key], entries);
+		collect_rule_class_map_entries(node[key], entries, enclosing_selector);
 	}
 }
 

package/src/utils/builders.js

@@ -1249,6 +1249,44 @@ export function jsx_fragment(children = [], attributes = []) {
 	};
 }
 
+/**
+ * Ripple's internal fragment template node (the normalized form of a
+ * `JSXFragment`).
+ * @param {AST.Node[]} [children]
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TsrxFragment}
+ */
+export function tsrx_fragment(children = [], loc_info) {
+	const node = /** @type {AST.TsrxFragment} */ (
+		/** @type {unknown} */ ({
+			type: 'TsrxFragment',
+			children,
+			attributes: [],
+			selfClosing: false,
+			metadata: { path: [] },
+		})
+	);
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * Ripple's internal expression template child (the normalized form of a
+ * `JSXExpressionContainer` child).
+ * @param {AST.Expression} expression
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSRXExpression}
+ */
+export function tsrx_expression(expression, loc_info) {
+	const node = /** @type {AST.TSRXExpression} */ ({
+		type: 'TSRXExpression',
+		expression,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
 /**
  * @param {AST.Expression | ESTreeJSX.JSXEmptyExpression} expression
  * @param {AST.NodeWithLocation} [loc_info]

package/{src → types}/helpers.d.ts

@@ -9,3 +9,5 @@ export type Nullable<T> = T | null;
 export type Nullish<T> = T | null | undefined;
 
 export type NestedArray<T> = (T | NestedArray<T>)[];
+
+export type NonEmptyString<T extends string> = T extends '' ? never : T;

package/types/index.d.ts

@@ -4,7 +4,7 @@ import type { TSESTree } from '@typescript-eslint/types';
 import type { Parse } from './parse.js';
 import type * as ESRap from 'esrap';
 import type { Position } from 'acorn';
-import type { RequireAllOrNone } from '../src/helpers.js';
+import type { RequireAllOrNone } from './helpers';
 import type {
 	JsxPlatform,
 	JsxPlatformHooks,
@@ -170,6 +170,17 @@ declare module 'estree' {
 	interface SimpleCallExpression {
 		metadata: BaseNodeMetaData & {
 			hash?: string;
+			/**
+			 * A generated `(() => @{ … })()` inline-component IIFE for a code
+			 * block; collapsible once the block's statements lower into the
+			 * component callback.
+			 */
+			tsrx_code_block_component?: boolean;
+			/**
+			 * A generated zero-argument scope IIFE for a `@{ … }` code-block
+			 * chain level; runs synchronously inside its `with_scope` wrapper.
+			 */
+			tsrx_code_block_scope?: boolean;
 		};
 	}
 
@@ -323,7 +334,14 @@ declare module 'estree' {
 		closingElement?: ESTreeJSX.JSXClosingFragment | null;
 		selfClosing?: boolean;
 		attributes?: Array<Attribute | SpreadAttribute>;
-		metadata: BaseNodeMetaData;
+		metadata: BaseNodeMetaData & {
+			/**
+			 * A synthetic wrapper for a nested code-block render chain
+			 * (`@{ @{ … } }`), so render-slot consumers see a template node;
+			 * template-children lowering unwraps it.
+			 */
+			tsrx_code_block_chain?: boolean;
+		};
 		start: number;
 		end: number;
 	}