feat(cli): make scaffolded templates render correctly anywhere — no blank pages#3102
Merged
Conversation
Page and block templates authored StyleX directly in app source
(stylex.create, xstyle, stylex.props, *.stylex token imports). When
scaffolded into a plain Vite app with no @stylexjs/babel-plugin, the
StyleX never compiled — causing a blank page (runtime "Unexpected
'stylex.create' call at runtime" throw) or silently unstyled layout.
Remove all consumer-authored StyleX from the 82 offending templates:
- drop `import * as stylex` and `*.stylex` token imports
- prefer Astryx component props; otherwise plain inline `style={{...}}`
using the design-token CSS variables emitted at :root by the
precompiled @astryxdesign/core/astryx.css (e.g. var(--spacing-4),
var(--color-border), var(--radius-element))
- reproduce container/media queries with a compiler-free <style> tag +
className (or the existing useMediaQuery hook)
- where styles hit a TableRow (which doesn't forward `style`), move them
to the TableCell
Components (@astryxdesign/core) and their precompiled CSS are unchanged.
Templates now render fully styled in a plain Vite + React + TS app with
zero StyleX/build config.
Co-authored-by: Cursor <cursoragent@cursor.com>
josephfarina
requested review from
cixzhang,
ejhammond,
imdreamrunner,
marie-lucas,
nynexman4464 and
thedjpetersen
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
meta-cla
Bot
added
the
CLA Signed
josephfarina
changed the title
Resolve conflicts in 5 templates that main also changed by taking main's updated versions and re-applying the StyleX removal (inline styles + var(--token) design tokens, no compiler): documentation, documentation-design, documentation-technical, form-two-column, ide. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
🚀 Vercel Preview Deployment
|
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR No new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
cixzhang
approved these changes
Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Astryx ships two ways: components (
@astryxdesign/core) are precompiled (they shipdist/astryx.css), but page and block templates authored StyleX directly in app source (stylex.create,xstyle=,stylex.props(...), and*.stylextoken imports). When an agent scaffolds one of these templates into a plain Vite app with no@stylexjs/babel-plugin, the StyleX never compiles — producing a blank page (runtimeUnexpected 'stylex.create' call at runtimethrow) or a silently unstyled layout. This was the single biggest thing breaking real scaffolded output (~26 of 37 page templates + many blocks).This PR makes every page and block template render correctly in a plain Vite + React + TS app with no StyleX compiler — no runtime throw, full styling, visual parity with today.
What changed
packages/cli/templates/(27 pages + 55 blocks):import * as stylexand*.stylextoken importsstyle={{ ... }}using the design-token CSS variables emitted at:rootby the precompiled@astryxdesign/core/astryx.css(e.g.var(--spacing-4),var(--color-border),var(--radius-element)) — exact token names, no invented vars<style>tag +className(or the existinguseMediaQueryhook)TableRow(which doesn't reliably forwardstyle), moved it to theTableCell@astryxdesign/corecomponent source or its precompiled CSS. Consumers do not need to install or configure@stylexjs/babel-plugin.Test plan
rg "stylex|xstyle|\.stylex" packages/cli/templatesreturns nothingpayment-form,table-grouped,detail-page,Chat*blocks) and every complex page (editor,ide,ai-chat,login-split,mixed-gallery,theme-showcase,settings-dialog,file-explorer) into a throwaway plain Vite app (@astryxdesign/core+@astryxdesign/theme-neutralfrom npm, no StyleX) —npm run build(tsc + vite) passes and each renders fully styled with no page errors / nostylex.createruntime throwtsc --noEmit(strict) against the real published@astryxdesign/coretypesPaginationWithTable, which usesTable)npx vitest run packages/cli— passes except 2 pre-existing failures inimport-hint-correctness.test.mjs(about theThemecomponent's documented import path; fail identically onmain, unrelated to templates)Made with Cursor