feat: add zyzz/compiler/wasm for browser and worker graph compilation

[jxom]

Browsers and Cloudflare Workers could not compile source graphs. The package inlines only the CSS build of crates/wasm, and zyzz/compiler imports the native addon and Lightning CSS. The docs playground built the compiler feature separately.

pnpm build now writes that build to binding/compiler.wasm, published as zyzz/compiler.wasm. Graph.create from zyzz/compiler/wasm instantiates it from a compiled module or bytes, and its compile takes the web options of Graph.compile and returns the same output. Failures throw Graph.CompileError with the native error's name, message, and diagnostics. The entry imports no Node built-ins, and the docs playground compiles through it. The module is 5.4 MiB raw and 1.6 MiB gzip, and the inlined CSS engine is unchanged.

import { Graph } from 'zyzz/compiler/wasm'
// Workers import a `.wasm` file as a compiled module
import module from 'zyzz/compiler.wasm'

const output = Graph.create({ module }).compile({ contracts, imports, modules })

The Regen design canvas (tempoxyz/ds) uses this to compile token-checked style() calls in designers' screens against regen-ui's packed contracts.

Validation: vp test run src/compiler/wasm site/src/playground site/src/pages/Docs.test.ts passes, including parity with the native graph and a Chromium run of a browser bundle. Three print tests in Transform.test.ts fail identically on main in the authoring container (WeasyPrint missing and one Chromium snapshot).

---

Generated by Claude Code

[github-actions]

⚠️ Coverage report too large to inline, see the workflow summary.

[github-actions]

Site preview

Open preview

Commit: 5a6b2fe13d32183e56f2e6489656ef9247a90aa2

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/zyzz@462

commit: 5a6b2fe

[github-actions]

Examples

Example	URL	Status
api-react	Open	✅ Deployed
cli-react	Open	✅ Deployed
vite-react	Open	✅ Deployed
vite-solid	Open	✅ Deployed
vite-svelte	Open	✅ Deployed

[github-actions]

Benchmark Report

🟢 Zyzz passes the framework gate in all 11 workloads.

Every workload compiles from fresh compiler state, including Lightning CSS minification and esbuild client bundling. Lower is better, bold marks the best result in each row, and the ratio beside each competitor compares its result with Zyzz.

Compile Time

Mean milliseconds per compilation.

Workload	Zyzz	Panda CSS	StyleX	Tailwind	Tamagui	vanilla-extract	Zyzz vs. Best Competitor
3 Components	0.68	25.77 (37.65×)	2.22 (3.24×)	1.59 (2.32×)	3.22 (4.71×)	3.62 (5.29×)	🟢 2.32× faster than Tailwind
1,000 Components: Repeated Styles	2.19	43.99 (20.08×)	150.63 (68.76×)	4.09 (1.87×)	155.82 (71.13×)	33.14 (15.13×)	🟢 1.87× faster than Tailwind
1,000 Components: Unique Padding	3.74	45.99 (12.28×)	141.03 (37.66×)	7.60 (2.03×)	157.35 (42.02×)	31.33 (8.37×)	🟢 2.03× faster than Tailwind
100 Components: Partial Sharing	1.07	25.54 (23.79×)	14.73 (13.71×)	2.86 (2.66×)	12.58 (11.71×)	6.90 (6.43×)	🟢 2.66× faster than Tailwind
100 Components: Reused Palette	0.87	25.42 (29.25×)	15.95 (18.36×)	1.80 (2.07×)	11.52 (13.26×)	6.46 (7.43×)	🟢 2.07× faster than Tailwind
100 Components: Independent Values	1.22	26.06 (21.41×)	18.28 (15.02×)	3.63 (2.98×)	13.41 (11.02×)	6.98 (5.74×)	🟢 2.98× faster than Tailwind
100 Components: Sparse Properties	0.98	24.82 (25.31×)	10.21 (10.41×)	2.02 (2.06×)	8.56 (8.73×)	5.84 (5.96×)	🟢 2.06× faster than Tailwind
60 Components: Mixed Shapes	0.86	27.35 (31.78×)	9.12 (10.59×)	2.04 (2.37×)	8.87 (10.31×)	5.87 (6.82×)	🟢 2.37× faster than Tailwind
300 Components: Application Scale	2.15	29.29 (13.61×)	34.30 (15.94×)	3.24 (1.51×)	28.70 (13.34×)	11.98 (5.57×)	🟢 1.51× faster than Tailwind
Themes: 10 Components	0.84	25.91 (30.79×)	11.97 (14.22×)	1.63 (1.93×)	10.68 (12.69×)	4.10 (4.87×)	🟢 1.93× faster than Tailwind
Themes: 100 Components	1.30	25.32 (19.47×)	64.44 (49.56×)	2.05 (1.57×)	17.73 (13.64×)	6.61 (5.09×)	🟢 1.57× faster than Tailwind

CSS Size

Gzip bytes of the minified stylesheet.

Workload	Zyzz	Panda CSS	StyleX	Tailwind	Tamagui	vanilla-extract	Zyzz vs. Best Competitor
3 Components	111	266 (2.40×)	181 (1.63×)	219 (1.97×)	169 (1.52×)	121 (1.09×)	🟢 10 B smaller than vanilla-extract
1,000 Components: Repeated Styles	111	266 (2.40×)	181 (1.63×)	219 (1.97×)	169 (1.52×)	2,094 (18.86×)	🟢 58 B smaller than Tamagui
1,000 Components: Unique Padding	4,615	4,647 (1.01×)	7,806 (1.69×)	5,026 (1.09×)	6,381 (1.38×)	5,640 (1.22×)	🟢 32 B smaller than Panda CSS
100 Components: Partial Sharing	1,161	1,491 (1.28×)	2,119 (1.83×)	1,555 (1.34×)	1,985 (1.71×)	1,218 (1.05×)	🟢 57 B smaller than vanilla-extract
100 Components: Reused Palette	244	439 (1.80×)	451 (1.85×)	410 (1.68×)	418 (1.71×)	647 (2.65×)	🟢 166 B smaller than Tailwind
100 Components: Independent Values	2,245	3,079 (1.37×)	4,375 (1.95×)	3,315 (1.48×)	4,698 (2.09×)	2,281 (1.02×)	🟢 36 B smaller than vanilla-extract
100 Components: Sparse Properties	850	964 (1.13×)	1,278 (1.50×)	984 (1.16×)	1,208 (1.42×)	964 (1.13×)	🟢 114 B smaller than Panda CSS
60 Components: Mixed Shapes	284	455 (1.60×)	407 (1.43×)	406 (1.43×)	425 (1.50×)	449 (1.58×)	🟢 122 B smaller than Tailwind
300 Components: Application Scale	915	1,077 (1.18×)	1,321 (1.44×)	1,065 (1.16×)	1,493 (1.63×)	3,098 (3.39×)	🟢 150 B smaller than Tailwind
Themes: 10 Components	201	372 (1.85×)	319 (1.59×)	298 (1.48×)	323 (1.61×)	203 (1.01×)	🟢 2 B smaller than vanilla-extract
Themes: 100 Components	574	739 (1.29×)	1,064 (1.85×)	686 (1.20×)	886 (1.54×)	640 (1.11×)	🟢 66 B smaller than vanilla-extract

JS Size

Gzip bytes of the bundled client JavaScript, including required runtime helpers.

Workload	Zyzz	Panda CSS	StyleX	Tailwind	Tamagui	vanilla-extract	Zyzz vs. Best Competitor
3 Components	322	374 (1.16×)	375 (1.16×)	404 (1.25×)	750 (2.33×)	335 (1.04×)	🟢 13 B smaller than vanilla-extract
1,000 Components: Repeated Styles	368	733 (1.99×)	663 (1.80×)	1,057 (2.87×)	1,266 (3.44×)	2,449 (6.65×)	🟢 295 B smaller than StyleX
1,000 Components: Unique Padding	2,721	3,339 (1.23×)	6,204 (2.28×)	3,508 (1.29×)	6,043 (2.22×)	2,449 (0.90×)	🔴 272 B larger than vanilla-extract
100 Components: Partial Sharing	568	1,243 (2.19×)	1,772 (3.12×)	1,316 (2.32×)	2,108 (3.71×)	558 (0.98×)	🔴 10 B larger than vanilla-extract
100 Components: Reused Palette	389	548 (1.41×)	628 (1.61×)	629 (1.62×)	1,075 (2.76×)	558 (1.43×)	🟢 159 B smaller than Panda CSS
100 Components: Independent Values	568	2,422 (4.26×)	2,861 (5.04×)	2,621 (4.61×)	3,355 (5.91×)	559 (0.98×)	🔴 9 B larger than vanilla-extract
100 Components: Sparse Properties	580	1,000 (1.72×)	1,118 (1.93×)	1,067 (1.84×)	1,682 (2.90×)	559 (0.96×)	🔴 21 B larger than vanilla-extract
60 Components: Mixed Shapes	371	532 (1.43×)	542 (1.46×)	611 (1.65×)	1,003 (2.70×)	468 (1.26×)	🟢 97 B smaller than vanilla-extract
300 Components: Application Scale	2,170	2,456 (1.13×)	2,651 (1.22×)	2,801 (1.29×)	3,492 (1.61×)	988 (0.46×)	🔴 1,182 B larger than vanilla-extract
Themes: 10 Components	390	418 (1.07×)	461 (1.18×)	413 (1.06×)	820 (2.10×)	389 (1.00×)	🔴 1 B larger than vanilla-extract
Themes: 100 Components	604	667 (1.10×)	1,007 (1.67×)	661 (1.09×)	1,344 (2.23×)	596 (0.99×)	🔴 8 B larger than vanilla-extract

Notes

• Gate: Zyzz must beat every competitor on mean compile time and on total gzip size (CSS plus JS). The application workload gates size only.
• Zyzz lanes: Literal workloads start from validated definitions. The application workload transforms one authored module, including parsing. Theme workloads include token resolution.
• More results: The workflow run has error margins, sample counts, raw and Brotli sizes, baseline comparisons, and render timings.

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-17T03:03:55.082951Z	5a6b2fe	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1f28f390a1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".