rstackjs / rstackjs/rstack-examples

StyleX example doesn't setup styles correctly

Open
#356 6 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.