@tsrx/core 0.1.28 → 0.1.30

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "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

@@ -1995,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;

package/src/transform/jsx/index.js

@@ -441,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(
@@ -487,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 ?? [],
+					[],
 				);
 			},
 
@@ -561,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 };
 	}
@@ -792,19 +779,25 @@ function apply_css_definition_metadata(
 }
 
 /**
+ * Pruning runs from the fragment visitor, before the walker has descended into
+ * the subtree and stamped walker paths, so each collected element gets its
+ * ancestor chain (`metadata.path`) here — descendant/sibling selector matching
+ * in `prune_css` reads it.
+ *
  * @param {any} value
  * @param {any[]} [elements]
  * @param {TransformContext | null} [transform_context]
+ * @param {any[]} [path]
  * @returns {any[]}
  */
-function collect_css_prunable_elements(value, elements = [], transform_context = null) {
+function collect_css_prunable_elements(value, elements = [], transform_context = null, path = []) {
 	if (!value || typeof value !== 'object') {
 		return elements;
 	}
 
 	if (Array.isArray(value)) {
 		for (const child of value) {
-			collect_css_prunable_elements(child, elements, transform_context);
+			collect_css_prunable_elements(child, elements, transform_context, path);
 		}
 		return elements;
 	}
@@ -823,15 +816,18 @@ function collect_css_prunable_elements(value, elements = [], transform_context =
 
 	if (value.type === 'JSXElement' && value.metadata?.native_tsrx) {
 		if (!is_style_element(value)) {
+			set_node_path_metadata(value, path);
 			elements.push(value);
 		}
 	}
 
+	const child_path = value.type ? [...path, value] : path;
+
 	for (const key of Object.keys(value)) {
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
 			continue;
 		}
-		collect_css_prunable_elements(value[key], elements, transform_context);
+		collect_css_prunable_elements(value[key], elements, transform_context, child_path);
 	}
 
 	return elements;
@@ -1378,10 +1374,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));
 
@@ -1398,10 +1394,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);
 }
 
 /**
@@ -1922,6 +1930,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 → 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,