rstackjs / rstackjs/rstack-examples
StyleX example doesn't setup styles correctly
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 168
- Forks
- 47
- Avg merge
- 3h 45m
- Merged PRs (30d)
- 11
Description
(1) Files generated by rsbuild stylex example do not use the stylex.css file.
Instead styles are present because of StyleX runtimeInjection=true feature, which should be disabled for production builds,
(2) yet apparently it is enabled for production builds
(production builds being considered the result of rsbuild build command, i.e. "build" script in package.json)
and if runtimeInjection is force-disabled like this:
tools: {
rspack: {
plugins: [stylexPlugin({
stylex: {
runtimeInjection: false,
}
})],
},
},
then styles are not loaded by the browser at all
The unplugin-stylex rsbuild example solves this by embedding the <link rel="stylesheet" href="stylex.css"> to the template index.html
(3) As a result, the output.inlineStyles=true doesn't work for the stylex.css file generated by the plugin.
(the reason I wrote this github-issue is because of this third problem)
Git repo to reproduce: https://github.com/mechan1sm/stylex-bug-reproduce-1
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the rsbuild/stylex example, its package.json build script, and the generated stylex.css referenced in the report. Reproduce with rsbuild build, then compare the production HTML and CSS output with the linked unplugin-stylex example's public/index.html. Done means production styles load without runtime injection and output.inlineStyles handles stylex.css as intended.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100