@tsrx/core 0.1.8 → 0.1.10

package/src/diagnostics.js

@@ -5,4 +5,5 @@ export const DIAGNOSTIC_CODES = {
 	UNCLOSED_TAG: 'tsrx-unclosed-tag',
 	MISMATCHED_CLOSING_TAG: 'tsrx-mismatched-closing-tag',
 	TEMPLATE_EXPRESSION_TRAILING_SEMICOLON: 'tsrx-template-expression-trailing-semicolon',
+	HTML_DIRECTIVE_AS_ATTRIBUTE_VALUE: 'tsrx-html-directive-as-attribute-value',
 };

package/src/index.js

@@ -146,14 +146,21 @@ export {
 	clone_switch_helper_invocation as cloneSwitchHelperInvocation,
 	collect_param_bindings as collectParamBindings,
 	collect_statement_bindings as collectStatementBindings,
+	create_host_html_attribute as createHostHtmlAttribute,
+	create_host_html_conflict_error as createHostHtmlConflictError,
 	createJsxTransform,
 	CREATE_REF_PROP_INTERNAL_NAME,
 	extract_jsx_setup_declarations as extractJsxSetupDeclarations,
+	get_host_html_conflicting_attribute as getHostHtmlConflictingAttribute,
+	get_invalid_html_child_error_message as getInvalidHtmlChildErrorMessage,
+	is_component_like_element,
 	is_ref_prop_expression as isRefPropExpression,
 	MERGE_REFS_INTERNAL_NAME,
 	merge_duplicate_refs as mergeDuplicateRefs,
 	NORMALIZE_SPREAD_PROPS_INTERNAL_NAME,
 	plan_switch_lift as planSwitchLift,
+	recover_invalid_html_child as recoverInvalidHtmlChild,
+	rewrite_host_html_children as rewriteHostHtmlChildren,
 	return_value_body_to_expression as returnValueBodyToExpression,
 	rewrite_loop_continues_to_bare_returns as rewriteLoopContinuesToBareReturns,
 	to_jsx_attribute as toJsxAttribute,
@@ -229,6 +236,7 @@ export {
 
 // Analyze
 export { analyze_css as analyzeCss } from './analyze/css-analyze.js';
+export { prune_css as pruneCss } from './analyze/prune.js';
 export {
 	CLASS_COMPONENT_AS_NON_ARROW_PROPERTY_ERROR,
 	COMPONENT_DO_WHILE_STATEMENT_ERROR,

package/src/plugin.js

@@ -19,6 +19,8 @@ import { DIAGNOSTIC_CODES } from './diagnostics.js';
 
 const JSX_EXPRESSION_VALUE_ERROR =
 	'JSX elements cannot be used as expressions. Wrap JSX with `<>...</>` or `<tsx>...</tsx>`, wrap TSRX templates with `<tsrx>...</tsrx>`, or use elements as statements within a component.';
+const HTML_ATTRIBUTE_VALUE_ERROR =
+	'`{html ...}` is not supported as an attribute value. Use a string literal or expression without `html`.';
 
 const CharCode = Object.freeze({
 	tab: 9,
@@ -1969,6 +1971,27 @@ export function TSRXPlugin(config) {
 						/** @type {AST.RefAttribute} */ (node).argument = this.parseMaybeAssign();
 						this.expect(tt.braceR);
 						return /** @type {AST.RefAttribute} */ (this.finishNode(node, 'RefAttribute'));
+					} else if (this.type === tt.name && this.value === 'html') {
+						// {html ...}
+						// The support is purely for better error messages to avoid
+						// the parser throw an unexpected token error
+						const id = /** @type {AST.Identifier} */ (this.parseIdentNode());
+						id.tracked = false;
+						this.finishNode(id, 'Identifier');
+						this.next();
+						const value = this.type === tt.braceR ? id : this.parseMaybeAssign();
+						const report_end = this.type === tt.braceR ? this.end : (value.end ?? this.end);
+						this.#report_recoverable_error_range(
+							node.start ?? id.start ?? this.start,
+							report_end,
+							HTML_ATTRIBUTE_VALUE_ERROR,
+							DIAGNOSTIC_CODES.HTML_DIRECTIVE_AS_ATTRIBUTE_VALUE,
+						);
+						/** @type {AST.Attribute} */ (node).name = id;
+						/** @type {AST.Attribute} */ (node).value = value;
+						/** @type {AST.Attribute} */ (node).shorthand = false;
+						this.expect(tt.braceR);
+						return this.finishNode(node, 'Attribute');
 					} else if (this.type === tt.ellipsis) {
 						this.expect(tt.ellipsis);
 						/** @type {AST.SpreadAttribute} */ (node).argument = this.parseMaybeAssign();
@@ -1992,10 +2015,18 @@ export function TSRXPlugin(config) {
 					}
 				}
 				/** @type {ESTreeJSX.JSXAttribute} */ (node).name = this.jsx_parseNamespacedName();
-				/** @type {ESTreeJSX.JSXAttribute} */ (node).value =
-					/** @type {ESTreeJSX.JSXAttribute['value'] | null} */ (
-						this.eat(tt.eq) ? this.jsx_parseAttributeValue() : null
+				const value = /** @type {ESTreeJSX.JSXAttribute['value'] | null} */ (
+					this.eat(tt.eq) ? this.jsx_parseAttributeValue() : null
+				);
+				if (value?.type === 'JSXExpressionContainer' && value.html) {
+					this.#report_recoverable_error_range(
+						value.start ?? node.start ?? this.start,
+						value.end ?? node.end ?? this.end,
+						HTML_ATTRIBUTE_VALUE_ERROR,
+						DIAGNOSTIC_CODES.HTML_DIRECTIVE_AS_ATTRIBUTE_VALUE,
 					);
+				}
+				/** @type {ESTreeJSX.JSXAttribute} */ (node).value = value;
 				return this.finishNode(node, 'JSXAttribute');
 			}
 
@@ -2205,6 +2236,8 @@ export function TSRXPlugin(config) {
 							// In JSX text mode, '<' and '{' always start a tag/expression container.
 							// `exprAllowed` can be false here due to surrounding parser state, but
 							// throwing breaks valid templates (e.g. sibling tags after a close).
+							this.start = this.pos;
+							this.startLoc = this.curPosition();
 							if (ch === CharCode.lessThan) {
 								++this.pos;
 								return this.finishToken(tstt.jsxTagStart);
@@ -2434,6 +2467,8 @@ export function TSRXPlugin(config) {
 				/** @type {AST.NodeWithLocation} */ (element).loc.start = position;
 				element.metadata = { path: [] };
 				element.children = [];
+				element.type = 'Element';
+				this.#path.push(element);
 
 				const open = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
 					this.jsx_parseOpeningElementAt(start, position)
@@ -2492,8 +2527,6 @@ export function TSRXPlugin(config) {
 					element.type = 'Element';
 				}
 
-				this.#path.push(element);
-
 				for (const attr of open.attributes) {
 					if (attr.type === 'JSXAttribute') {
 						/** @type {AST.Attribute} */ (/** @type {unknown} */ (attr)).type = 'Attribute';
@@ -2534,7 +2567,12 @@ export function TSRXPlugin(config) {
 
 				element.attributes = open.attributes;
 				element.metadata ??= { path: [] };
-				element.metadata.commentContainerId = ++this.#commentContextId;
+				// Opening-tag parsing can tokenize comments that appear before the first
+				// child. Preserve that early container id so the comment stays associated
+				// with this element during comment attachment/printing.
+				if (element.metadata.commentContainerId === undefined) {
+					element.metadata.commentContainerId = ++this.#commentContextId;
+				}
 
 				if (element.selfClosing) {
 					this.#path.pop();
@@ -2548,7 +2586,7 @@ export function TSRXPlugin(config) {
 						enterScope: true,
 					});
 
-					if (element.type === 'Tsx') {
+					if (/** @type {AST.Tsx} */ (element).type === 'Tsx') {
 						this.#path.pop();
 
 						if (!element.unclosed) {
@@ -2725,7 +2763,7 @@ export function TSRXPlugin(config) {
 							enterScope: true,
 						});
 
-						if (element.type === 'Tsx') {
+						if (/** @type {AST.Tsx} */ (element).type === 'Tsx') {
 							this.#path.pop();
 
 							if (!element.unclosed) {
@@ -2749,12 +2787,15 @@ export function TSRXPlugin(config) {
 								this.#popTsxTokenContextBeforeTemplateExpressionChild();
 								this.next();
 							}
-						} else if (element.type === 'TsxCompat') {
+						} else if (/** @type {AST.TsxCompat} */ (element).type === 'TsxCompat') {
 							this.#path.pop();
 
 							if (!element.unclosed) {
 								const raise_error = () => {
-									this.raise(this.start, `Expected closing tag '</tsx:${element.kind}>'`);
+									this.raise(
+										this.start,
+										`Expected closing tag '</tsx:${/** @type {AST.TsxCompat} */ (element).kind}>'`,
+									);
 								};
 
 								this.next();
@@ -2771,7 +2812,7 @@ export function TSRXPlugin(config) {
 									raise_error();
 								}
 								this.next();
-								if (this.value !== element.kind) {
+								if (this.value !== /** @type {AST.TsxCompat} */ (element).kind) {
 									raise_error();
 								}
 								this.next();
@@ -2781,7 +2822,10 @@ export function TSRXPlugin(config) {
 								this.#popTsxTokenContextBeforeTemplateExpressionChild();
 								this.next();
 							}
-						} else if (element.type === 'Tsrx' && this.#path[this.#path.length - 1] === element) {
+						} else if (
+							/** @type {AST.Tsrx} */ (element).type === 'Tsrx' &&
+							this.#path[this.#path.length - 1] === element
+						) {
 							this.#report_broken_markup_error(
 								this.start,
 								"Unclosed tag '<tsrx>'. Expected '</tsrx>' before end of component.",

package/src/transform/jsx/index.js

@@ -5,6 +5,8 @@
 import { walk } from 'zimmerframe';
 import { print } from 'esrap';
 import { error } from '../../errors.js';
+import { analyze_css } from '../../analyze/css-analyze.js';
+import { prune_css } from '../../analyze/prune.js';
 import {
 	ensure_function_metadata,
 	in_jsx_child_context,
@@ -36,7 +38,11 @@ import {
 import * as b from '../../utils/builders.js';
 import { apply_lazy_transforms, preallocate_lazy_ids } from '../lazy.js';
 import { find_first_top_level_await_in_component_body } from '../await.js';
-import { prepare_stylesheet_for_render, annotate_component_with_hash } from '../scoping.js';
+import {
+	prepare_stylesheet_for_render,
+	annotate_component_with_hash,
+	is_style_element,
+} from '../scoping.js';
 import {
 	validate_class_component_declarations,
 	validate_component_loop_break_statement,
@@ -60,20 +66,43 @@ const HOOK_CALLBACK_OUTER_MUTATION_ERROR =
 const TEMPLATE_FRAGMENT_ERROR =
 	'JSX fragment syntax is not needed in TSRX templates. TSRX renders in immediate mode, so everything is already a fragment. Use `<>...</>` only within <tsx>...</tsx>.';
 
+/**
+ * @param {TransformContext} transform_context
+ * @returns {string}
+ */
+export function get_invalid_html_child_error_message(transform_context) {
+	return `\`{html ...}\` is only supported as the sole child of an element in ${transform_context.platform.name}.`;
+}
+
 /**
  * @param {AST.Node} node
  * @param {TransformContext} transform_context
  */
-function report_html_template_unsupported_error(node, transform_context) {
-	// this should be a fatal error so we don't pass the errors collection,
-	// since we don't have a transform for the Html node
+function report_invalid_html_child_error(node, transform_context) {
 	error(
-		`\`{html ...}\` is not supported on the ${transform_context.platform.name} target. Use \`dangerouslySetInnerHTML={{ __html: ... }}\` as an element attribute instead.`,
+		get_invalid_html_child_error_message(transform_context),
 		transform_context.filename,
 		node,
+		transform_context.errors,
+		transform_context.comments,
 	);
 }
 
+/**
+ * In loose/editor mode `error(...)` records the diagnostic and continues, so an
+ * invalid standalone `{html ...}` child still needs a valid expression node for
+ * the virtual TSX output.
+ *
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {ESTreeJSX.JSXExpressionContainer}
+ */
+export function recover_invalid_html_child(node, transform_context) {
+	report_invalid_html_child_error(node, transform_context);
+	const expression = set_loc(clone_expression_node(node.expression), node);
+	return to_jsx_expression_container(expression, node);
+}
+
 /**
  * @param {AST.Node} node
  * @param {TransformContext} transform_context
@@ -403,12 +432,14 @@ export function createJsxTransform(platform) {
 
 				const css = as_any.css;
 				if (css) {
+					apply_css_definition_metadata(as_any, css);
 					stylesheets.push(css);
 					const hash = css.hash;
 					annotate_component_with_hash(
 						as_any,
 						hash,
 						platform.jsx.rewriteClassAttr ? 'className' : 'class',
+						transform_context.typeOnly,
 					);
 				}
 				return next(state);
@@ -586,6 +617,73 @@ export function createJsxTransform(platform) {
 	return transform;
 }
 
+/**
+ * Attach selector-location metadata used by editor definitions/hover before
+ * the shared scoping pass mutates class attributes with the component hash.
+ *
+ * @param {any} component
+ * @param {any} css
+ * @returns {void}
+ */
+function apply_css_definition_metadata(component, css) {
+	analyze_css(css);
+
+	const metadata = component.metadata || (component.metadata = { path: [] });
+	const style_classes = metadata.styleClasses || (metadata.styleClasses = new Map());
+	const top_scoped_classes = metadata.topScopedClasses || new Map();
+	const elements = collect_css_prunable_elements(component.body || []);
+
+	for (const element of elements) {
+		prune_css(css, element, style_classes, top_scoped_classes);
+	}
+
+	if (top_scoped_classes.size > 0) {
+		metadata.topScopedClasses = top_scoped_classes;
+	}
+}
+
+/**
+ * @param {any} value
+ * @param {any[]} [elements]
+ * @returns {any[]}
+ */
+function collect_css_prunable_elements(value, elements = []) {
+	if (!value || typeof value !== 'object') {
+		return elements;
+	}
+
+	if (Array.isArray(value)) {
+		for (const child of value) {
+			collect_css_prunable_elements(child, elements);
+		}
+		return elements;
+	}
+
+	if (
+		value.type === 'FunctionDeclaration' ||
+		value.type === 'FunctionExpression' ||
+		value.type === 'ArrowFunctionExpression' ||
+		value.type === 'Component'
+	) {
+		return elements;
+	}
+
+	if (value.type === 'Element') {
+		if (!is_style_element(value)) {
+			elements.push(value);
+		}
+	}
+
+	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);
+	}
+
+	return elements;
+}
+
 /**
  * Detect a top-level `"use server"` directive. Used by platforms whose
  * validation rule requires the directive to enable top-level `await`
@@ -2310,10 +2408,19 @@ function to_jsx_element(node, transform_context, raw_children = node.children ||
 			selfClosing = child_transform.selfClosing;
 		}
 	} else {
-		if (walked_children.some((/** @type {any} */ c) => c && c.type === 'Html')) {
-			return report_html_template_unsupported_error(node, transform_context);
+		const html_child_transform = rewrite_host_html_children(
+			node,
+			walked_children,
+			raw_children,
+			attributes,
+			transform_context,
+		);
+		if (html_child_transform) {
+			children = html_child_transform.children;
+			selfClosing = html_child_transform.selfClosing;
+		} else {
+			children = create_element_children(walked_children, transform_context);
 		}
-		children = create_element_children(walked_children, transform_context);
 	}
 	const has_unmappable_attribute = attributes.some(
 		(/** @type {any} */ attribute) => attribute?.metadata?.has_unmappable_value,
@@ -2341,6 +2448,117 @@ function to_jsx_element(node, transform_context, raw_children = node.children ||
 	return set_loc(b.jsx_element_fresh(openingElement, closingElement, children), node);
 }
 
+/**
+ * @param {any} node
+ * @param {any[]} walked_children
+ * @param {any[]} raw_children
+ * @param {any[]} attributes
+ * @param {TransformContext} transform_context
+ * @returns {{ children: any[]; selfClosing: boolean } | null}
+ */
+export function rewrite_host_html_children(
+	node,
+	walked_children,
+	raw_children,
+	attributes,
+	transform_context,
+) {
+	const source_children = raw_children || walked_children;
+	const source_html_index = source_children.findIndex((child) => child?.type === 'Html');
+	if (source_html_index === -1) {
+		return null;
+	}
+	const source_html = source_children[source_html_index];
+	const walked_html =
+		walked_children[source_html_index]?.type === 'Html'
+			? walked_children[source_html_index]
+			: source_html;
+
+	if (is_component_like_element(node) || source_children.length !== 1) {
+		report_invalid_html_child_error(source_html, transform_context);
+	}
+
+	const conflicting_attribute = get_host_html_conflicting_attribute(attributes, transform_context);
+	if (conflicting_attribute !== null) {
+		error(
+			create_host_html_conflict_error(conflicting_attribute, transform_context),
+			transform_context.filename,
+			source_html,
+			transform_context.errors,
+			transform_context.comments,
+		);
+	}
+
+	attributes.push(create_host_html_attribute(walked_html, source_html, transform_context));
+
+	return { children: [], selfClosing: true };
+}
+
+/**
+ * @param {any[]} attributes
+ * @param {TransformContext} transform_context
+ * @returns {{ kind: 'attribute'; name: string } | null}
+ */
+export function get_host_html_conflicting_attribute(attributes, transform_context) {
+	const conflicting_attributes = get_host_html_conflicting_attribute_names(transform_context);
+	for (const name of conflicting_attributes) {
+		if (has_jsx_attribute(attributes, name)) {
+			return { kind: 'attribute', name };
+		}
+	}
+
+	return null;
+}
+
+/**
+ * @param {{ kind: 'attribute'; name: string }} conflicting_attribute
+ * @param {TransformContext} transform_context
+ * @returns {string}
+ */
+export function create_host_html_conflict_error(conflicting_attribute, transform_context) {
+	const html_attribute = get_host_html_attribute_name(transform_context);
+	return `\`{html ...}\` lowers to \`${html_attribute}\` on the ${transform_context.platform.name} target and cannot be combined with an existing \`${conflicting_attribute.name}\` attribute.`;
+}
+
+/**
+ * @param {TransformContext} transform_context
+ * @returns {string[]}
+ */
+function get_host_html_conflicting_attribute_names(transform_context) {
+	switch (transform_context.platform.name) {
+		case 'Solid':
+			return ['innerHTML', 'textContent'];
+		case 'Vue':
+			return ['innerHTML'];
+		default:
+			return [get_host_html_attribute_name(transform_context)];
+	}
+}
+
+/**
+ * @param {TransformContext} transform_context
+ * @returns {'dangerouslySetInnerHTML' | 'innerHTML'}
+ */
+function get_host_html_attribute_name(transform_context) {
+	return transform_context.platform.jsx?.htmlProp === 'dangerouslySetInnerHTML'
+		? 'dangerouslySetInnerHTML'
+		: 'innerHTML';
+}
+
+/**
+ * @param {any[]} attributes
+ * @param {string} name
+ * @returns {boolean}
+ */
+function has_jsx_attribute(attributes, name) {
+	return attributes.some(
+		(attr) =>
+			attr?.type === 'JSXAttribute' &&
+			attr.name?.type === 'JSXIdentifier' &&
+			attr.name.name === name,
+	);
+}
+
 /**
  * @param {any[]} children
  * @param {TransformContext} transform_context
@@ -3580,7 +3798,7 @@ function to_jsx_child(node, transform_context) {
 		case 'TSRXExpression':
 			return to_jsx_expression_container(node.expression, node);
 		case 'Html':
-			return report_html_template_unsupported_error(node, transform_context);
+			return recover_invalid_html_child(node, transform_context);
 		case 'IfStatement':
 			return (
 				transform_context.platform.hooks?.controlFlow?.ifStatement ?? if_statement_to_jsx_child
@@ -4918,7 +5136,7 @@ function transform_element_attributes_dispatch(attrs, transform_context, element
  * @param {any} element
  * @returns {boolean}
  */
-function is_component_like_element(element) {
+export function is_component_like_element(element) {
 	const id = element?.id;
 	if (!id) return false;
 	if (id.type === 'Identifier') return /^[A-Z]/.test(id.name);
@@ -5127,6 +5345,31 @@ function is_named_ref_attribute(attr) {
 	);
 }
 
+/**
+ * @param {any} html_expression
+ * @param {any} source_attr
+ * @param {TransformContext} transform_context
+ * @returns {any}
+ */
+export function create_host_html_attribute(html_expression, source_attr, transform_context) {
+	const expression =
+		html_expression?.type === 'Html' ? html_expression.expression : html_expression;
+	const name = get_host_html_attribute_name(transform_context);
+	const value =
+		name === 'dangerouslySetInnerHTML'
+			? set_loc(b.object([b.prop('init', b.id('__html'), expression)]), source_attr)
+			: expression;
+	const value_container = to_jsx_expression_container(value, source_attr);
+	if (name !== 'dangerouslySetInnerHTML') {
+		setLocation(value_container, source_attr, true);
+	}
+
+	return set_loc(
+		build_jsx_attribute(b.jsx_id(name), value_container, false, source_attr),
+		source_attr,
+	);
+}
+
 /**
  * @param {any} expression
  * @returns {boolean}
@@ -5379,6 +5622,8 @@ export function to_jsx_attribute(attr, transform_context) {
 		attr_name.name === 'class'
 	) {
 		attr_name = set_loc(b.id('className'), attr.name);
+		attr_name.metadata.source_name = 'class';
+		attr_name.metadata.source_length = 'class'.length;
 	}
 
 	const name =

package/src/transform/scoping.js

@@ -95,9 +95,15 @@ function is_composite_jsx_element(node) {
  * @param {any} node
  * @param {string} hash
  * @param {'class' | 'className'} [jsx_class_attr_name='class']
+ * @param {boolean} [preserve_style_elements=false]
  * @returns {any}
  */
-export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
+export function annotate_with_hash(
+	node,
+	hash,
+	jsx_class_attr_name = 'class',
+	preserve_style_elements = false,
+) {
 	if (!node || typeof node !== 'object') return node;
 	if (
 		node.type === 'Component' ||
@@ -109,13 +115,19 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
 	}
 
 	if (node.type === 'Element') {
+		if (preserve_style_elements && is_style_element(node)) {
+			node.children = [];
+			return node;
+		}
 		if (!is_style_element(node) && !is_composite_element(node)) {
 			add_hash_class(node, hash);
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children
-				.filter((/** @type {any} */ child) => !is_style_element(child))
-				.map((/** @type {any} */ child) => annotate_with_hash(child, hash, jsx_class_attr_name));
+				.filter((/** @type {any} */ child) => preserve_style_elements || !is_style_element(child))
+				.map((/** @type {any} */ child) =>
+					annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
+				);
 		}
 		return node;
 	}
@@ -126,7 +138,7 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children.map((/** @type {any} */ child) =>
-				annotate_with_hash(child, hash, jsx_class_attr_name),
+				annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
 			);
 		}
 		return node;
@@ -140,10 +152,10 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
 		const value = node[key];
 		if (Array.isArray(value)) {
 			node[key] = value.map((/** @type {any} */ child) =>
-				annotate_with_hash(child, hash, jsx_class_attr_name),
+				annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
 			);
 		} else if (value && typeof value === 'object') {
-			node[key] = annotate_with_hash(value, hash, jsx_class_attr_name);
+			node[key] = annotate_with_hash(value, hash, jsx_class_attr_name, preserve_style_elements);
 		}
 	}
 
@@ -154,14 +166,22 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
  * @param {any} component
  * @param {string} hash
  * @param {'class' | 'className'} [jsx_class_attr_name='class']
+ * @param {boolean} [preserve_style_elements=false]
  * @returns {void}
  */
-export function annotate_component_with_hash(component, hash, jsx_class_attr_name = 'class') {
+export function annotate_component_with_hash(
+	component,
+	hash,
+	jsx_class_attr_name = 'class',
+	preserve_style_elements = false,
+) {
 	/** @type {any[]} */
 	const body = component.body;
 	component.body = body
-		.filter((/** @type {any} */ child) => !is_style_element(child))
-		.map((/** @type {any} */ child) => annotate_with_hash(child, hash, jsx_class_attr_name));
+		.filter((/** @type {any} */ child) => preserve_style_elements || !is_style_element(child))
+		.map((/** @type {any} */ child) =>
+			annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
+		);
 }
 
 /**
@@ -198,7 +218,8 @@ export function add_hash_class(element, hash) {
 
 	if (value.type === 'Literal' && typeof value.value === 'string') {
 		const merged = `${value.value} ${hash}`;
-		existing.value = { type: 'Literal', value: merged, raw: JSON.stringify(merged) };
+		value.value = merged;
+		value.raw = JSON.stringify(merged);
 		return;
 	}
 
@@ -233,7 +254,11 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 		existing.name = {
 			type: 'JSXIdentifier',
 			name: jsx_class_attr_name,
-			metadata: existing.name.metadata || { path: [] },
+			metadata: {
+				...(existing.name.metadata || { path: [] }),
+				source_name: existing.name.name,
+				source_length: existing.name.name.length,
+			},
 		};
 	}
 
@@ -245,7 +270,8 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 
 	if (value.type === 'Literal' && typeof value.value === 'string') {
 		const merged = `${value.value} ${hash}`;
-		existing.value = { type: 'Literal', value: merged, raw: JSON.stringify(merged) };
+		value.value = merged;
+		value.raw = JSON.stringify(merged);
 		return;
 	}