@tsrx/core 0.1.64 → 0.1.66

package/README.md

@@ -64,7 +64,32 @@ here and keeps package docs focused on the core parser API.
   (`import`, `prop`, `let`, `const`, `function`, `for_pattern`, …).
 - **AST utilities** — pattern walkers, identifier extraction, builders, location
   helpers, obfuscation helpers.
-- **CSS support** — `parseStyle`, `analyzeCss`, `renderStylesheets`.
+- **CSS support** — `parseStyle`, `analyzeCss`, `renderStylesheets`. CSS node
+  offsets are relative to the style body; a sheet parsed with a `body` origin
+  (every sheet `parseModule` produces) records `sourceStart` and a file-relative
+  `loc`, and `analyzeCss` anchors its `:global` placement diagnostics on the
+  selector with file-relative positions. Pass `{ errors, comments }` to collect
+  them instead of throwing.
+- **Scoped styles** — `analyzeTsrx` resolves every `<style>` block. A standalone
+  block is a child of an element or fragment and is scoped to its siblings: it
+  styles the items beside it and everything below them, never the element that
+  contains it, and the compiler adds a hash class to those elements so the block's
+  selectors match only there. A block is an output node, so a block that is the
+  lone output of a `@{ … }` or control-flow body is
+  `STYLE_STANDALONE_NEEDS_FRAGMENT`. Raw CSS is TSRX template syntax, so a block
+  with CSS in it outside every `@{ … }`/control-flow body is
+  `STYLE_STANDALONE_OUTSIDE_TEMPLATE`; plain-TSX `<style>{css}</style>` is an
+  ordinary element. Assigned blocks (`const theme = <style>…</style>`) are
+  classified as `theme` (exported, applied, or `$class` read) or `class-map`, and
+  `apply` targets are resolved through real bindings, declared before use. Results
+  ride on each block's `metadata` (`styleKind`, `styleApplies`, `styleApplied`,
+  `styleExported`) and on `program.metadata.styles`, and the analysis result
+  exposes `scopes`. Target compilers use `prepareStylesheetForRender(sheet, mode)`
+  with `mode: 'scope' | 'class-map' | 'theme'` (a boolean still means
+  `class-map`/`scope`) and `createStyleClassMapFromStylesheet(sheet, options)`,
+  whose object starts with `$class` and accepts `{ applied }` for composed themes.
+  Style diagnostics use the `STYLE_*` and `CSS_GLOBAL_PLACEMENT` codes in
+  `DIAGNOSTIC_CODES`.
 - **HTML helpers** — `isVoidElement`, `isBooleanAttribute`, `isDomProperty`,
   `validateNesting`.
 - **Event helpers** — delegated-event utilities, event-name normalization.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "type": "module",
   "repository": {
     "type": "git",
@@ -66,7 +66,9 @@
     "./test-harness/dep-scan": "./tests/shared/dep-scan.js",
     "./test-harness/runtime/*": "./tests/shared/runtime/*.js",
     "./test-harness/runtime/*.js": "./tests/shared/runtime/*.js",
-    "./test-harness/runtime/*.tsrx": "./tests/shared/runtime/*.tsrx"
+    "./test-harness/runtime/*.tsrx": "./tests/shared/runtime/*.tsrx",
+    "./test-harness/scoped-styles-fixtures": "./tests/shared/scoped-styles-fixtures.js",
+    "./test-harness/style-syntax": "./tests/utils/fixtures/style-syntax.js"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
@@ -76,10 +78,9 @@
     "@types/estree": "^1.0.8",
     "acorn": "^8.17.0",
     "esrap": "^2.3.2",
-    "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",
     "zimmerframe": "^1.1.2",
-    "@tsrx/runtime": "0.1.3"
+    "@tsrx/runtime": "0.1.5"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -92,6 +93,9 @@
   },
   "files": [
     "src",
-    "types"
+    "types",
+    "tests/fixtures/scoped-styles",
+    "tests/shared/scoped-styles-fixtures.js",
+    "tests/utils/fixtures/style-syntax.js"
   ]
 }

package/src/analyze/css-analyze.js

@@ -1,6 +1,14 @@
 /** @import * as AST from 'estree' */
+/** @import { CompileError } from '../../types/index' */
 
 import { walk } from 'zimmerframe';
+import { error } from '../errors.js';
+import { DIAGNOSTIC_CODES } from '../diagnostics.js';
+import { css_node_source_position } from '../parse/style.js';
+import {
+	TSRX_CSS_GLOBAL_MIDDLE_PLACEMENT_ERROR,
+	TSRX_CSS_GLOBAL_NESTED_IN_PSEUDOCLASS_ERROR,
+} from './validation.js';
 
 /**
  * True if is `:global` without arguments
@@ -35,10 +43,41 @@ function is_global(relative_selector) {
 }
 
 /**
- * Analyze CSS and set metadata for global selectors
+ * Analyze CSS and set metadata for global selectors.
+ *
+ * `:global` placement problems are reported through `error()` with the
+ * `CSS_GLOBAL_PLACEMENT` code: pushed onto `errors` when given (and skipped
+ * over a suppressing comment when `comments` is given too), thrown otherwise.
+ * When `css` is a sheet parsed with a `body` origin (every sheet `parseModule`
+ * produces), the diagnostic carries file-relative `pos` / `end` / `loc`; the
+ * `fileName` defaults to the sheet's.
+ *
  * @param {AST.CSS.Node} css - The CSS AST
+ * @param {{
+ *   filename?: string | null,
+ *   errors?: CompileError[],
+ *   comments?: AST.CommentWithLocation[],
+ * }} [options]
  */
-export function analyze_css(css) {
+export function analyze_css(css, options = {}) {
+	const sheet = css.type === 'StyleSheet' ? css : null;
+	const filename = options.filename ?? sheet?.filename ?? null;
+
+	/**
+	 * @param {string} message
+	 * @param {AST.CSS.Node} node
+	 */
+	function report(message, node) {
+		error(
+			message,
+			filename,
+			css_node_source_position(sheet, node),
+			options.errors,
+			options.comments,
+			DIAGNOSTIC_CODES.CSS_GLOBAL_PLACEMENT,
+		);
+	}
+
 	walk(css, /** @type {{ rule: AST.CSS.Rule | null }} */ ({ rule: null }), {
 		Rule(node, context) {
 			node.metadata.parent_rule = context.state.rule;
@@ -98,7 +137,7 @@ export function analyze_css(css) {
 						is_nested &&
 						!(/** @type {AST.CSS.PseudoClassSelector} */ (global.selectors[0]).args)
 					) {
-						throw new Error(`A :global selector cannot be inside a pseudoclass.`);
+						report(TSRX_CSS_GLOBAL_NESTED_IN_PSEUDOCLASS_ERROR, global.selectors[0]);
 					}
 
 					const idx = node.children.indexOf(global);
@@ -107,9 +146,8 @@ export function analyze_css(css) {
 						// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 						for (let i = idx + 1; i < node.children.length; i++) {
 							if (!is_global(node.children[i])) {
-								throw new Error(
-									`:global(...) can be at the start or end of a selector sequence, but not in the middle.`,
-								);
+								report(TSRX_CSS_GLOBAL_MIDDLE_PLACEMENT_ERROR, first);
+								break;
 							}
 						}
 					}

package/src/analyze/index.js

@@ -15,6 +15,8 @@ import {
 	validate_forgotten_statement_container,
 	validate_unsupported_lazy_assignment_position,
 } from './validation.js';
+import { create_scopes, ScopeRoot } from '../scope.js';
+import { analyze_styles } from './style-analyze.js';
 
 /**
  * Find the first authored lazy pattern along an assignment target's binding
@@ -220,5 +222,16 @@ export function analyze_tsrx(ast, filename, options = {}) {
 
 	walk(ast, state, visitors);
 
-	return { ast, errors, comments };
+	// Style `apply` targets resolve through real bindings. Scope diagnostics
+	// (duplicate declarations, reserved names) stay with the compilers that
+	// already report them, so this run collects into a private list.
+	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), null, {
+		filename: /** @type {string} */ (filename ?? null),
+		collect: true,
+		errors: [],
+		comments,
+	});
+	const styles = analyze_styles(ast, scopes, state);
+
+	return { ast, errors, comments, scope, scopes, styles };
 }

package/src/analyze/style-analyze.js

@@ -0,0 +1,467 @@
+/**
+ * Module-level analysis of `<style>` blocks: which blocks are standalone
+ * (scoped to the template scope they sit in) and which are assigned
+ * (`const theme = <style>…</style>`), what every `apply` attribute resolves to,
+ * and whether an assigned block is a theme (exported or applied, D5) or a
+ * class map. Results are stamped on the style nodes' `metadata` so the target
+ * transforms — which clone nodes but share metadata — read one shape, and are
+ * summarized on `program.metadata.styles` for consumer compilers.
+ *
+ * Declared-before-use (D13 layer 1) is enforced here by source position and
+ * lexical visibility: same-module CSS is emitted in lexical order, so a theme
+ * declared after its applier would win the cascade instead of losing it.
+ *
+ * @import * as AST from 'estree'
+ * @import * as ESTreeJSX from 'estree-jsx'
+ * @import { Binding, ScopeInterface, StyleApplyResolution, StyleAnalysis, TSRXAnalysisState, Visitors } from '../../types/index'
+ */
+
+import { walk } from 'zimmerframe';
+import { DIAGNOSTIC_CODES } from '../diagnostics.js';
+import { get_style_class_map_names, get_style_element_stylesheet } from '../transform/style-ref.js';
+import { is_function_node, is_template_directive } from '../utils/ast.js';
+import {
+	TSRX_STYLE_APPLY_DUPLICATE_ERROR,
+	TSRX_STYLE_APPLY_UNSUPPORTED_HOST_ERROR,
+	TSRX_STYLE_APPLY_VALUE_ERROR,
+	TSRX_STYLE_RESERVED_CLASS_KEY_ERROR,
+	TSRX_STYLE_STANDALONE_AT_MODULE_SCOPE_ERROR,
+	TSRX_STYLE_STANDALONE_NEEDS_FRAGMENT_ERROR,
+	TSRX_STYLE_STANDALONE_OUTSIDE_TEMPLATE_ERROR,
+	tsrx_style_apply_before_declaration_error,
+	tsrx_style_apply_target_error,
+	tsrx_style_unknown_attribute_error,
+	validate_style,
+} from './validation.js';
+
+/**
+ * `container_depth` counts the enclosing TSRX containers — `@{ … }` bodies
+ * and control-flow directives — where raw CSS in a standalone block is
+ * template syntax; native elements only bump `template_depth`.
+ *
+ * @typedef {{ function_depth: number, template_depth: number, container_depth: number }} StyleWalkState
+ */
+
+/**
+ * `apply` sites resolve against ordinary JavaScript scoping, so the analyzer
+ * looks the target up from the nearest enclosing scope of the style block.
+ *
+ * @param {AST.Node[]} path
+ * @param {Map<AST.Node, ScopeInterface>} scopes
+ * @returns {ScopeInterface | null}
+ */
+function nearest_scope(path, scopes) {
+	for (let i = path.length - 1; i >= 0; i -= 1) {
+		const scope = scopes.get(path[i]);
+		if (scope) return scope;
+	}
+	return null;
+}
+
+/**
+ * Names exported through `export { a, b as c }` and `export default a`.
+ *
+ * @param {AST.Program} ast
+ * @returns {Set<string>}
+ */
+function collect_exported_names(ast) {
+	/** @type {Set<string>} */
+	const names = new Set();
+	for (const statement of ast.body) {
+		if (statement.type === 'ExportNamedDeclaration' && !statement.declaration) {
+			for (const specifier of statement.specifiers) {
+				if (specifier.local.type === 'Identifier') names.add(specifier.local.name);
+			}
+		} else if (
+			statement.type === 'ExportDefaultDeclaration' &&
+			statement.declaration.type === 'Identifier'
+		) {
+			names.add(statement.declaration.name);
+		}
+	}
+	return names;
+}
+
+/**
+ * A style block is standalone when it is template content rather than a value:
+ * a child of a native element/fragment, the render output of a `@{ … }` body
+ * or a control-flow body, or a bare statement. Only the first placement is
+ * valid; the others are reported (5.1).
+ *
+ * @param {AST.Node[]} path
+ * @returns {boolean}
+ */
+export function is_standalone_style_position(path) {
+	const parent = path.at(-1);
+	if (!parent) return true;
+	switch (parent.type) {
+		case 'JSXElement':
+		case 'JSXFragment':
+			return !!parent.metadata?.native_tsrx;
+		case 'JSXCodeBlock':
+		case 'BlockStatement':
+		case 'SwitchCase':
+		case 'Program':
+		case 'ExpressionStatement':
+			return true;
+		default:
+			return false;
+	}
+}
+
+/**
+ * @param {ESTreeJSX.JSXAttributeNode} attr
+ * @param {string} name
+ * @returns {boolean}
+ */
+function is_named_attribute(attr, name) {
+	return (
+		attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === name
+	);
+}
+
+/**
+ * @param {ESTreeJSX.JSXAttribute} attr
+ * @returns {AST.Expression | null}
+ */
+function attribute_expression(attr) {
+	const value = attr.value;
+	if (!value || value.type !== 'JSXExpressionContainer') return null;
+	return value.expression.type === 'JSXEmptyExpression' ? null : value.expression;
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @returns {string}
+ */
+function describe_target(expression) {
+	if (expression.type === 'Identifier') return expression.name;
+	if (
+		expression.type === 'MemberExpression' &&
+		!expression.computed &&
+		expression.property.type === 'Identifier'
+	) {
+		return `${describe_target(/** @type {AST.Expression} */ (expression.object))}.${expression.property.name}`;
+	}
+	return 'apply target';
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @returns {AST.Identifier | null}
+ */
+function member_root(expression) {
+	let current = expression;
+	while (current.type === 'MemberExpression' && !current.computed) {
+		current = /** @type {AST.Expression} */ (current.object);
+	}
+	return current.type === 'Identifier' ? current : null;
+}
+
+/**
+ * @param {Binding} binding
+ * @param {AST.Expression} expression the `apply` entry for the member chain
+ * @returns {AST.JSXStyleElement | null | undefined} `undefined` when the
+ *   member does not name a style block of a module-local object
+ */
+function resolve_local_member(binding, expression) {
+	if (expression.type !== 'MemberExpression' || expression.computed) return undefined;
+	if (expression.object.type !== 'Identifier' || expression.property.type !== 'Identifier') {
+		return undefined;
+	}
+	const object = binding.initial;
+	if (object?.type !== 'ObjectExpression') return undefined;
+	const name = expression.property.name;
+	for (const property of object.properties) {
+		if (
+			property.type === 'Property' &&
+			!property.computed &&
+			((property.key.type === 'Identifier' && property.key.name === name) ||
+				(property.key.type === 'Literal' && property.key.value === name)) &&
+			property.value.type === 'JSXStyleElement'
+		) {
+			return property.value;
+		}
+	}
+	return undefined;
+}
+
+/**
+ * Whether any reference to the binding reads its `$class` property.
+ *
+ * @param {Binding | null} binding
+ * @returns {boolean}
+ */
+function is_class_read(binding) {
+	if (!binding) return false;
+	return binding.references.some(({ node, path }) => {
+		const parent = path.at(-1);
+		if (parent?.type !== 'MemberExpression' || parent.object !== node) return false;
+		if (parent.computed) {
+			return parent.property.type === 'Literal' && parent.property.value === '$class';
+		}
+		return parent.property.type === 'Identifier' && parent.property.name === '$class';
+	});
+}
+
+/**
+ * Run the module-level style analysis. `scopes` comes from `create_scopes`
+ * over the same program so target resolution uses real bindings.
+ *
+ * @param {AST.Program} ast
+ * @param {Map<AST.Node, ScopeInterface>} scopes
+ * @param {TSRXAnalysisState} state
+ * @returns {StyleAnalysis}
+ */
+export function analyze_styles(ast, scopes, state) {
+	const exported_names = collect_exported_names(ast);
+	const errors = state.collect ? state.errors : undefined;
+	/** @type {AST.JSXStyleElement[]} */
+	const assigned = [];
+	/** @type {AST.JSXStyleElement[]} */
+	const standalone = [];
+
+	/**
+	 * @param {string} message
+	 * @param {string} code
+	 * @param {AST.Node} node
+	 */
+	const report = (message, code, node) => {
+		validate_style(message, code, node, state.filename, errors, state.comments);
+	};
+
+	/**
+	 * @param {AST.Expression} expression
+	 * @param {ScopeInterface | null} scope
+	 * @param {StyleApplyResolution[]} resolutions
+	 */
+	const resolve_apply_entry = (expression, scope, resolutions) => {
+		if (expression.type === 'ArrayExpression') {
+			for (const element of expression.elements) {
+				if (!element || element.type === 'SpreadElement') {
+					report(
+						tsrx_style_apply_target_error('apply entry'),
+						DIAGNOSTIC_CODES.STYLE_APPLY_TARGET,
+						element ?? expression,
+					);
+					continue;
+				}
+				resolve_apply_entry(element, scope, resolutions);
+			}
+			return;
+		}
+
+		const root = member_root(expression);
+		const name = describe_target(expression);
+		const binding = root && scope ? scope.get(root.name) : null;
+		if (!root || !binding) {
+			report(tsrx_style_apply_target_error(name), DIAGNOSTIC_CODES.STYLE_APPLY_TARGET, expression);
+			return;
+		}
+
+		if (binding.declaration_kind === 'import') {
+			resolutions.push({ expression, target: null, kind: 'import' });
+			return;
+		}
+
+		/** @type {AST.JSXStyleElement | null | undefined} */
+		let target;
+		if (expression.type === 'Identifier') {
+			target = binding.initial?.type === 'JSXStyleElement' ? binding.initial : undefined;
+		} else {
+			target = resolve_local_member(binding, expression);
+		}
+
+		if (!target) {
+			report(tsrx_style_apply_target_error(name), DIAGNOSTIC_CODES.STYLE_APPLY_TARGET, expression);
+			return;
+		}
+
+		if (/** @type {number} */ (binding.node.start) > /** @type {number} */ (root.start)) {
+			report(
+				tsrx_style_apply_before_declaration_error(name),
+				DIAGNOSTIC_CODES.STYLE_APPLY_BEFORE_DECLARATION,
+				root,
+			);
+			return;
+		}
+
+		target.metadata.styleApplied = true;
+		resolutions.push({ expression, target, kind: 'local' });
+	};
+
+	walk(
+		/** @type {AST.Node} */ (ast),
+		/** @type {StyleWalkState} */ ({ function_depth: 0, template_depth: 0, container_depth: 0 }),
+		/** @type {Visitors<AST.Node, StyleWalkState>} */ ({
+			_(node, { state: walk_state, next }) {
+				if (is_function_node(node)) {
+					next({ ...walk_state, function_depth: walk_state.function_depth + 1 });
+					return;
+				}
+				if (node.type === 'JSXCodeBlock' || is_template_directive(node)) {
+					// `@else if` chains and `@catch` clauses are children of the
+					// directive node, so one bump covers every branch body.
+					next({
+						...walk_state,
+						template_depth: walk_state.template_depth + 1,
+						container_depth: walk_state.container_depth + 1,
+					});
+					return;
+				}
+				if (
+					(node.type === 'JSXElement' || node.type === 'JSXFragment') &&
+					node.metadata?.native_tsrx
+				) {
+					next({ ...walk_state, template_depth: walk_state.template_depth + 1 });
+					return;
+				}
+				next();
+			},
+
+			JSXStyleElement(node, { path, state: walk_state, next }) {
+				const is_standalone = is_standalone_style_position(path);
+				const inside_head = path.some(
+					(ancestor) =>
+						ancestor.type === 'JSXElement' &&
+						ancestor.openingElement.name.type === 'JSXIdentifier' &&
+						ancestor.openingElement.name.name === 'head',
+				);
+				const attributes = node.openingElement.attributes;
+				const is_resource = attributes.some((attr) => is_named_attribute(attr, 'href'));
+
+				/** @type {ESTreeJSX.JSXAttribute | null} */
+				let apply_attr = null;
+				for (const attr of attributes) {
+					if (attr.type !== 'JSXAttribute') continue;
+					if (is_named_attribute(attr, 'apply')) {
+						if (apply_attr) {
+							report(
+								TSRX_STYLE_APPLY_DUPLICATE_ERROR,
+								DIAGNOSTIC_CODES.STYLE_APPLY_DUPLICATE,
+								attr,
+							);
+							continue;
+						}
+						apply_attr = attr;
+						continue;
+					}
+					if (is_named_attribute(attr, 'ref') || inside_head || is_resource) continue;
+					const attr_name =
+						attr.name.type === 'JSXIdentifier'
+							? attr.name.name
+							: `${attr.name.namespace.name}:${attr.name.name.name}`;
+					report(
+						tsrx_style_unknown_attribute_error(attr_name),
+						DIAGNOSTIC_CODES.STYLE_UNKNOWN_ATTRIBUTE,
+						attr,
+					);
+				}
+
+				/** @type {StyleApplyResolution[]} */
+				const resolutions = [];
+				if (apply_attr) {
+					const expression = attribute_expression(apply_attr);
+					if (!expression) {
+						report(TSRX_STYLE_APPLY_VALUE_ERROR, DIAGNOSTIC_CODES.STYLE_APPLY_VALUE, apply_attr);
+					} else if (inside_head || is_resource) {
+						report(
+							TSRX_STYLE_APPLY_UNSUPPORTED_HOST_ERROR,
+							DIAGNOSTIC_CODES.STYLE_APPLY_UNSUPPORTED_HOST,
+							apply_attr,
+						);
+					} else {
+						resolve_apply_entry(expression, nearest_scope(path, scopes), resolutions);
+					}
+				}
+				node.metadata.styleApplies = resolutions;
+
+				if (is_standalone) {
+					if (!inside_head && !is_resource) {
+						const parent = path.at(-1);
+						const in_children_list =
+							parent?.type === 'JSXElement' || parent?.type === 'JSXFragment';
+						if (walk_state.function_depth === 0 && walk_state.template_depth === 0) {
+							report(
+								TSRX_STYLE_STANDALONE_AT_MODULE_SCOPE_ERROR,
+								DIAGNOSTIC_CODES.STYLE_STANDALONE_AT_MODULE_SCOPE,
+								node,
+							);
+						} else if (!in_children_list) {
+							// A block is an output node: as the lone output of a `@{ … }` or
+							// control-flow body, or as a statement, it styles nothing. Beside
+							// another output it is already the parser's multiple-outputs error.
+							report(
+								TSRX_STYLE_STANDALONE_NEEDS_FRAGMENT_ERROR,
+								DIAGNOSTIC_CODES.STYLE_STANDALONE_NEEDS_FRAGMENT,
+								node,
+							);
+						} else if (walk_state.container_depth === 0 && !node.openingElement.selfClosing) {
+							// Raw CSS in `<style>` is TSRX template syntax: outside every
+							// `@{ … }` and control-flow body the file is plain TSX, where a
+							// `<style>` takes an expression child instead. A self-closing
+							// `<style apply={…} />` holds no CSS text and is ordinary JSX.
+							report(
+								TSRX_STYLE_STANDALONE_OUTSIDE_TEMPLATE_ERROR,
+								DIAGNOSTIC_CODES.STYLE_STANDALONE_OUTSIDE_TEMPLATE,
+								node,
+							);
+						}
+						standalone.push(node);
+					}
+				} else {
+					assigned.push(node);
+					const parent = path.at(-1);
+					const grandparent = path.at(-2);
+					/** @type {AST.VariableDeclarator | null} */
+					let declarator = null;
+					if (parent?.type === 'VariableDeclarator') {
+						declarator = parent;
+					} else if (parent?.type === 'Property' && grandparent?.type === 'ObjectExpression') {
+						const holder = path.at(-3);
+						if (holder?.type === 'VariableDeclarator') declarator = holder;
+					}
+					const declared_name = declarator?.id.type === 'Identifier' ? declarator.id.name : null;
+					const declaration_index = declarator ? path.indexOf(declarator) : -1;
+					const export_parent = declaration_index > 0 ? path[declaration_index - 2] : null;
+					node.metadata.styleExported =
+						parent?.type === 'ExportDefaultDeclaration' ||
+						export_parent?.type === 'ExportNamedDeclaration' ||
+						(declared_name !== null && exported_names.has(declared_name));
+					// Reading `theme.$class` opts an element (or a child component's
+					// element, through a prop) into the block's whole stylesheet, so
+					// such a block is a theme: every selector stays, like `apply`.
+					node.metadata.styleClassRead =
+						declared_name !== null &&
+						is_class_read(nearest_scope(path, scopes)?.get(declared_name) ?? null);
+
+					const stylesheet = get_style_element_stylesheet(node);
+					if (stylesheet && get_style_class_map_names(stylesheet).includes('$class')) {
+						report(
+							TSRX_STYLE_RESERVED_CLASS_KEY_ERROR,
+							DIAGNOSTIC_CODES.STYLE_RESERVED_CLASS_KEY,
+							node,
+						);
+					}
+				}
+
+				next();
+			},
+		}),
+	);
+
+	for (const node of assigned) {
+		node.metadata.styleKind =
+			node.metadata.styleExported || node.metadata.styleApplied || node.metadata.styleClassRead
+				? 'theme'
+				: 'class-map';
+	}
+
+	/** @type {StyleAnalysis} */
+	const styles = { assigned, standalone };
+	/** @type {{ metadata?: { styles?: StyleAnalysis } }} */ (ast).metadata = {
+		.../** @type {{ metadata?: object }} */ (ast).metadata,
+		styles,
+	};
+	return styles;
+}