@tsrx/core 0.1.65 → 0.1.66

package/src/transform/scoping.js

@@ -7,7 +7,7 @@
 
 /** @import * as AST from 'estree' */
 /** @import * as ESTreeJSX from 'estree-jsx' */
-/** @import { Visitors } from '../../types/index' */
+/** @import { ScopeClassParts, StyleRenderMode, Visitors } from '../../types/index' */
 
 import { walk } from 'zimmerframe';
 import * as b from '../utils/builders.js';
@@ -18,27 +18,35 @@ export { is_style_element };
 
 /**
  * Mark selectors inside the stylesheet as "used" so `renderStylesheets` does
- * not comment them out.
+ * not comment them out, per render mode (D4):
  *
- * For a free-standing `<style>` block every selector is marked: we skip
- * selector-pruning because component boundaries can be dynamic — any selector
- * authored inside the component's `<style>` block is considered intentional.
+ * - `scope`: a free-standing `<style>` block. Every selector is marked; we
+ *   skip selector-pruning because component boundaries can be dynamic — any
+ *   selector authored inside a scope's `<style>` block is considered
+ *   intentional.
+ * - `class-map`: a block assigned to a local, unexported, unapplied variable.
+ *   The only selectors reachable through the generated class map are
+ *   standalone class selectors — scoped (`.x`) or global-wrapped
+ *   (`:global(.x)`). Anything else at the top level — element selectors,
+ *   compound selectors, descendant chains, global tag selectors — never ends
+ *   up in the class map and is marked unused for `renderStylesheets` to
+ *   comment out. Selectors of nested rules ride along with their parent: they
+ *   apply where the parent's class matched, and the whole rule is pruned when
+ *   the parent itself is unreachable.
+ * - `theme`: an exported or applied block (D5). Every selector is kept and
+ *   hash-scoped, because appliers stamp `$class` on arbitrary elements.
  *
- * When the `<style>` block is assigned to a variable (`is_style_expression`),
- * the only selectors reachable through the generated class map are standalone
- * class selectors — scoped (`.x`) or global-wrapped (`:global(.x)`). Anything
- * else at the top level — element selectors, compound selectors, descendant
- * chains, global tag selectors — never ends up in the class map and is marked
- * unused for `renderStylesheets` to comment out. Selectors of nested rules ride
- * along with their parent: they apply where the parent's class matched, and the
- * whole rule is pruned when the parent itself is unreachable.
+ * The boolean form (`true` → `class-map`, `false` → `scope`) is kept for one
+ * release for consumers compiled against the previous signature.
  *
  * @param {AST.CSS.StyleSheet} stylesheet
- * @param {boolean} [is_style_expression]
+ * @param {StyleRenderMode | boolean} [mode]
  * @returns {AST.CSS.StyleSheet}
  */
-export function prepare_stylesheet_for_render(stylesheet, is_style_expression = false) {
-	if (is_style_expression) {
+export function prepare_stylesheet_for_render(stylesheet, mode = 'scope') {
+	const render_mode = mode === true ? 'class-map' : mode === false ? 'scope' : mode;
+	const is_class_map = render_mode === 'class-map';
+	if (is_class_map) {
 		mark_class_map_selectors(stylesheet);
 	}
 	walk(
@@ -47,7 +55,7 @@ export function prepare_stylesheet_for_render(stylesheet, is_style_expression =
 		/** @type {Visitors<AST.CSS.Node, null>} */ ({
 			_(node, { next, path }) {
 				if (node.type === 'ComplexSelector') {
-					if (is_style_expression && is_unreachable_via_class_map(node, path)) {
+					if (is_class_map && is_unreachable_via_class_map(node, path)) {
 						// Not in the generated class map. The analyzer pre-marks global
 						// selectors as used, so reset, and leave the subtree untouched —
 						// no `scoped` marks that would splice the hash into pruned output.
@@ -149,7 +157,7 @@ export function annotate_with_hash(
 	if (node.type === 'JSXElement') {
 		const element = /** @type {AST.TSRXJSXElement} */ (node);
 		if (!is_composite_jsx_element(element) || element.metadata?.dynamicElement) {
-			add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name);
+			add_hash_class(element, hash, jsx_class_attr_name);
 		}
 		element.children = element.children
 			.map((child) => annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements))
@@ -221,85 +229,127 @@ function is_class_attribute(attr) {
 }
 
 /**
- * Merge the hash into an existing class attribute value. Returns `false` when
- * the value is not a string literal, so the caller must wrap it instead.
+ * The authored class value of an attribute as an expression, or `null` when
+ * the attribute has no usable value (`<div class>`, `class={}`).
  *
- * @param {ESTreeJSX.JSXAttribute['value'] | AST.Expression | ESTreeJSX.JSXEmptyExpression} value
- * @param {string} hash
- * @returns {boolean} whether the hash was merged into the literal in place
+ * @param {ESTreeJSX.JSXAttribute | undefined} attr
+ * @returns {AST.Expression | null}
  */
-function merge_hash_into_literal(value, hash) {
-	if (value?.type !== 'Literal' || typeof value.value !== 'string') return false;
-	const merged = `${value.value} ${hash}`;
-	value.value = merged;
-	value.raw = JSON.stringify(merged);
-	return true;
+function class_attribute_base(attr) {
+	const value = attr?.value;
+	if (!value) return null;
+	const expression = value.type === 'JSXExpressionContainer' ? value.expression : value;
+	if (expression.type === 'JSXEmptyExpression') return null;
+	return /** @type {AST.Expression} */ (expression);
 }
 
 /**
- * Ensure the element carries a class attribute containing the scoping hash.
+ * Build one attribute value from the accumulated parts — `authored hashes…
+ * applied…` — as a single string literal when everything is static,
+ * otherwise as one template literal (never a template literal nested in
+ * another across repeated stamping).
  *
- * @param {AST.TSRXJSXElement} element
- * @param {string} hash
- * @param {'class' | 'className'} [class_attr_name='class']
- * @returns {void}
+ * @param {ScopeClassParts} parts
+ * @returns {AST.Expression}
  */
-export function add_hash_class(element, hash, class_attr_name = 'class') {
-	const attrs = element.openingElement.attributes;
-	const existing = attrs.find(is_class_attribute);
+function build_scope_class_value(parts) {
+	const { base, hashes, applied } = parts;
+	const base_literal = base?.type === 'Literal' && typeof base.value === 'string' ? base : null;
+	/** @type {Array<string | AST.Expression>} */
+	const sequence = [];
+	if (base_literal) sequence.push(/** @type {string} */ (base_literal.value));
+	else if (base) sequence.push(base);
+	sequence.push(...hashes, ...applied);
 
-	if (!existing) {
-		attrs.push(b.jsx_attribute(b.jsx_id(class_attr_name), b.literal(hash)));
-		return;
+	/** @type {AST.TemplateElement[]} */
+	const quasis = [];
+	/** @type {AST.Expression[]} */
+	const expressions = [];
+	/** @type {string} */
+	let text = '';
+	for (const part of sequence) {
+		if (typeof part === 'string') {
+			if (part) text = text ? `${text} ${part}` : part;
+			continue;
+		}
+		const between = expressions.length > 0;
+		quasis.push(b.quasi(text ? (between ? ` ${text} ` : `${text} `) : between ? ' ' : '', false));
+		expressions.push(part);
+		text = '';
 	}
 
-	const value =
-		existing.value?.type === 'JSXExpressionContainer' ? existing.value.expression : existing.value;
-	if (!value || value.type === 'JSXEmptyExpression') {
-		existing.value = b.literal(hash, JSON.stringify(hash));
-		return;
+	if (expressions.length === 0) {
+		// Keep the authored literal's position so editor mappings survive.
+		return base_literal
+			? { ...base_literal, value: text, raw: JSON.stringify(text) }
+			: b.literal(text, JSON.stringify(text));
 	}
-
-	if (merge_hash_into_literal(value, hash)) return;
-
-	// Dynamic expression. Concatenate at runtime via template literal.
-	existing.value = b.jsx_expression_container(
-		b.template([b.quasi('', false), b.quasi(` ${hash}`, true)], [value]),
-	);
+	quasis.push(b.quasi(text ? ` ${text}` : '', true));
+	return b.template(quasis, expressions);
 }
 
 /**
- * @param {AST.TSRXJSXElement} element
- * @param {string} hash
- * @param {'class' | 'className'} jsx_class_attr_name
- * @returns {void}
+ * Stamp a scope's classes on an element, copy-on-write. The parts live on the
+ * element's (shared) metadata so an enclosing scope's stamp and a nested
+ * scope's stamp accumulate into one value: `authored hashes… applied…`, with
+ * every applied theme after every scope hash regardless of which scope
+ * applied it.
+ *
+ * @template {AST.TSRXJSXElement} T
+ * @param {T} element
+ * @param {string[]} hashes scope hashes to add
+ * @param {Array<string | AST.Expression>} applied theme classes: literals or `theme.$class` reads
+ * @param {'class' | 'className'} [class_attr_name='class']
+ * @returns {T}
  */
-function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
-	const attrs = (element.openingElement.attributes ??= []);
-	const existing = attrs.find(is_class_attribute);
-
-	if (!existing) {
-		attrs.push(
-			b.jsx_attribute(b.jsx_id(jsx_class_attr_name), b.literal(hash, JSON.stringify(hash))),
-		);
-		return;
+export function add_scope_classes(element, hashes, applied, class_attr_name = 'class') {
+	if (hashes.length === 0 && applied.length === 0) return element;
+	const attrs = element.openingElement.attributes ?? [];
+	const index = attrs.findIndex(is_class_attribute);
+	const existing = index === -1 ? undefined : /** @type {ESTreeJSX.JSXAttribute} */ (attrs[index]);
+	const metadata = element.metadata || (element.metadata = { path: [] });
+	const parts =
+		metadata.tsrx_scope_class ||
+		(metadata.tsrx_scope_class = {
+			base: class_attribute_base(existing),
+			hashes: [],
+			applied: [],
+		});
+	for (const hash of hashes) {
+		if (!parts.hashes.includes(hash)) parts.hashes.push(hash);
 	}
-
-	const value = existing.value;
-	if (!value) {
-		existing.value = b.literal(hash, JSON.stringify(hash));
-		return;
+	for (const part of applied) {
+		if (typeof part !== 'string' || !parts.applied.includes(part)) parts.applied.push(part);
 	}
 
-	if (merge_hash_into_literal(value, hash)) return;
-
-	const expression = value.type === 'JSXExpressionContainer' ? value.expression : value;
-	if (expression.type === 'JSXEmptyExpression') {
-		existing.value = b.literal(hash, JSON.stringify(hash));
-		return;
+	const value = build_scope_class_value(parts);
+	const attr_value =
+		value.type === 'Literal' && typeof value.value === 'string'
+			? value
+			: b.jsx_expression_container(value);
+	const next_attrs = attrs.slice();
+	if (existing) {
+		next_attrs[index] = { ...existing, value: attr_value };
+	} else {
+		next_attrs.push(b.jsx_attribute(b.jsx_id(class_attr_name), attr_value));
 	}
+	return {
+		...element,
+		openingElement: { ...element.openingElement, attributes: next_attrs },
+	};
+}
 
-	existing.value = b.jsx_expression_container(
-		b.template([b.quasi('', false), b.quasi(` ${hash}`, true)], [expression]),
-	);
+/**
+ * Ensure the element carries a class attribute containing the scoping hash,
+ * in place. Kept for consumers that stamp one hash at a time; the scope
+ * pre-pass uses {@link add_scope_classes}.
+ *
+ * @param {AST.TSRXJSXElement} element
+ * @param {string} hash
+ * @param {'class' | 'className'} [class_attr_name='class']
+ * @returns {void}
+ */
+export function add_hash_class(element, hash, class_attr_name = 'class') {
+	const stamped = add_scope_classes(element, [hash], [], class_attr_name);
+	element.openingElement = stamped.openingElement;
 }

package/src/transform/segments.js

@@ -158,10 +158,15 @@ function visit_source_ast(ast, src_line_offsets, { regions, css_element_info, sc
 				).loc;
 				const cssStart = loc_to_offset(openLoc.end.line, openLoc.end.column, src_line_offsets);
 
-				const closeLoc = /** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
-					node.closingElement
-				).loc;
-				const cssEnd = loc_to_offset(closeLoc.start.line, closeLoc.start.column, src_line_offsets);
+				const closeLoc =
+					/** @type {(ESTreeJSX.JSXClosingElement & AST.NodeWithLocation) | null} */ (
+						node.closingElement
+					)?.loc;
+				// An unclosed block recovered in loose mode has no closing tag; its
+				// body ends where the captured CSS ends.
+				const cssEnd = closeLoc
+					? loc_to_offset(closeLoc.start.line, closeLoc.start.column, src_line_offsets)
+					: cssStart + node.css.length;
 
 				regions.push({
 					start: cssStart,
@@ -659,6 +664,13 @@ export function convert_source_map_to_mappings(
 					if (node.metadata?.disable_verification) {
 						token.mappingData = { ...mapping_data, verification: false };
 					}
+					// A synthesized identifier that borrows an authored span so
+					// diagnostics land on it (e.g. the `$class` read of a type-only
+					// `apply` target): map for verification only, so hover and
+					// navigation on the authored token are not polluted by it.
+					if (node.metadata?.verify_only) {
+						token.mappingData = mapping_data_verify_only;
+					}
 					// A generated identifier whose source span sits inside a string
 					// literal (e.g. a server-module lowering's namespace reference
 					// carrying the authored `'server'` import specifier): serve

package/src/transform/style-ref.js

@@ -1,6 +1,6 @@
 /** @import * as AST from 'estree' */
 /** @import * as ESTreeJSX from 'estree-jsx' */
-/** @import { ClassMapCollectionState, StyleRefOptions, TopScopedClasses, Visitors } from '../../types/index' */
+/** @import { ClassMapCollectionState, StyleClassMapOptions, StyleRefOptions, TopScopedClasses, Visitors } from '../../types/index' */
 
 import { walk } from 'zimmerframe';
 import * as b from '../utils/builders.js';
@@ -14,40 +14,101 @@ import { clone_ast_node, clone_identifier } from './jsx/ast-builders.js';
 const regex_backslash_and_following_character = /\\(.)/g;
 
 /**
- * @param {AST.Node} component
- * @param {AST.CSS.StyleSheet} css
+ * @param {AST.Node} component the node whose metadata carries the scope's `topScopedClasses`
+ * @param {AST.CSS.StyleSheet | null} css
+ * @param {StyleClassMapOptions} [options]
  * @returns {AST.ObjectExpression}
  */
-export function create_style_class_map(component, css) {
+export function create_style_class_map(component, css, options = {}) {
 	return build_style_class_map(
-		component.metadata?.topScopedClasses ?? collect_style_class_map_entries(css),
-		css.hash,
+		component.metadata?.topScopedClasses ??
+			(css ? collect_style_class_map_entries(css) : new Map()),
+		options.hash ?? css?.hash ?? null,
+		options,
 	);
 }
 
 /**
  * @param {AST.CSS.StyleSheet} css
+ * @param {StyleClassMapOptions} [options]
  * @returns {AST.ObjectExpression}
  */
-export function create_style_class_map_from_stylesheet(css) {
-	return build_style_class_map(collect_style_class_map_entries(css), css.hash);
+export function create_style_class_map_from_stylesheet(css, options = {}) {
+	return build_style_class_map(collect_style_class_map_entries(css), css.hash, options);
 }
 
 /**
- * `{ foo: 'hash foo', … }` for every class the style expression exposes.
+ * `{ $class: '<applied…> <hash>', foo: 'hash foo', … }` for every class the
+ * style expression exposes. `$class` comes first and is the block's own scope
+ * hash preceded by the `$class` of every applied theme (D6): adjacent static
+ * parts fold into one literal, runtime parts join with `+`.
  *
  * @param {TopScopedClasses} top_scoped_classes
  * @param {string | null} hash
+ * @param {StyleClassMapOptions} [options]
  * @returns {AST.ObjectExpression}
  */
-function build_style_class_map(top_scoped_classes, hash) {
+export function build_style_class_map(top_scoped_classes, hash, options = {}) {
 	const class_names = [...top_scoped_classes.keys()].sort();
+	/** @type {Array<string | AST.Expression>} */
+	const parts = [...(options.applied ?? [])];
+	if (hash) parts.push(hash);
 
-	return b.object(
-		class_names.map((class_name) =>
+	return b.object([
+		b.prop('init', b.literal('$class'), build_class_expression(parts)),
+		...class_names.map((class_name) =>
 			b.prop('init', b.literal(class_name), b.literal(hash ? `${hash} ${class_name}` : class_name)),
 		),
-	);
+	]);
+}
+
+/**
+ * Join class parts into one expression: a literal when every part is
+ * static, else a `+` chain with static runs folded together.
+ *
+ * @param {Array<string | AST.Expression>} parts
+ * @returns {AST.Expression}
+ */
+function build_class_expression(parts) {
+	/** @type {AST.Expression | null} */
+	let result = null;
+	let pending = '';
+	/** @type {Set<string>} */
+	const seen = new Set();
+	/** @param {AST.Expression} expression */
+	const append = (expression) => {
+		result = result ? b.binary('+', result, expression) : expression;
+	};
+	for (const part of parts) {
+		if (typeof part === 'string') {
+			// Statically known hashes appear once even when applied through
+			// several themes (D12, static dedupe).
+			if (seen.has(part)) continue;
+			seen.add(part);
+			pending = pending ? `${pending} ${part}` : part;
+			continue;
+		}
+		if (result) {
+			append(b.literal(pending ? ` ${pending} ` : ' '));
+		} else if (pending) {
+			append(b.literal(`${pending} `));
+		}
+		pending = '';
+		append(clone_ast_node(part, false));
+	}
+	if (!result) return b.literal(pending);
+	if (pending) append(b.literal(` ${pending}`));
+	return result;
+}
+
+/**
+ * The class names an assigned block's class map exposes, in source order.
+ *
+ * @param {AST.CSS.StyleSheet} css
+ * @returns {string[]}
+ */
+export function get_style_class_map_names(css) {
+	return [...collect_style_class_map_entries(css).keys()];
 }
 
 /**

package/src/transform/stylesheet.js

@@ -543,6 +543,7 @@ export function render_css_result(stylesheets, minify = false) {
 	}
 	return {
 		css: render_stylesheets(stylesheets, minify),
-		cssHash: stylesheets.map((s) => s.hash).join(' '),
+		// One hash per scope: every sheet of a scope carries the scope's hash.
+		cssHash: [...new Set(stylesheets.map((s) => s.hash))].join(' '),
 	};
 }

package/src/utils/is-reference.js

@@ -0,0 +1,59 @@
+/**
+ * Whether an identifier (or a non-computed member chain rooted at one) is a
+ * reference to a binding rather than a property name, label, or specifier
+ * alias. Inlined from `is-reference@3.0.3` (MIT, Rich Harris,
+ * https://github.com/Rich-Harris/is-reference) so consumers that bundle the
+ * analyzer need no extra license notice for a 40-line helper.
+ *
+ * @import * as AST from 'estree'
+ */
+
+/**
+ * @param {AST.Node} node
+ * @param {AST.Node | null | undefined} parent
+ * @returns {boolean}
+ */
+export function is_reference(node, parent) {
+	if (node.type === 'MemberExpression') {
+		return !node.computed && is_reference(node.object, node);
+	}
+
+	if (node.type !== 'Identifier') return false;
+
+	switch (parent?.type) {
+		// disregard `bar` in `foo.bar`
+		case 'MemberExpression':
+			return parent.computed || node === parent.object;
+
+		// disregard the `foo` in `class {foo(){}}` but keep it in `class {[foo](){}}`
+		case 'MethodDefinition':
+			return parent.computed;
+
+		// disregard the `meta` in `import.meta`
+		case 'MetaProperty':
+			return parent.meta === node;
+
+		// disregard the `foo` in `class {foo=bar}` but keep it in `class {[foo]=bar}` and `class {bar=foo}`
+		case 'PropertyDefinition':
+			return parent.computed || node === parent.value;
+
+		// disregard the `bar` in `{ bar: foo }`, but keep it in `{ [bar]: foo }`
+		case 'Property':
+			return parent.computed || node === parent.value;
+
+		// disregard the `bar` in `export { foo as bar }` or
+		// the foo in `import { foo as bar }`
+		case 'ExportSpecifier':
+		case 'ImportSpecifier':
+			return node === parent.local;
+
+		// disregard the `foo` in `foo: while (...) { ... break foo; ... continue foo;}`
+		case 'LabeledStatement':
+		case 'BreakStatement':
+		case 'ContinueStatement':
+			return false;
+
+		default:
+			return true;
+	}
+}

package/tests/fixtures/scoped-styles/README.md

@@ -0,0 +1,71 @@
+# Scoped style conformance fixtures
+
+Target-neutral fixtures for sibling-scoped `<style>` blocks, `$class`, and `apply`
+([RFC tsrx-org/RFCs#1](https://github.com/tsrx-org/RFCs/discussions/1)). Each
+`<name>.tsrx` compiles as one module (imports are never resolved) and its sibling
+`<name>.expected.json` states what the output must contain. A subdirectory groups
+the modules of a multi-file example; every `.tsrx` inside is still compiled on its
+own.
+
+The TSRX runner lives in
+`packages/tsrx/tests/shared/scoped-styles-conformance.js`. Other compilers vendor
+this directory and implement the same checks.
+
+## Labels
+
+Hashes are position-derived and never appear in the JSON. Every scope and every
+assigned block is named by a **label**, and the label resolves to a hash by
+reading the marker selector `.<label>.<hash>` back from the compiled CSS.
+
+Fixture conventions that make this work:
+
+- Every `<style>` block with a body **starts with its label's marker rule**,
+  `.<label> { --label: <label>; }`. Blocks that share a scope repeat the scope's
+  label, so the sequence of marker rules in the CSS is the sheet emission order.
+- A standalone block's marker must match an element, or it is pruned and has no
+  hash: put the label in the class list of some element the scope reaches
+  (`<div class="e1 scopeA">`). Assigned blocks keep their class selectors, so they
+  need no element.
+- An assigned block's label is its variable name.
+- A label of the form `import:<expr>` is not resolved; it stands for the runtime
+  read `<expr>.$class` of a block the compiler cannot see (an import, or any block
+  whose `$class` is not fully static).
+
+## `expected.json`
+
+```json
+{
+  "elements": {
+    "e1 scopeA": ["scopeA", "import:theme"],
+    "{theme.dark}": ["scopeA"]
+  },
+  "cssOrder": ["theme", "scopeA", "scopeA", "scopeB"],
+  "pruned": ["p", "div"],
+  "classMaps": { "theme": ["base", "theme"], "bundle": ["import:a", "import:b"] },
+  "knownFailure": "optional: why the compiler currently disagrees"
+}
+```
+
+- **`elements`** — authored `class` value → labels the element must carry, in
+  order: enclosing scope hashes outer → inner, then applied themes. Static labels
+  are appended to the authored literal (`class="e1 scopeA <hashA>"`). A runtime
+  label makes it a template literal (``class={`e1 <hashA> ${theme.$class}`}``). A
+  key wrapped in braces is an expression-valued authored class and matches
+  ``class={`${theme.dark} <hashA>`}`` (or the untouched `class={theme.dark}` when
+  the chain is empty). Both `class=` and `className=` are accepted.
+- **`cssOrder`** — labels of the marker rules in emission order: a scope's sheets
+  contiguous in source order, nested scopes after their parent, siblings in source
+  order, assigned blocks at their declaration position. `cssHash` must equal the
+  distinct hashes of this list, in order.
+- **`pruned`** — selector texts expected inside `/* (unused) … */` comments, in
+  order. Standalone blocks prune selectors that match nothing in their reach;
+  assigned blocks that are neither exported nor applied prune every non-class
+  selector; exported or applied blocks prune nothing.
+- **`classMaps`** — assigned-block variable → `$class` composition: applied
+  blocks' compositions first (transitively), the block's own label last. `own` may
+  stand for the variable's label. Adjacent static hashes share one string literal
+  and runtime labels are concatenated (`'<a> ' + x.$class + ' <own>'`). When the
+  composition includes the block's own label, the map must also carry
+  `'<label>': '<own hash> <label>'`.
+- **`knownFailure`** — when present, the fixture documents a discrepancy between
+  the RFC and the compiler and is expected to fail until it is fixed.

package/tests/fixtures/scoped-styles/apply-forms.expected.json

@@ -0,0 +1,18 @@
+{
+  "elements": {
+    "a1": ["one"],
+    "a2": ["one"],
+    "a3": ["one"],
+    "b1": ["one", "two"],
+    "c1 withBody": ["withBody", "one"],
+    "c2": ["withBody", "one"],
+    "d1": ["one", "two"]
+  },
+  "cssOrder": ["one", "two", "withBody", "withBody"],
+  "pruned": [],
+  "classMaps": {
+    "one": ["one"],
+    "two": ["two"],
+    "both": ["one", "two"]
+  }
+}

package/tests/fixtures/scoped-styles/apply-forms.tsrx

@@ -0,0 +1,69 @@
+// Every `apply` shape: self-closed, array, with a body, two blocks in one
+// scope, and a body-less assigned bundle.
+const one = <style>
+	.one {
+		--label: one;
+	}
+	div {
+		color: red;
+	}
+</style>;
+
+const two = <style>
+	.two {
+		--label: two;
+	}
+	div {
+		color: blue;
+	}
+</style>;
+
+export const both = <style apply={[one, two]} />;
+
+export function SelfClosed() @{
+	<>
+		<style apply={one} />
+		<div class="a1">{'a'}</div>
+		<p class="a2">
+			<span class="a3">{'c'}</span>
+		</p>
+	</>
+}
+
+export function ArrayForm() @{
+	<>
+		<style apply={[one, two]} />
+		<div class="b1">{'b'}</div>
+	</>
+}
+
+export function WithBody() @{
+	<>
+		<style apply={one}>
+			.withBody {
+				--label: withBody;
+			}
+			div {
+				color: black;
+			}
+		</style>
+		<style>
+			.withBody {
+				--label: withBody;
+			}
+			p {
+				margin: 0;
+			}
+		</style>
+		<div class="c1 withBody">{'c'}</div>
+		<p class="c2">{'p'}</p>
+	</>
+}
+
+export function TwoApplies() @{
+	<>
+		<style apply={one} />
+		<style apply={two} />
+		<div class="d1">{'d'}</div>
+	</>
+}