@tsrx/core 0.1.65 → 0.1.67

package/README.md

@@ -64,7 +64,32 @@ here and keeps package docs focused on the core parser API.
   (`import`, `prop`, `let`, `const`, `function`, `for_pattern`, …).
 - **AST utilities** — pattern walkers, identifier extraction, builders, location
   helpers, obfuscation helpers.
-- **CSS support** — `parseStyle`, `analyzeCss`, `renderStylesheets`.
+- **CSS support** — `parseStyle`, `analyzeCss`, `renderStylesheets`. CSS node
+  offsets are relative to the style body; a sheet parsed with a `body` origin
+  (every sheet `parseModule` produces) records `sourceStart` and a file-relative
+  `loc`, and `analyzeCss` anchors its `:global` placement diagnostics on the
+  selector with file-relative positions. Pass `{ errors, comments }` to collect
+  them instead of throwing.
+- **Scoped styles** — `analyzeTsrx` resolves every `<style>` block. A standalone
+  block is a child of an element or fragment and is scoped to its siblings: it
+  styles the items beside it and everything below them, never the element that
+  contains it, and the compiler adds a hash class to those elements so the block's
+  selectors match only there. A block is an output node, so a block that is the
+  lone output of a `@{ … }` or control-flow body is
+  `STYLE_STANDALONE_NEEDS_FRAGMENT`. Raw CSS is TSRX template syntax, so a block
+  with CSS in it outside every `@{ … }`/control-flow body is
+  `STYLE_STANDALONE_OUTSIDE_TEMPLATE`; plain-TSX `<style>{css}</style>` is an
+  ordinary element. Assigned blocks (`const theme = <style>…</style>`) are
+  classified as `theme` (exported, applied, or `$class` read) or `class-map`, and
+  `apply` targets are resolved through real bindings, declared before use. Results
+  ride on each block's `metadata` (`styleKind`, `styleApplies`, `styleApplied`,
+  `styleExported`) and on `program.metadata.styles`, and the analysis result
+  exposes `scopes`. Target compilers use `prepareStylesheetForRender(sheet, mode)`
+  with `mode: 'scope' | 'class-map' | 'theme'` (a boolean still means
+  `class-map`/`scope`) and `createStyleClassMapFromStylesheet(sheet, options)`,
+  whose object starts with `$class` and accepts `{ applied }` for composed themes.
+  Style diagnostics use the `STYLE_*` and `CSS_GLOBAL_PLACEMENT` codes in
+  `DIAGNOSTIC_CODES`.
 - **HTML helpers** — `isVoidElement`, `isBooleanAttribute`, `isDomProperty`,
   `validateNesting`.
 - **Event helpers** — delegated-event utilities, event-name normalization.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "type": "module",
   "repository": {
     "type": "git",
@@ -66,7 +66,9 @@
     "./test-harness/dep-scan": "./tests/shared/dep-scan.js",
     "./test-harness/runtime/*": "./tests/shared/runtime/*.js",
     "./test-harness/runtime/*.js": "./tests/shared/runtime/*.js",
-    "./test-harness/runtime/*.tsrx": "./tests/shared/runtime/*.tsrx"
+    "./test-harness/runtime/*.tsrx": "./tests/shared/runtime/*.tsrx",
+    "./test-harness/scoped-styles-fixtures": "./tests/shared/scoped-styles-fixtures.js",
+    "./test-harness/style-syntax": "./tests/utils/fixtures/style-syntax.js"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
@@ -76,10 +78,9 @@
     "@types/estree": "^1.0.8",
     "acorn": "^8.17.0",
     "esrap": "^2.3.2",
-    "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",
     "zimmerframe": "^1.1.2",
-    "@tsrx/runtime": "0.1.4"
+    "@tsrx/runtime": "0.1.5"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -92,6 +93,9 @@
   },
   "files": [
     "src",
-    "types"
+    "types",
+    "tests/fixtures/scoped-styles",
+    "tests/shared/scoped-styles-fixtures.js",
+    "tests/utils/fixtures/style-syntax.js"
   ]
 }

package/src/analyze/css-analyze.js

@@ -1,6 +1,14 @@
 /** @import * as AST from 'estree' */
+/** @import { CompileError } from '../../types/index' */
 
 import { walk } from 'zimmerframe';
+import { error } from '../errors.js';
+import { DIAGNOSTIC_CODES } from '../diagnostics.js';
+import { css_node_source_position } from '../parse/style.js';
+import {
+	TSRX_CSS_GLOBAL_MIDDLE_PLACEMENT_ERROR,
+	TSRX_CSS_GLOBAL_NESTED_IN_PSEUDOCLASS_ERROR,
+} from './validation.js';
 
 /**
  * True if is `:global` without arguments
@@ -35,10 +43,41 @@ function is_global(relative_selector) {
 }
 
 /**
- * Analyze CSS and set metadata for global selectors
+ * Analyze CSS and set metadata for global selectors.
+ *
+ * `:global` placement problems are reported through `error()` with the
+ * `CSS_GLOBAL_PLACEMENT` code: pushed onto `errors` when given (and skipped
+ * over a suppressing comment when `comments` is given too), thrown otherwise.
+ * When `css` is a sheet parsed with a `body` origin (every sheet `parseModule`
+ * produces), the diagnostic carries file-relative `pos` / `end` / `loc`; the
+ * `fileName` defaults to the sheet's.
+ *
  * @param {AST.CSS.Node} css - The CSS AST
+ * @param {{
+ *   filename?: string | null,
+ *   errors?: CompileError[],
+ *   comments?: AST.CommentWithLocation[],
+ * }} [options]
  */
-export function analyze_css(css) {
+export function analyze_css(css, options = {}) {
+	const sheet = css.type === 'StyleSheet' ? css : null;
+	const filename = options.filename ?? sheet?.filename ?? null;
+
+	/**
+	 * @param {string} message
+	 * @param {AST.CSS.Node} node
+	 */
+	function report(message, node) {
+		error(
+			message,
+			filename,
+			css_node_source_position(sheet, node),
+			options.errors,
+			options.comments,
+			DIAGNOSTIC_CODES.CSS_GLOBAL_PLACEMENT,
+		);
+	}
+
 	walk(css, /** @type {{ rule: AST.CSS.Rule | null }} */ ({ rule: null }), {
 		Rule(node, context) {
 			node.metadata.parent_rule = context.state.rule;
@@ -98,7 +137,7 @@ export function analyze_css(css) {
 						is_nested &&
 						!(/** @type {AST.CSS.PseudoClassSelector} */ (global.selectors[0]).args)
 					) {
-						throw new Error(`A :global selector cannot be inside a pseudoclass.`);
+						report(TSRX_CSS_GLOBAL_NESTED_IN_PSEUDOCLASS_ERROR, global.selectors[0]);
 					}
 
 					const idx = node.children.indexOf(global);
@@ -107,9 +146,8 @@ export function analyze_css(css) {
 						// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 						for (let i = idx + 1; i < node.children.length; i++) {
 							if (!is_global(node.children[i])) {
-								throw new Error(
-									`:global(...) can be at the start or end of a selector sequence, but not in the middle.`,
-								);
+								report(TSRX_CSS_GLOBAL_MIDDLE_PLACEMENT_ERROR, first);
+								break;
 							}
 						}
 					}

package/src/analyze/index.js

@@ -15,6 +15,8 @@ import {
 	validate_forgotten_statement_container,
 	validate_unsupported_lazy_assignment_position,
 } from './validation.js';
+import { create_scopes, ScopeRoot } from '../scope.js';
+import { analyze_styles } from './style-analyze.js';
 
 /**
  * Find the first authored lazy pattern along an assignment target's binding
@@ -220,5 +222,16 @@ export function analyze_tsrx(ast, filename, options = {}) {
 
 	walk(ast, state, visitors);
 
-	return { ast, errors, comments };
+	// Style `apply` targets resolve through real bindings. Scope diagnostics
+	// (duplicate declarations, reserved names) stay with the compilers that
+	// already report them, so this run collects into a private list.
+	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), null, {
+		filename: /** @type {string} */ (filename ?? null),
+		collect: true,
+		errors: [],
+		comments,
+	});
+	const styles = analyze_styles(ast, scopes, state);
+
+	return { ast, errors, comments, scope, scopes, styles };
 }

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}