Expose the aliases option from the Stylex babel plugin to react-strict-dom

[oscarsilver]

I am using the RSD babel preset together with the @stylexjs/rollup-plugin.

Due to using import aliases for my stylex vars the build fails with error:

Only static values are allowed inside of a stylex.create() call

This should be resolved by enabling forwarding of the aliases to the Stylex babel plugin.

[facebook-github-bot]

Hi @oscarsilver!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[necolas]

If you use the postcss plugin used in the example app, you shouldn't have to use the stylex rollup plugin or propagate aliases

[oscarsilver]

If you use the postcss plugin used in the example app, you shouldn't have to use the stylex rollup plugin or propagate aliases

My tech stack is Vite with React Router V7.

I tried to use the PostCSS plugin with the following PostCSS config:

const reactStrictBabelPreset = require("react-strict-dom/babel-preset");
const typescriptPreset = require("@babel/preset-typescript");

module.exports = {
  plugins: {
    "postcss-react-strict-dom": {
      include: ["app/**/*.{js,jsx,ts,tsx}"],
      babelConfig: {
        presets: [
          [typescriptPreset],
          [
            reactStrictBabelPreset,
            {
              rootDir: process.cwd(),
            },
          ],
        ],
      },
    },
    autoprefixer: {},
  },
};

And here is my vite.config.ts:

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(({ isSsrBuild }) => ({
  build: {
    rollupOptions: isSsrBuild
      ? {
          input: "./server/app.ts",
        }
      : undefined,
  },
  plugins: [tsconfigPaths(), reactRouter()],
}));

This still fails with the same error as mentioned above unless I propagate my aliases to the Stylex babel plugin.

However if I use my fork I can build the CSS fine but when running the application in dev mode it crashes with the following error:

Error when evaluating SSR module virtual:react-router/server-build: failed to import "react-strict-dom"
|- Error: 'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

Do you have any suggestions or guidance on how I can use react-strict-dom in my React Router project?

[nmn]

@oscarsilver You need to use both the postcss plugin and the Babel plugin with Vite. The recommended solution is to create a Babel config file which Vite picks up automatically, and to import that configuration within your postcss config file.

(Babel also reads babelrc files automatically, I've found this to be inconsistent with Vite.)

[necolas]

@oscarsilver You will need to add the RSD preset to your main babel config, as described here - https://facebook.github.io/react-strict-dom/api/babel-preset/

After that, you shouldn't have to redeclare your Babel config in the PostCSS config as the RSD PostCSS plugin will reuse what you already have:

By default, the plugin reads from babel.config.js in your project. For custom configurations, set babelrc: false and specify desired options. Refer to Babel Config Options for available options.
https://github.com/javascripter/postcss-react-strict-dom/tree/main?tab=readme-ov-file#configuration-options

If you're using a non-standard location for the Babel config, then you will need to configure the PostCSS plugin to find it, but you should still use the same Babel config.

[oscarsilver]

Thanks! I got it working, however I still need to provide the aliases to the stylex babel plugin to be able to use aliases in my components.

[nmn]

however I still need to provide the aliases to the stylex babel plugin to be able to use aliases in my components.

Yes, this is a known issue of the StyleX Babel plugin. A community member has started working on fixing this.

[necolas]

A community member has started working on fixing this.

Link to the issue and PR?

[nmn]

Yes: facebook/stylex#765

There is no PR yet.