@tsrx/core 0.1.64 → 0.1.66

package/tests/fixtures/scoped-styles/assigned-positions.expected.json

@@ -0,0 +1,29 @@
+{
+  "elements": {
+    "{local.local}": [],
+    "{inBody.inBody}": [],
+    "{inNested.inNested}": [],
+    "{helper().inFunction}": []
+  },
+  "cssOrder": [
+    "exported",
+    "local",
+    "reexported",
+    "renamed",
+    "inFunction",
+    "inBody",
+    "inBlock",
+    "inNested"
+  ],
+  "pruned": ["em", "i", "b", "u", "s"],
+  "classMaps": {
+    "exported": ["exported"],
+    "local": ["local"],
+    "reexported": ["reexported"],
+    "renamed": ["renamed"],
+    "inFunction": ["inFunction"],
+    "inBody": ["inBody"],
+    "inBlock": ["inBlock"],
+    "inNested": ["inNested"]
+  }
+}

package/tests/fixtures/scoped-styles/assigned-positions.tsrx

@@ -0,0 +1,90 @@
+// Assigned blocks in every declaration position. Exported (directly or via
+// an export list) blocks keep every selector; local unapplied ones keep only
+// their class selectors.
+export const exported = <style>
+	.exported {
+		--label: exported;
+	}
+	div {
+		color: red;
+	}
+</style>;
+
+const local = <style>
+	.local {
+		--label: local;
+	}
+	em {
+		color: red;
+	}
+</style>;
+
+const reexported = <style>
+	.reexported {
+		--label: reexported;
+	}
+	span {
+		color: red;
+	}
+</style>;
+export { reexported };
+
+const renamed = <style>
+	.renamed {
+		--label: renamed;
+	}
+	strong {
+		color: red;
+	}
+</style>;
+export { renamed as alias };
+
+function helper() {
+	const inFunction = <style>
+		.inFunction {
+			--label: inFunction;
+		}
+		i {
+			color: red;
+		}
+	</style>;
+	return inFunction;
+}
+
+export function Positions() @{
+	const inBody = <style>
+		.inBody {
+			--label: inBody;
+		}
+		b {
+			color: red;
+		}
+	</style>;
+	{
+		const inBlock = <style>
+			.inBlock {
+				--label: inBlock;
+			}
+			u {
+				color: red;
+			}
+		</style>;
+		console.log(inBlock);
+	}
+	<>
+		<div class={local.local}>{'local'}</div>
+		<div class={inBody.inBody}>{'body'}</div>
+		@{
+			const inNested = <style>
+				.inNested {
+					--label: inNested;
+				}
+				s {
+					color: red;
+				}
+			</style>;
+			<div class={inNested.inNested}>{'nested'}</div>
+		}
+		<div class={helper().inFunction}>{'function'}</div>
+	</>
+}

package/tests/fixtures/scoped-styles/class-opt-in.expected.json

@@ -0,0 +1,13 @@
+{
+  "elements": {
+    "l1 local": ["local"],
+    "{`local ${parentClass}`}": ["local"],
+    "{theme.$class}": [],
+    "{theme.card}": []
+  },
+  "cssOrder": ["local", "theme"],
+  "pruned": [],
+  "classMaps": {
+    "theme": ["theme"]
+  }
+}

package/tests/fixtures/scoped-styles/class-opt-in.tsrx

@@ -0,0 +1,39 @@
+// Reading `theme.$class` opts single elements into a theme — every selector
+// kept, like an applied block — without `apply` stamping the whole scope; a
+// child component receives it through a prop and stamps it before its own
+// scope hash. Elements that do not read it stay untouched.
+function Card({ parentClass }: { parentClass: string }) @{
+	<>
+		<style>
+			.local {
+				--label: local;
+			}
+			article {
+				padding: 0;
+			}
+		</style>
+		<article class={`local ${parentClass}`}>
+			<h2 class="l1 local">{'title'}</h2>
+		</article>
+	</>
+}
+
+export function ClassOptIn() @{
+	const theme = <style>
+		.theme {
+			--label: theme;
+		}
+		div {
+			color: blue;
+		}
+		.card {
+			color: red;
+		}
+	</style>;
+	<>
+		<Card parentClass={theme.$class} />
+		<div class={theme.$class}>{'opted in'}</div>
+		<div class={theme.card}>{'card'}</div>
+		<p>{'untouched'}</p>
+	</>
+}

package/tests/fixtures/scoped-styles/control-flow-else-if.expected.json

@@ -0,0 +1,11 @@
+{
+  "elements": {
+    "e0 root": ["root"],
+    "e1": ["root"],
+    "e2 elif": ["root", "elif"],
+    "e3": ["root"]
+  },
+  "cssOrder": ["root", "elif"],
+  "pruned": [],
+  "classMaps": {}
+}

package/tests/fixtures/scoped-styles/control-flow-else-if.tsrx

@@ -0,0 +1,26 @@
+// An `@else if` body renders one output node like any other branch; a
+// fragment there holds its own block and scope.
+export function ElseIf({ a, b }: { a: boolean; b: boolean }) @{
+	<>
+		<style>
+			.root {
+				--label: root;
+			}
+		</style>
+		<div class="e0 root">{'root'}</div>
+		@if (a) {
+			<b class="e1">{'a'}</b>
+		} @else if (b) {
+			<>
+				<style>
+					.elif {
+						--label: elif;
+					}
+				</style>
+				<b class="e2 elif">{'b'}</b>
+			</>
+		} @else {
+			<b class="e3">{'neither'}</b>
+		}
+	</>
+}

package/tests/fixtures/scoped-styles/control-flow.expected.json

@@ -0,0 +1,17 @@
+{
+  "elements": {
+    "e0 root": ["root"],
+    "e1 yes": ["root", "yes"],
+    "e2 no": ["root", "no"],
+    "e3 item": ["root", "item"],
+    "e4 empty": ["root", "empty"],
+    "e5 one": ["root", "one"],
+    "e6": ["root"],
+    "e7 other": ["root", "other"],
+    "e8 ok": ["root", "ok"],
+    "e9 err": ["root", "err"]
+  },
+  "cssOrder": ["root", "yes", "no", "item", "empty", "one", "other", "ok", "err"],
+  "pruned": [],
+  "classMaps": {}
+}

package/tests/fixtures/scoped-styles/control-flow.tsrx

@@ -0,0 +1,102 @@
+// Every directive branch renders one output node; a fragment there is a
+// children list of its own, so its block is a scope whose CSS ships regardless.
+export function ControlFlow({
+	ready,
+	items,
+	kind,
+}: {
+	ready: boolean;
+	items: string[];
+	kind: number;
+}) @{
+	<>
+		<style>
+			.root {
+				--label: root;
+			}
+		</style>
+		<div class="e0 root">{'root'}</div>
+		@if (ready) {
+			<>
+				<style>
+					.yes {
+						--label: yes;
+					}
+				</style>
+				<p class="e1 yes">{'yes'}</p>
+			</>
+		} @else {
+			<>
+				<style>
+					.no {
+						--label: no;
+					}
+				</style>
+				<p class="e2 no">{'no'}</p>
+			</>
+		}
+		@for (const item of items) {
+			<>
+				<style>
+					.item {
+						--label: item;
+					}
+				</style>
+				<li class="e3 item">{item}</li>
+			</>
+		} @empty {
+			<>
+				<style>
+					.empty {
+						--label: empty;
+					}
+				</style>
+				<li class="e4 empty">{'none'}</li>
+			</>
+		}
+		@switch (kind) {
+			@case 1: {
+				<>
+					<style>
+						.one {
+							--label: one;
+						}
+					</style>
+					<b class="e5 one">{'one'}</b>
+				</>
+			}
+			@case 2: {
+				<b class="e6">{'two'}</b>
+			}
+			@default: {
+				<>
+					<style>
+						.other {
+							--label: other;
+						}
+					</style>
+					<i class="e7 other">{'other'}</i>
+				</>
+			}
+		}
+		@try {
+			<>
+				<style>
+					.ok {
+						--label: ok;
+					}
+				</style>
+				<em class="e8 ok">{'ok'}</em>
+			</>
+		} @catch (error) {
+			<>
+				<style>
+					.err {
+						--label: err;
+					}
+				</style>
+				<s class="e9 err">{'err'}</s>
+			</>
+		}
+	</>
+}

package/tests/fixtures/scoped-styles/cross-module-apply.expected.json

@@ -0,0 +1,14 @@
+{
+  "elements": {
+    "x1 scope": ["scope", "import:theme", "import:themes.dark"],
+    "{active ? 'on' : 'off'}": ["scope", "import:theme", "import:themes.dark"],
+    "x2 nested": ["scope", "nested", "import:theme", "import:themes.dark"]
+  },
+  "cssOrder": ["localBase", "mixed", "scope", "nested"],
+  "pruned": [],
+  "classMaps": {
+    "localBase": ["localBase"],
+    "mixed": ["localBase", "import:theme", "mixed"],
+    "bundle": ["import:theme", "import:themes.dark"]
+  }
+}

package/tests/fixtures/scoped-styles/cross-module-apply.tsrx

@@ -0,0 +1,48 @@
+// Imported themes stay runtime `$class` reads, after every static hash.
+import { theme } from './theme.tsrx';
+import * as themes from './themes.tsrx';
+
+const localBase = <style>
+	.localBase {
+		--label: localBase;
+	}
+	div {
+		color: red;
+	}
+</style>;
+
+export const mixed = <style apply={[localBase, theme]}>
+	.mixed {
+		--label: mixed;
+	}
+	div {
+		color: blue;
+	}
+</style>;
+
+export const bundle = <style apply={[theme, themes.dark]} />;
+
+export function CrossModule({ active }: { active: boolean }) @{
+	<>
+		<style apply={[theme, themes.dark]} />
+		<style>
+			.scope {
+				--label: scope;
+			}
+			div {
+				color: black;
+			}
+		</style>
+		<div class="x1 scope">{'x'}</div>
+		<p class={active ? 'on' : 'off'}>@{
+			<>
+				<style>
+					.nested {
+						--label: nested;
+					}
+				</style>
+				<b class="x2 nested">{'n'}</b>
+			</>
+		}</p>
+	</>
+}

package/tests/fixtures/scoped-styles/element-rooted-templates.expected.json

@@ -0,0 +1,12 @@
+{
+  "elements": {
+    "card-root": [],
+    "card-text card": ["card"],
+    "chip-root": [],
+    "chip-text chip": ["chip"],
+    "outside": []
+  },
+  "cssOrder": ["card", "chip"],
+  "pruned": ["div"],
+  "classMaps": {}
+}

package/tests/fixtures/scoped-styles/element-rooted-templates.tsrx

@@ -0,0 +1,33 @@
+// RFC problem 4: an element assigned to a variable inside a `@{ … }` body keeps
+// its block. The block sits in the element's children list, so it styles the
+// children and never the element that contains it. (Outside a `@{ … }` or
+// control-flow body a bodied standalone block is an error.)
+export function Templates() @{
+	const card = <div class="card-root">
+		<style>
+			.card {
+				--label: card;
+			}
+			div {
+				margin: 0;
+			}
+		</style>
+		<p class="card-text card">{'card'}</p>
+	</div>;
+	const chip = <span class="chip-root">
+		<style>
+			.chip {
+				--label: chip;
+			}
+			b {
+				font-weight: bold;
+			}
+		</style>
+		<b class="chip-text chip">{'chip'}</b>
+	</span>;
+	<>
+		{card}
+		{chip}
+		<p class="outside">{'outside'}</p>
+	</>
+}

package/tests/fixtures/scoped-styles/precedence.expected.json

@@ -0,0 +1,11 @@
+{
+  "elements": {
+    "o1 outer": ["outer", "theme"],
+    "i1 inner": ["outer", "inner", "theme"]
+  },
+  "cssOrder": ["theme", "outer", "outer", "inner"],
+  "pruned": [],
+  "classMaps": {
+    "theme": ["theme"]
+  }
+}

package/tests/fixtures/scoped-styles/precedence.tsrx

@@ -0,0 +1,45 @@
+// Ordering: applied theme, then the outer scope's blocks as one contiguous
+// group (even though one sits after the nested scope), then the inner scope.
+const theme = <style>
+	.theme {
+		--label: theme;
+	}
+	div {
+		color: green;
+	}
+</style>;
+
+export function Precedence() @{
+	<>
+		<style apply={theme}>
+			.outer {
+				--label: outer;
+			}
+			div {
+				color: black;
+			}
+		</style>
+		<div class="o1 outer">{'outer'}</div>
+		@{
+			<>
+				<style>
+					.inner {
+						--label: inner;
+					}
+					div {
+						color: blue;
+					}
+				</style>
+				<div class="i1 inner">{'inner'}</div>
+			</>
+		}
+		<style>
+			.outer {
+				--label: outer;
+			}
+			div {
+				font-style: italic;
+			}
+		</style>
+	</>
+}

package/tests/fixtures/scoped-styles/rfc-opening-example/panel.expected.json

@@ -0,0 +1,12 @@
+{
+  "elements": {
+    "{theme.dark}": ["scopeA", "import:theme"],
+    "d1 scopeA": ["scopeA", "import:theme"],
+    "p1": ["scopeA", "import:theme"],
+    "d2 scopeB": ["scopeA", "scopeB", "import:theme"],
+    "p2": ["scopeA", "scopeB", "import:theme"]
+  },
+  "cssOrder": ["scopeA", "scopeA", "scopeB"],
+  "pruned": [],
+  "classMaps": {}
+}

package/tests/fixtures/scoped-styles/rfc-opening-example/panel.tsrx

@@ -0,0 +1,46 @@
+// panel.tsrx — the component module of the RFC's opening example.
+import { theme } from './theme.tsrx';
+
+export function Panel() @{
+	<>
+		<style apply={theme}>
+			/* scope A; also attaches theme.$class to the scope */
+			.scopeA {
+				--label: scopeA;
+			}
+			div {
+				color: black;
+			}
+		</style>
+
+		<span class={theme.dark}>Purple</span>
+		<div class="d1 scopeA">Black system-ui: the local rule beats the theme's green</div>
+
+		<style>
+			/* still scope A, so the same hash */
+			.scopeA {
+				--label: scopeA;
+			}
+			p {
+				margin: 0;
+			}
+		</style>
+		<p class="p1">No margin</p>
+
+		@{
+			<>
+				<style>
+					/* scope B, nested inside A */
+					.scopeB {
+						--label: scopeB;
+					}
+					div {
+						font-weight: bold;
+					}
+				</style>
+				<div class="d2 scopeB">Black and bold: A and B both reach here</div>
+				<p class="p2">No margin: A reaches here too</p>
+			</>
+		}
+	</>
+}

package/tests/fixtures/scoped-styles/rfc-opening-example/theme.expected.json

@@ -0,0 +1,9 @@
+{
+  "elements": {},
+  "cssOrder": ["base", "theme"],
+  "pruned": [],
+  "classMaps": {
+    "base": ["base"],
+    "theme": ["base", "theme"]
+  }
+}

package/tests/fixtures/scoped-styles/rfc-opening-example/theme.tsrx

@@ -0,0 +1,24 @@
+// theme.tsrx — the theme module of the RFC's opening example.
+export const base = <style>
+	.base {
+		--label: base;
+	}
+	div {
+		font-family: system-ui;
+	}
+	.muted {
+		color: gray;
+	}
+</style>;
+
+export const theme = <style apply={base}>
+	.theme {
+		--label: theme;
+	}
+	div {
+		color: green;
+	}
+	.dark {
+		color: purple;
+	}
+</style>;

package/tests/fixtures/scoped-styles/search-panel.expected.json

@@ -0,0 +1,11 @@
+{
+  "elements": {
+    "filters panel": ["panel"],
+    "filter": ["panel"],
+    "list results": ["panel", "results"],
+    "result": ["panel", "results"]
+  },
+  "cssOrder": ["panel", "results"],
+  "pruned": [],
+  "classMaps": {}
+}

package/tests/fixtures/scoped-styles/search-panel.tsrx

@@ -0,0 +1,48 @@
+// The RFC's SearchPanel: a nested scope with setup code owns its own block.
+export function SearchPanel({
+	filters,
+	results,
+}: {
+	filters: Array<{ label: string }>;
+	results: Array<{ title: string }>;
+}) @{
+	<>
+		<style>
+			.panel {
+				--label: panel;
+			}
+			/* reaches both lists: this scope and the nested one */
+			li {
+				list-style: none;
+				padding: 0.25rem 0.5rem;
+			}
+		</style>
+
+		<ul class="filters panel">
+			@for (const f of filters) {
+				<li class="filter">{f.label}</li>
+			}
+		</ul>
+
+		@{
+			const top = results.slice(0, 10);
+			<>
+				<style>
+					.results {
+						--label: results;
+					}
+					/* reaches only this scope's list, and wins here */
+					li {
+						padding: 0.75rem 0;
+						border-bottom: 1px solid gray;
+					}
+				</style>
+				<ul class="list results">
+					@for (const r of top) {
+						<li class="result">{r.title}</li>
+					}
+				</ul>
+			</>
+		}
+	</>
+}

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

@@ -0,0 +1,11 @@
+{
+  "elements": {
+    "status": ["status"],
+    "title": ["status", "title"],
+    "ok": ["status", "title", "ok"],
+    "wait": ["status", "title", "wait"]
+  },
+  "cssOrder": ["status", "title", "ok", "wait"],
+  "pruned": [".status"],
+  "classMaps": {}
+}