StyleX example doesn't setup styles correctly

[mechan1sm]

(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

[chenjiahan]

From the issue description, I assume your goal is to inline stylex.css into the HTML. This indeed cannot be achieved via inlintStyles: true, since those styles are not generated through CSS extraction. However, you can manually inline stylex.css using the html.tags option:

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import stylexPlugin from "unplugin-stylex/rspack";
import { readFileSync } from "fs";

const isDev = process.env.NODE_ENV === "development";

export default defineConfig({
  plugins: [pluginReact()],
  html: {
    tags: isDev
      ? []
      : [
          {
            tag: "style",
            children: readFileSync("./dist/stylex.css", "utf-8"),
          },
        ],
  },
  tools: {
    rspack: {
      plugins: [
        stylexPlugin({
          stylex: {
            runtimeInjection: isDev,
          },
        }),
      ],
    },
  },
});

[mechan1sm]

the problem of using the html.tags option (or rather the readFileSync function from fs)
is that it seems to read the ./dist/stylex.css on evaluation time file, before StyleX generates it,
before the ./dist directory is ever created (or rather removed and then created again if rsbuild does this)
(i.e. it reads the ./dist/stylex.css from the previous build)

and if you don't have the ./dist/stylex.css path before build,
then you will simply get the error like this:

error   Failed to load file with jiti: /path/to/repo/rsbuild.config.ts
error   Failed to build.
error   ENOENT: no such file or directory, open './dist/stylex.css'

also, isn't it possible to make the generated stylex.css be considered by rsbuild as the result of CSS extraction?

P.S. if it matters, I'm using bun 1.2.17, and the following command for builds:

bun run build

[chenjiahan]

Sorry I provided an incorrect example.

You could consider creating an Rsbuild plugin and using the onAfterBuild hook to manually modify dist/index.html and inline stylex.css. Aside from that, there doesn’t seem to be any out-of-the-box solution.

[mechan1sm]

I've tried to use custom hooks to somehow connect the unplugin-stylex with the html-rspack-plugin, didn't succeed.

I guess the html-rspack-plugin's alterAssetTags hook should be used before the emit phase,
while unplugin-stylex generates the resulting stylex.css file in the buildEnd(), (i.e. during the emit phase)

If I am correct, then it's practically impossible to inline this CSS into HTML "the correct way"

[mechan1sm]

As for the example, I guess, the only thing that should be done regarding rsbuild stylex example is this:

The unplugin-stylex rsbuild example solves this by embedding the <link rel="stylesheet" href="stylex.css"> to the template index.html

[chenjiahan]

PR welsome 😄