@tsrx/core 0.1.17 → 0.1.18

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "type": "module",
   "repository": {
     "type": "git",

package/src/analyze/prune.js

@@ -1095,7 +1095,7 @@ export function prune_css(css, element, styleClasses, topScopedClasses) {
 			// A class is standalone only when the entire effective selector chain (after resolving
 			// nesting and stripping :global) is a single RelativeSelector with a single ClassSelector.
 			// This prevents classes from compound selectors like `.wrapper .nested` or selectors
-			// inside :global() from being exported through style refs.
+			// inside :global() from being exported through style expression maps.
 			if (selectors.length === 1) {
 				const sole_selector = selectors[0];
 				if (

package/src/index.js

@@ -170,7 +170,9 @@ export {
 export {
 	collect_style_ref_attributes as collectStyleRefAttributes,
 	create_style_class_map as createStyleClassMap,
+	create_style_class_map_from_stylesheet as createStyleClassMapFromStylesheet,
 	create_style_ref_setup_statements as createStyleRefSetupStatements,
+	get_style_element_stylesheet as getStyleElementStylesheet,
 } from './transform/style-ref.js';
 export {
 	clone_expression_node,

package/src/transform/jsx/index.js

@@ -45,7 +45,9 @@ import { prepare_stylesheet_for_render, annotate_with_hash, is_style_element } f
 import {
 	collect_style_ref_attributes,
 	create_style_class_map,
+	create_style_class_map_from_stylesheet,
 	create_style_ref_setup_statements,
+	get_style_element_stylesheet,
 } from '../style-ref.js';
 import { is_function_or_component_node } from '../../utils/ast.js';
 import {
@@ -251,7 +253,16 @@ export function createJsxTransform(platform) {
 				);
 			},
 
-			Element(node, { next, state }) {
+			Element(node, { next, path, state }) {
+				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_class_map_from_stylesheet(stylesheet));
+					}
+				}
+
 				// Capture raw children BEFORE the walker transforms them so a
 				// platform hook (e.g. Solid's textContent optimization) can
 				// inspect the original Text / TSRXExpression nodes rather than
@@ -1420,7 +1431,8 @@ function prepare_tsrx_fragment_styles(node, transform_context) {
 	annotate_tsrx_with_hash(
 		node,
 		css.hash,
-		transform_context.platform.jsx.rewriteClassAttr ? 'className' : 'class',
+		transform_context.platform.jsx.classAttrName ??
+			(transform_context.platform.jsx.rewriteClassAttr ? 'className' : 'class'),
 		transform_context.typeOnly,
 	);
 	return { css, style_refs };
@@ -1502,11 +1514,33 @@ function collect_style_elements(node, styles) {
 		return;
 	}
 
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
+	if (node.type === 'Element') {
+		collect_style_elements(node.children || [], styles);
+		return;
+	}
+
+	if (node.type === 'BlockStatement') {
+		collect_style_elements(node.body || [], styles);
+		return;
+	}
+
+	if (node.type === 'IfStatement') {
+		collect_style_elements(node.consequent, styles);
+		collect_style_elements(node.alternate, styles);
+		return;
+	}
+
+	if (node.type === 'SwitchStatement') {
+		for (const switch_case of node.cases || []) {
+			collect_style_elements(switch_case.consequent || [], styles);
 		}
-		collect_style_elements(node[key], styles);
+		return;
+	}
+
+	if (node.type === 'TryStatement') {
+		collect_style_elements(node.block, styles);
+		collect_style_elements(node.handler?.body, styles);
+		collect_style_elements(node.finalizer, styles);
 	}
 }
 
@@ -1548,24 +1582,55 @@ function strip_style_elements(node) {
 		return node;
 	}
 
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
-			continue;
-		}
-		const value = node[key];
-		if (Array.isArray(value)) {
-			node[key] = strip_style_elements(value);
-		} else if (value && typeof value === 'object') {
-			const stripped = strip_style_elements(value);
-			if (stripped) {
-				node[key] = stripped;
-			}
+	if (node.type === 'Element') {
+		node.children = strip_style_elements(node.children || []);
+		return node;
+	}
+
+	if (node.type === 'BlockStatement') {
+		node.body = strip_style_elements(node.body || []);
+		return node;
+	}
+
+	if (node.type === 'IfStatement') {
+		node.consequent = strip_style_elements(node.consequent);
+		if (node.alternate) node.alternate = strip_style_elements(node.alternate);
+		return node;
+	}
+
+	if (node.type === 'SwitchStatement') {
+		for (const switch_case of node.cases || []) {
+			switch_case.consequent = strip_style_elements(switch_case.consequent || []);
 		}
+		return node;
+	}
+
+	if (node.type === 'TryStatement') {
+		node.block = strip_style_elements(node.block);
+		if (node.handler?.body) node.handler.body = strip_style_elements(node.handler.body);
+		if (node.finalizer) node.finalizer = strip_style_elements(node.finalizer);
 	}
 
 	return node;
 }
 
+/**
+ * @param {any[]} path
+ * @returns {boolean}
+ */
+function is_style_expression_position(path) {
+	const parent = path.at(-1);
+	return !(
+		parent?.type === 'Element' ||
+		parent?.type === 'Tsrx' ||
+		parent?.type === 'Tsx' ||
+		parent?.type === 'TsxCompat' ||
+		parent?.type === 'BlockStatement' ||
+		parent?.type === 'Program' ||
+		parent?.type === 'SwitchCase'
+	);
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -5605,8 +5670,8 @@ export function to_jsx_attribute(attr, transform_context) {
 			attr,
 		);
 	}
-	// Platforms that expect React-style DOM attrs (React) rewrite `class` to
-	// `className`; Preact and Solid accept `class` natively and keep it.
+	// Keep this legacy hook for targets that need React-style DOM attrs. The
+	// current first-party targets preserve authored `class`.
 	let attr_name = attr.name;
 	if (
 		transform_context.platform.jsx.rewriteClassAttr &&

package/src/transform/scoping.js

@@ -119,7 +119,7 @@ export function annotate_with_hash(
 			return node;
 		}
 		if (!is_style_element(node) && !is_composite_element(node)) {
-			add_hash_class(node, hash);
+			add_hash_class(node, hash, jsx_class_attr_name);
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children
@@ -184,13 +184,14 @@ export function annotate_component_with_hash(
 }
 
 /**
- * Ensure the element carries a `class` attribute containing the scoping hash.
+ * Ensure the element carries a class attribute containing the scoping hash.
  *
  * @param {any} element
  * @param {string} hash
+ * @param {'class' | 'className'} [class_attr_name='class']
  * @returns {void}
  */
-export function add_hash_class(element, hash) {
+export function add_hash_class(element, hash, class_attr_name = 'class') {
 	const attrs = element.attributes || (element.attributes = []);
 	const existing = attrs.find(
 		(/** @type {any} */ a) =>
@@ -203,7 +204,7 @@ export function add_hash_class(element, hash) {
 	if (!existing) {
 		attrs.push({
 			type: 'Attribute',
-			name: b.id('class'),
+			name: b.id(class_attr_name),
 			value: { type: 'Literal', value: hash, raw: JSON.stringify(hash) },
 		});
 		return;
@@ -249,18 +250,6 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 		return;
 	}
 
-	if (existing.name.name !== jsx_class_attr_name) {
-		existing.name = {
-			type: 'JSXIdentifier',
-			name: jsx_class_attr_name,
-			metadata: {
-				...(existing.name.metadata || { path: [] }),
-				source_name: existing.name.name,
-				source_length: existing.name.name.length,
-			},
-		};
-	}
-
 	const value = existing.value;
 	if (!value) {
 		existing.value = { type: 'Literal', value: hash, raw: JSON.stringify(hash) };

package/src/transform/style-ref.js

@@ -3,6 +3,8 @@
 import * as b from '../utils/builders.js';
 import { clone_expression_node, clone_identifier } from './jsx/ast-builders.js';
 
+const regex_backslash_and_following_character = /\\(.)/g;
+
 /**
  * @typedef {{
  *   allowMutableRefTarget?: boolean;
@@ -19,7 +21,7 @@ import { clone_expression_node, clone_identifier } from './jsx/ast-builders.js';
 export function create_style_class_map(component, css) {
 	const hash = css?.hash ?? null;
 	const top_scoped_classes = /** @type {Map<string, any>} */ (
-		component?.metadata?.topScopedClasses ?? new Map()
+		component?.metadata?.topScopedClasses ?? collect_style_class_map_entries(css)
 	);
 	const class_names = [...top_scoped_classes.keys()].sort();
 
@@ -30,6 +32,28 @@ export function create_style_class_map(component, css) {
 	);
 }
 
+/**
+ * @param {any} css
+ * @returns {AST.ObjectExpression}
+ */
+export function create_style_class_map_from_stylesheet(css) {
+	return create_style_class_map(
+		{ metadata: { topScopedClasses: collect_style_class_map_entries(css) } },
+		css,
+	);
+}
+
+/**
+ * @param {any} style_element
+ * @returns {any | null}
+ */
+export function get_style_element_stylesheet(style_element) {
+	return (
+		style_element?.children?.find?.((/** @type {any} */ child) => child.type === 'StyleSheet') ??
+		null
+	);
+}
+
 /**
  * @param {any} node
  * @param {any[]} [refs]
@@ -233,3 +257,70 @@ function is_function_or_class_boundary(node) {
 		node?.type === 'ClassExpression'
 	);
 }
+
+/**
+ * @param {any} css
+ * @returns {Map<string, any>}
+ */
+function collect_style_class_map_entries(css) {
+	const entries = new Map();
+	collect_rule_class_map_entries(css, entries);
+	return entries;
+}
+
+/**
+ * @param {any} node
+ * @param {Map<string, any>} entries
+ * @returns {void}
+ */
+function collect_rule_class_map_entries(node, entries) {
+	if (!node || typeof node !== 'object') return;
+
+	if (Array.isArray(node)) {
+		for (const child of node) collect_rule_class_map_entries(child, entries);
+		return;
+	}
+
+	if (node.type === 'ComplexSelector') {
+		const class_selector = get_standalone_class_selector(node);
+		if (class_selector) {
+			const name = class_selector.name.replace(regex_backslash_and_following_character, '$1');
+			if (!entries.has(name)) {
+				entries.set(name, {
+					start: class_selector.start,
+					end: class_selector.end,
+					selector: class_selector,
+				});
+			}
+		}
+	}
+
+	if (is_function_or_class_boundary(node)) {
+		return;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		collect_rule_class_map_entries(node[key], entries);
+	}
+}
+
+/**
+ * @param {any} complex_selector
+ * @returns {any | null}
+ */
+function get_standalone_class_selector(complex_selector) {
+	if (complex_selector?.children?.length !== 1) return null;
+	const relative_selector = complex_selector.children[0];
+	if (
+		relative_selector?.metadata?.is_global ||
+		relative_selector?.metadata?.is_global_like ||
+		relative_selector?.selectors?.length !== 1
+	) {
+		return null;
+	}
+	const selector = relative_selector.selectors[0];
+	return selector?.type === 'ClassSelector' ? selector : null;
+}

package/types/index.d.ts

@@ -26,6 +26,7 @@ export { createJsxTransform };
 
 export function collectStyleRefAttributes(node: any, refs?: any[]): any[];
 export function createStyleClassMap(component: any, css: any): AST.ObjectExpression;
+export function createStyleClassMapFromStylesheet(css: any): AST.ObjectExpression;
 export function createStyleRefSetupStatements(
 	refAttributes: any[],
 	styleMap: AST.Expression,
@@ -35,6 +36,7 @@ export function createStyleRefSetupStatements(
 		visitExpression?: (expression: AST.Expression) => AST.Expression;
 	},
 ): AST.Statement[];
+export function getStyleElementStylesheet(styleElement: any): any | null;
 
 /**
  * Compile error interface

package/types/jsx-platform.d.ts

@@ -354,10 +354,15 @@ export interface JsxPlatform {
 
 	jsx: {
 		/**
-		 * Rewrite Ripple's `class` attribute to React's `className`. React: true.
-		 * Preact and Solid accept `class` natively, so: false.
+		 * Rewrite Ripple's `class` attribute to `className` for legacy targets
+		 * that require it. First-party targets keep authored `class`.
 		 */
 		rewriteClassAttr: boolean;
+		/**
+		 * Attribute name to use when TSRX injects scoped CSS classes. This does
+		 * not rewrite authored attributes.
+		 */
+		classAttrName?: 'class' | 'className';
 		/**
 		 * Accepted values of `kind` in `<tsx:kind>` compat blocks. React accepts
 		 * only `'react'`. Preact accepts both `'preact'` and `'react'`.