@tsrx/core 0.1.66 → 0.1.68

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "type": "module",
   "repository": {
     "type": "git",
@@ -80,7 +80,7 @@
     "esrap": "^2.3.2",
     "magic-string": "^0.30.18",
     "zimmerframe": "^1.1.2",
-    "@tsrx/runtime": "0.1.5"
+    "@tsrx/runtime": "0.1.6"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/src/analyze/prune.js

@@ -422,18 +422,14 @@ function can_render_dynamic_content(element, check_classes = false) {
 function get_possible_element_siblings(node, direction, adjacent_only) {
 	/** @type {Map<AST.TSRXJSXElement, boolean>} */
 	const siblings = new Map();
-	const parent = get_element_parent(node);
+	const container = get_sibling_container(node);
 
-	if (!parent) {
+	if (container === null) {
 		return siblings;
 	}
 
-	// Get the container that holds the siblings
-	const container = node_children(parent);
 	const node_index = container.indexOf(node);
 
-	if (node_index === -1) return siblings;
-
 	// Determine which siblings to check based on direction
 	let start, end, step;
 	if (direction === FORWARD) {
@@ -532,9 +528,8 @@ function apply_combinator(relative_selector, rest_selectors, rule, node, directi
 								sibling_matched = true;
 							} else {
 								// Check if there are any elements after this component that could match the remaining selectors
-								const parent = get_element_parent(node);
-								if (parent) {
-									const container = node_children(parent);
+								const container = get_sibling_container(node);
+								if (container !== null) {
 									const component_index = container.indexOf(possible_sibling);
 
 									// For adjacent combinator, only check immediate next element
@@ -578,6 +573,38 @@ function apply_combinator(relative_selector, rest_selectors, rule, node, directi
 			return true;
 	}
 }
+/**
+ * The children list an element sits in — that of the nearest ancestor on its
+ * path whose children include it, which is its parent element, a fragment
+ * (an authored `<>…</>`, a control-flow branch's output, or the synthetic
+ * root of a style scope), or `null` when the element has no container.
+ *
+ * Sibling combinators (`+`, `~`) read this list. Ancestor combinators keep
+ * using {@link get_element_parent}: a fragment is not an element, and a
+ * scope's root fragment stands for the container that a scoped block never
+ * styles.
+ *
+ * @param {AST.TSRXElementNode} node
+ * @returns {AST.Node[] | null}
+ */
+function get_sibling_container(node) {
+	const path = node.metadata?.path;
+	if (!path || !path.length) {
+		return null;
+	}
+
+	let i = path.length;
+
+	while (i--) {
+		const children = node_children(path[i]);
+		if (children.includes(node)) {
+			return children;
+		}
+	}
+
+	return null;
+}
+
 /**
  * @param {AST.TSRXElementNode} node
  * @returns {AST.TSRXJSXElement | null}

package/src/index.js

@@ -252,6 +252,7 @@ export {
 // Analyze
 export { analyze_css as analyzeCss } from './analyze/css-analyze.js';
 export { prune_css as pruneCss } from './analyze/prune.js';
+export { create_scope_root as createScopeRoot } from './transform/jsx/style-scopes.js';
 export {
 	TSRX_DO_WHILE_STATEMENT_ERROR,
 	TSRX_FORGOTTEN_STATEMENT_CONTAINER_ERROR,

package/src/transform/jsx/style-scopes.js

@@ -446,7 +446,9 @@ function prepare_scope(own, render_items, holder, state) {
 	}
 	const hash = sheets.length > 0 ? sheets[0][1].hash : null;
 	const refs = collect_style_ref_attributes(own);
-	const elements = collect_css_prunable_elements(render_items, [], ctx);
+	const elements = collect_css_prunable_elements(render_items, [], ctx, [
+		create_scope_root(render_items),
+	]);
 
 	/** @type {AST.CSS.StyleSheet | null} */
 	let first_sheet = null;
@@ -566,12 +568,34 @@ export function apply_css_definition_metadata(
 	}
 }
 
+/**
+ * The root of a scope's ancestor paths: a fragment holding the list's items,
+ * so `prune_css` can find the siblings of a top-level item for `+` and `~`
+ * combinators. It is not an element, so ancestor combinators never match it —
+ * the container of a scope is exactly what a scoped block does not style.
+ *
+ * @param {AST.Node[]} items
+ * @returns {AST.Node}
+ */
+export function create_scope_root(items) {
+	return /** @type {AST.Node} */ (
+		/** @type {unknown} */ ({
+			type: 'JSXFragment',
+			openingFragment: { type: 'JSXOpeningFragment' },
+			closingFragment: { type: 'JSXClosingFragment' },
+			children: items,
+			metadata: { path: [] },
+		})
+	);
+}
+
 /**
  * Pruning runs before the walker stamps paths onto template nodes, so each
  * collected element gets its ancestor chain (`metadata.path`) here —
  * descendant/sibling selector matching in `prune_css` reads it. The scope's
  * own elements and those of nested scopes are collected; a component
- * boundary stops the walk.
+ * boundary stops the walk. Callers that collect a scope's items themselves
+ * should seed `path` with {@link create_scope_root} for the same reason.
  *
  * @param {AST.Node | AST.Node[]} value
  * @param {AST.TSRXJSXElement[]} [elements]

package/tests/fixtures/scoped-styles/sibling-combinators.expected.json

@@ -0,0 +1,16 @@
+{
+  "elements": {
+    "a scope": ["scope"],
+    "b": ["scope"],
+    "c": ["scope"],
+    "wrap": ["scope"],
+    "x": ["scope"],
+    "y": ["scope"],
+    "d": ["scope"],
+    "e": ["scope"],
+    "g": ["scope"]
+  },
+  "cssOrder": ["scope"],
+  "pruned": [".f + .g"],
+  "classMaps": {}
+}

package/tests/fixtures/scoped-styles/sibling-combinators.tsrx

@@ -0,0 +1,42 @@
+// Sibling combinators between the items of one scope, and between the items
+// of a branch fragment: both siblings carry the scope hash, so the rules are
+// kept. Only the descendant chain through `.wrap` had a parent element to find
+// siblings in before; the others sit at the top of their list.
+export function SiblingCombinators({ open }: { open: boolean }) @{
+	<>
+		<style>
+			.scope {
+				--label: scope;
+			}
+			.a + .b {
+				color: red;
+			}
+			.a ~ .c {
+				color: blue;
+			}
+			.wrap .x + .y {
+				color: green;
+			}
+			.d + .e {
+				color: black;
+			}
+			.f + .g {
+				color: gray;
+			}
+		</style>
+		<div class="a scope">{'a'}</div>
+		<div class="b">{'b'}</div>
+		<div class="c">{'c'}</div>
+		<div class="wrap">
+			<span class="x">{'x'}</span>
+			<span class="y">{'y'}</span>
+		</div>
+		@if (open) {
+			<>
+				<i class="d">{'d'}</i>
+				<i class="e">{'e'}</i>
+			</>
+		}
+		<i class="g">{'g'}</i>
+	</>
+}