Support Vite 8 in the setup guide and example app

[yaminyassin]

Summary

On Vite 8, @vitejs/plugin-react@6 no longer runs Babel. JSX and Fast Refresh moved to Oxc, and the plugin's babel option is ignored. The current setup guide relies on that option to apply react-strict-dom/babel-preset, so on Vite 8 the preset never runs. vite build still passes because it does not render components, so the failure only shows when a styled component first renders:

Unexpected 'stylex.create' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.

This updates both the guide and the vite-app example to a configuration that works on Vite 8.

Changes

• Docs (03-vite.md): lead with the Vite 8 setup and keep Vite 7 below as the set of differences from it. The Vite 8 config applies the preset through vite-plugin-babel with an explicit include, uses the native resolve.tsconfigPaths, and passes the platform extensions through optimizeDeps.rolldownOptions. Also removed a stale comment and import name in the PostCSS block.
• Example app (apps/vite-app): upgrade to vite@8, @vitejs/plugin-react@6, and vite-plugin-babel@1.7; drop vite-tsconfig-paths; move the preset onto vite-plugin-babel with an include that also covers example-ui.

Why the include is required

vite-plugin-babel combines include and filter with a logical AND, and its default include of /\.jsx?$/ matches .js and .jsx but not .ts or .tsx. Without an explicit include, TypeScript source is skipped and the preset never runs.

Testing

• npm run build in apps/vite-app succeeds. The emitted CSS contains the atomic classes for the app and example-ui, and the bundle has no runtime stylex.create call left.
• npm run lint passes.
• Started the dev server and confirmed the styled components render in the browser.

[MoOx]

I have the feeling that we should handle "new version setup" differently. Maybe we could just keep latest version on the website, and add a note somewhere to previous doc version ? That's just an idea.

Eg:

The following setup instructions are for Vite 8. For Vite 7, you can browser this instructions on GitHub

[yaminyassin]

Thanks for the feedback @MoOx, that's a fair point.

My thinking for keeping both versions on the page came from the StyleX Vite docs (https://stylexjs.com/docs/learn/installation/vite), so I followed a similar shape here.

That said, I'm happy to change it. As a middle ground, what about one Vite section with a sub-section per major version? The latest stays front and center, but the previous one is still discoverable on the page instead of only living in git history. Let me know if you'd rather just keep the latest with a link back to the old instructions, like in your example.

[MoOx]

@yaminyassin I don't see anything particular on the stylex link you mentioned. Did they update recently ?

I am no official maintainer here, so we could gather some other feedbacks cc @martinbooth

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

Results	Base	Patch	Ratio
react-strict-dom/dist/web/index.js
· compressed	3,251	3,251	1.00
· minified	10,375	10,375	1.00
react-strict-dom/dist/web/runtime.js
· compressed	1,645	1,645	1.00
· minified	4,131	4,131	1.00
react-strict-dom/dist/native/index.js
· compressed	16,638	16,638	1.00
· minified	64,632	64,632	1.00
react-strict-animated/dist/web/index.js
· compressed	6,861	6,861	1.00
· minified	23,486	23,486	1.00
react-strict-animated/dist/native/index.js
· compressed	797	797	1.00
· minified	2,518	2,518	1.00

[github-actions]

workflow: benchmarks/perf (native)

Comparison of performance test results, measured in operations per second. Larger is better.

Results	Base	Patch	Ratio
css.create
· small	1,137,566	1,177,399	1.04	+
· small with units	516,711	525,433	1.02	+
· small with variables	676,798	689,763	1.02	+
· several small	367,916	377,517	1.03	+
· large	214,872	217,257	1.01	+
· large with polyfills	160,678	158,563	0.99	-
· complex	111,596	111,706	1.00	+
· unsupported	218,644	222,096	1.02	+
css.createTheme
· simple theme	233,965	243,818	1.04	+
· polyfill theme	221,650	229,906	1.04	+

[yaminyassin]

@yaminyassin I don't see anything particular on the stylex link you mentioned. Did they update recently ?

I am no official maintainer here, so we could gather some other feedbacks cc @martinbooth

StyleX's Vite setup isn't one flat config, it's a base page plus a sub-page per setup:

• https://stylexjs.com/docs/learn/installation/vite (base)
• https://stylexjs.com/docs/learn/installation/vite/vite-react
• https://stylexjs.com/docs/learn/installation/vite/vite-rsc

StyleX splits the base vite config under framework specific guides and that's the shape I borrowed. The difference is that StyleX splits by framework/runtime and I'm splitting by Vite major version, but the pattern is identical of the one base config plus a thin section listing only what changes. Since StyleX is what compiles our styles, following their layout felt like the natural fit.

Worth noting the PR isn't two full setups on one page either. Vite 8 is the base, and the Vite 7 section is only the mentions changes needed to get it fully configured. The maintenance surface is small, and dropping it removes the on-page path for everyone still on Vite 7.

I'm happy with either choice though, the main strength of this pr is guiding the new users on how to set this up with the latest Vite version

[martinbooth]

LGTM