@tsrx/core 0.1.9 → 0.1.10

package/src/index.js

@@ -236,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/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,
@@ -426,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);
@@ -609,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`
@@ -5547,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;
 	}
 

package/src/transform/segments.js

@@ -162,14 +162,14 @@ function visit_source_ast(ast, src_line_offsets, { regions, css_element_info })
 					start: cssStart,
 					end: cssEnd,
 					content: node.css,
-					id: get_style_region_id(node.metadata.styleScopeHash, `head-${region_id}`),
+					id: get_style_region_id(node.metadata.styleScopeHash, `head-${region_id++}`),
 				});
 			}
 
 			context.next();
 		},
 		Attribute(node, context) {
-			const element = context.path?.find((n) => n.type === 'Element');
+			const element = context.path?.findLast((n) => n.type === 'Element');
 			if (element?.metadata?.css?.scopedClasses) {
 				// we don't need to check is_element_dom_element(node)
 				// since scopedClasses are added during pruning only to DOM elements
@@ -568,10 +568,11 @@ export function convert_source_map_to_mappings(
 				if (node.loc && node.name) {
 					/** @type {Token} */
 					const token = {
-						source: node.metadata?.is_capitalized ? node.metadata.source_name : node.name,
+						source: node.metadata?.source_name ?? node.name,
 						generated: node.name,
 						loc: node.loc,
 						metadata: {},
+						sourceLength: node.metadata?.source_length,
 					};
 					if (node.metadata?.disable_verification) {
 						token.mappingData = { ...mapping_data, verification: false };
@@ -708,16 +709,24 @@ export function convert_source_map_to_mappings(
 						visit(node.value);
 					}
 				} else {
+					const is_class_attribute =
+						node.name?.type === 'JSXIdentifier' &&
+						(node.name.name === 'class' || node.name.name === 'className');
 					const attr =
-						node.name.name === 'class' && node.value?.type === 'JSXExpressionContainer'
+						is_class_attribute && node.value?.type === 'JSXExpressionContainer'
 							? node.value.expression
 							: node.value;
 
-					const css = attr
-						? css_element_info.get(`${attr.loc?.start.line}:${attr.loc?.start.column}`)
-						: null;
+					const css =
+						is_class_attribute && attr
+							? css_element_info.get(`${attr.loc?.start.line}:${attr.loc?.start.column}`)
+							: null;
 
 					if (attr && css) {
+						if (node.name) {
+							visit(node.name);
+						}
+
 						// Extract class names from the attribute value
 						const classes = extract_classes(
 							attr,
@@ -861,7 +870,7 @@ export function convert_source_map_to_mappings(
 						target_node,
 						src_to_gen_map,
 						gen_line_offsets,
-						mapping_data_verify_only,
+						closing ? mapping_data_verify_only : mapping_data_verify_complete,
 					);
 					// The generated code includes a semicolon after the closing or self-closed tag
 					// We're extending the mapping to include the semicolon