@tsrx/core 0.1.65 → 0.1.66

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

@@ -0,0 +1,44 @@
+// A block styles the items beside it and everything below them; it never
+// styles the element that contains it. The fragment's children list, the
+// section's children list, and each branch's fragment are scopes of their
+// own, and the `.status` rule of the section's scope is pruned because
+// <section> is not a child of that list.
+export function Status({ ready }: { ready: boolean }) @{
+	<>
+		<style>
+			.status {
+				--label: status;
+			}
+		</style>
+		<section class="status">
+			<style>
+				.title {
+					--label: title;
+				}
+				.status {
+					margin: 0;
+				}
+			</style>
+			<h2 class="title">{'Status'}</h2>
+			@if (ready) {
+				<>
+					<style>
+						.ok {
+							--label: ok;
+						}
+					</style>
+					<p class="ok">{'Ready'}</p>
+				</>
+			} @else {
+				<>
+					<style>
+						.wait {
+							--label: wait;
+						}
+					</style>
+					<p class="wait">{'Waiting'}</p>
+				</>
+			}
+		</section>
+	</>
+}

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

@@ -0,0 +1,12 @@
+{
+  "elements": {
+    "s0 outer": ["outer"],
+    "s1 first": ["outer", "first"],
+    "s2 second": ["outer", "second"],
+    "s2a deep": ["outer", "second", "deep"],
+    "s3 third": ["outer", "third"]
+  },
+  "cssOrder": ["outer", "first", "second", "deep", "third"],
+  "pruned": [],
+  "classMaps": {}
+}

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

@@ -0,0 +1,51 @@
+// Sibling scopes emit in source order, each after its parent and before the
+// next sibling; the outer block sits last in source and still emits first.
+export function Siblings() @{
+	<>
+		@{
+			<>
+				<style>
+					.first {
+						--label: first;
+					}
+				</style>
+				<div class="s1 first">{'1'}</div>
+			</>
+		}
+		@{
+			<>
+				<style>
+					.second {
+						--label: second;
+					}
+				</style>
+				<div class="s2 second">@{
+					<>
+						<style>
+							.deep {
+								--label: deep;
+							}
+						</style>
+						<span class="s2a deep">{'2a'}</span>
+					</>
+				}</div>
+			</>
+		}
+		@{
+			<>
+				<style>
+					.third {
+						--label: third;
+					}
+				</style>
+				<div class="s3 third">{'3'}</div>
+			</>
+		}
+		<style>
+			.outer {
+				--label: outer;
+			}
+		</style>
+		<div class="s0 outer">{'0'}</div>
+	</>
+}

package/tests/fixtures/scoped-styles/theme-composition.expected.json

@@ -0,0 +1,14 @@
+{
+  "elements": {
+    "c1": ["base", "accent", "theme"]
+  },
+  "cssOrder": ["base", "accent", "theme", "plain"],
+  "pruned": [],
+  "classMaps": {
+    "base": ["base"],
+    "accent": ["base", "accent"],
+    "theme": ["base", "accent", "theme"],
+    "plain": ["plain"],
+    "bundle": ["plain", "base", "accent", "theme"]
+  }
+}

package/tests/fixtures/scoped-styles/theme-composition.tsrx

@@ -0,0 +1,45 @@
+// Same-module composition chain: every hash is known statically and inlined.
+const base = <style>
+	.base {
+		--label: base;
+	}
+	div {
+		font-family: system-ui;
+	}
+</style>;
+
+const accent = <style apply={base}>
+	.accent {
+		--label: accent;
+	}
+	div {
+		color: blue;
+	}
+</style>;
+
+export const theme = <style apply={accent}>
+	.theme {
+		--label: theme;
+	}
+	div {
+		color: green;
+	}
+</style>;
+
+const plain = <style>
+	.plain {
+		--label: plain;
+	}
+	p {
+		margin: 0;
+	}
+</style>;
+
+export const bundle = <style apply={[plain, theme]} />;
+
+export function Composed() @{
+	<>
+		<style apply={theme} />
+		<div class="c1">{'composed'}</div>
+	</>
+}

package/tests/fixtures/scoped-styles/theme-diamond.expected.json

@@ -0,0 +1,10 @@
+{
+  "elements": {},
+  "cssOrder": ["base", "accent", "pair"],
+  "pruned": [],
+  "classMaps": {
+    "base": ["base"],
+    "accent": ["base", "accent"],
+    "pair": ["base", "accent", "pair"]
+  }
+}

package/tests/fixtures/scoped-styles/theme-diamond.tsrx

@@ -0,0 +1,18 @@
+// A diamond: `pair` applies `base` directly and again through `accent`.
+const base = <style>
+	.base {
+		--label: base;
+	}
+</style>;
+
+const accent = <style apply={base}>
+	.accent {
+		--label: accent;
+	}
+</style>;
+
+export const pair = <style apply={[base, accent]}>
+	.pair {
+		--label: pair;
+	}
+</style>;

package/tests/shared/scoped-styles-fixtures.js

@@ -0,0 +1,67 @@
+/**
+ * Loader for the scoped-style conformance fixtures (RFC tsrx-org/RFCs#1) so
+ * consumer compilers run them straight from `@tsrx/core` instead of vendoring
+ * copies: `import { load_scoped_styles_fixtures } from
+ * '@tsrx/core/test-harness/scoped-styles-fixtures'`. The parser spec table is
+ * exposed beside it as `@tsrx/core/test-harness/style-syntax`.
+ *
+ * See `../fixtures/scoped-styles/README.md` for the expectation schema.
+ */
+
+import { readdirSync, readFileSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const SCOPED_STYLES_FIXTURES_DIR = join(
+	dirname(fileURLToPath(import.meta.url)),
+	'../fixtures/scoped-styles',
+);
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   path: string,
+ *   source: string,
+ *   expected: {
+ *     elements: Record<string, string[]>,
+ *     cssOrder: string[],
+ *     pruned: string[],
+ *     classMaps: Record<string, string[]>,
+ *     knownFailure?: string,
+ *   },
+ * }} ScopedStylesFixture
+ */
+
+/**
+ * Every `<name>.tsrx` under the fixture directory (recursively) with its
+ * sibling `<name>.expected.json`, sorted by relative path.
+ *
+ * @param {string} [dir]
+ * @returns {ScopedStylesFixture[]}
+ */
+export function load_scoped_styles_fixtures(dir = SCOPED_STYLES_FIXTURES_DIR) {
+	/** @type {ScopedStylesFixture[]} */
+	const fixtures = [];
+	/** @param {string} directory */
+	const visit = (directory) => {
+		for (const entry of readdirSync(directory, { withFileTypes: true }).sort((a, b) =>
+			a.name.localeCompare(b.name),
+		)) {
+			const path = join(directory, entry.name);
+			if (entry.isDirectory()) {
+				visit(path);
+				continue;
+			}
+			if (!entry.name.endsWith('.tsrx')) continue;
+			const expected_path = path.replace(/\.tsrx$/, '.expected.json');
+			fixtures.push({
+				name: relative(dir, path).replace(/\.tsrx$/, ''),
+				path,
+				source: readFileSync(path, 'utf8'),
+				expected: JSON.parse(readFileSync(expected_path, 'utf8')),
+			});
+		}
+	};
+	visit(dir);
+	return fixtures;
+}