(Vite) StyleX does not apply when run in production, but works on dev mode

[PrivateN00b]

Environment: React 19, Stylex 0.11.1, vite-plugin-stylex 0.13.0, Vite 6.0.6

Issue: StyleX style templates are getting applied and work perfectly if I run my website in dev mode (npm run dev), but the styles do not apply at all in prod mode (npm run build, npm run preview)

Tried methods:

1. Since vite-plugin-stylex is pretty much out of date, and it only works if I override it's inner babel-plugin dependency to 0.4.1 version, I have tried to use this postcss implementation [examples] Add a Vite example #888 (comment), but I wasn't able to make stylex even work in dev mode, with this guide.
2. Moved the vite-plugin-stylex module over to the dependencies group in package.json, but the issue still exists.
3. Checked if @stylexjs/stylex module actually gets loaded and they do in production

package.json:

{
  "name": "privatenoob-blog",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.5.0",
    "@stylexjs/stylex": "^0.11.1",
    "highlight.js": "^11.11.1",
    "polished": "^4.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-redux": "^9.2.0",
    "styled-components": "^6.1.13",
    "vite-plugin-stylex": "^0.13.0"
  },
  "devDependencies": {
    "@types/node": "^22.10.3",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "@typescript-eslint/eslint-plugin": "^8.19.0",
    "@typescript-eslint/parser": "^8.19.0",
    "@vitejs/plugin-react": "^4.3.4",
    "babel-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
    "eslint": "^9.17.0",
    "eslint-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "react-router-dom": "^7.1.1",
    "typescript": "^5.7.2",
    "vite": "^6.0.6"
  },
  "overrides": {
    "vite-plugin-stylex": {
      "@stylexjs/babel-plugin": "0.4.1"
    }
  }
}

I have a strong feeling that the flaw is in my project (maybe due to vite-plugin-stylex?), rather in stylex itself, that's why I'm asking for your insight in Discussions, rather than opening an Issue.

[BMCwebdev]

I may be wrong, but this is my best debug idea for you.
Dev mode may be working because you may have runtimeInjection: true,
When this is true, you are injecting styles and not building a static css file.

If you set it to false, and then dev no longer works, I would say that then you have an issue with your config files. I would also suggest moving to the PostCSS setup instead of the vite plugin.

[BMCwebdev]

Initial set up is one of the most painful parts of setting up any application. The good news is usually once your are done you won't have to touch it again for a long time. The maintainer here have acknowledged that they would like to make it less painful, but it's honestly just part of the game.

here is a migration guide I made for my teams. It may be helpful, or I may be giving you a headache 😄
I tried to sanitize it for general use and not specifically for my use case. But every setup is different. I have no idea what version of React you are using for example.
If you are using AI tools like Cursor, try just feeding it this
Just hoping you can find some use in this.

// Migrate from vite plugin to postCSS

Migrating from Vite Plugin to PostCSS Setup

This guide will help you migrate your existing Vite application from using the StyleX Vite plugin to the new PostCSS-based setup.

Overview of Changes

The main changes in the new setup are:

• Removal of the StyleX Vite plugin
• Addition of PostCSS and Babel configuration
• New build process with environment-aware StyleX processing
• Updated configuration for processing open-props

Migration Steps

1. Update Dependencies

Remove the old StyleX Vite plugin and add the new required dependencies:

# Remove old plugin
npm uninstall @stylexjs/vite-plugin

# Add new dependencies
npm install -D @stylexjs/[email protected] @stylexjs/[email protected] @babel/core @babel/preset-react @babel/preset-typescript autoprefixer postcss

2. Create PostCSS Configuration

Create a new postcss.config.js file in your project root:

import path from "path";
import fs from "fs";

// This function helps detect the current environment/mode
function getEnvironmentMode() {
  const nodeEnv = process.env.NODE_ENV;
  return {
    isDev: nodeEnv === "development",
    isTest: nodeEnv === "test",
    isProd: nodeEnv === "production",
  };
}

// IMPORTANT: This function finds the path to open-props package
function getPackageIncludePaths(packageName) {
  const projectRoot = process.cwd();
  const nodeModulePaths = [path.join(projectRoot, "node_modules")];

  let packagePath = null;

  for (const nodeModulePath of nodeModulePaths) {
    const packageJsonPath = path.resolve(
      nodeModulePath,
      packageName,
      "package.json",
    );
    if (fs.existsSync(packageJsonPath)) {
      packagePath = path.dirname(packageJsonPath);
      break;
    }
  }

  if (!packagePath) {
    console.warn(`Could not find package ${packageName}`);
    return [];
  }

  return [
    path.join(packagePath, "**/*.{js,jsx,ts,tsx}"),
    "!" + path.join(packagePath, "node_modules/**/*.{js,jsx,ts,tsx}"),
  ];
}

// Get the paths to open-props or node_modules packages you need to compile
// const openPropsIncludePaths = getPackageIncludePaths(
//   "@open-props",
// );

export default {
  plugins: {
    "@stylexjs/postcss-plugin": {
      include: [
        "./src/**/*.{js,jsx,ts,tsx}",
        // ...openPropsIncludePaths,
      ],
      useCSSLayers: true,
      fileName: "stylex.css",
      outputCSS: true,
      babelConfig: {
        babelrc: false,
        parserOpts: {
          plugins: ["typescript", "jsx"],
        },
        plugins: [
          [
            "@stylexjs/babel-plugin",
            {
              dev: getEnvironmentMode().isDev,
              test: getEnvironmentMode().isTest,
              runtimeInjection: getEnvironmentMode().isDev,
              genConditionalClasses: true,
              treeshakeCompensation: true,
              unstable_moduleResolution: {
                type: "commonJS",
                rootDir: path.resolve(),
              },
            },
          ],
        ],
      },
    },
    autoprefixer: {},
  },
};

3. Update Vite Configuration

Modify your vite.config.ts to use the new PostCSS setup:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [
            [
              "@stylexjs/babel-plugin",
              {
                dev: mode === "development",
                test: mode === "test",
                runtimeInjection: mode === "development",
                genConditionalClasses: true,
                treeshakeCompensation: true,
                unstable_moduleResolution: {
                  type: "commonJS",
                  rootDir: path.resolve(),
                },
              },
            ],
          ],
        },
      }),
    ],
    css: {
      postcss: path.resolve(path.resolve(), "postcss.config.js"),
    },
    // optimizeDeps: {
    //   exclude: ["@open-props"],
    // },
    build: {
      sourcemap: true,
      target: "esnext",
    },
  };
});

4. Update StyleX CSS File

Create or update your src/stylex.css file:

@layer reset;

/* The @stylex directive is used by the StyleX PostCSS plugin.
 * It will be replaced with generated CSS at build time.
 */
/* @stylex-injection-point */
@stylex;

5. Update Entry Points

Remove any old StyleX imports and update your entry points:

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './stylex.css' // Import the StyleX CSS file

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Troubleshooting

Common Issues

1. StyleX compilation errors:

   • Make sure your PostCSS configuration includes the path to @open-props
   • Verify that the StyleX PostCSS plugin is properly set up
   • Check that the stylex.css file has the correct directive format

2. Component rendering issues:

   • Check that all required peer dependencies are installed

3. "Error: Cannot find module '@stylexjs/babel-plugin' or '@stylexjs/postcss-plugin'":

   • Make sure all StyleX dependencies are installed
   • Run npm install again to ensure all dependencies are resolved

Performance Optimization

• The new setup includes environment-aware StyleX processing
• Using optimizeDeps in Vite config ensures proper handling of dependencies
• Source maps are enabled for better debugging

Key Differences from Previous Setup

1. Build Process:

   • Old: Used Vite plugin for StyleX processing
   • New: Uses PostCSS and Babel for StyleX processing
   • New: Environment-aware StyleX processing (dev/test/prod modes)

2. Token Processing:

   • Old: Automatic token processing
   • New: Explicit token path inclusion required
   • New: More control over which files are processed

3. Configuration:

   • Old: Single Vite plugin configuration
   • New: Separate PostCSS and Babel configurations
   • New: More detailed environment mode handling

Dependencies

Main Dependencies

• @stylexjs/stylex: `0.12.0
• react: ^18.2.0
• react-dom: ^18.2.0

Development Dependencies

• @stylexjs/babel-plugin: `0.12.0
• @stylexjs/postcss-plugin: `0.12.0
• @babel/core: latest version
• @babel/preset-react: latest version
• @babel/preset-typescript: latest version
• autoprefixer: latest version
• postcss: latest version
• typescript: ^5.2.2
• @types/react: ^18.2.43
• @types/react-dom: ^18.2.17

[nmn]

@PrivateN00b please share a reproduction of your setup if you want further help. The PostCSS setup should work in most Vite setups.

[PrivateN00b]

Thank you guys, all of you are amazing! If anyone else also faces this issue as I've had, then you will most likely find success by just following BMCwebdev's guide. I basically just copied it 1:1 and it worked.

[necolas]

@BMCwebdev we have an open issue to create a vite example in the StyleX repo, if you're interested in contributing your template to the codebase #888

[sergiocarneiro]

If all is working well, the setup shared by @BMCwebdev could be significantly simplified:

babel.config.cjs

module.exports = {
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        test: process.env.NODE_ENV === "test",
        runtimeInjection: process.env.NODE_ENV === "development",
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
        },
      },
    ],
  ],
};

• rootDir can be omitted with the latest version of StyleX.

postcss.config.cjs

module.exports = {
  plugins: {
    "@stylexjs/postcss-plugin": {
      include: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/my-library/**/*.{js,jsx,ts,tsx}",
        "!./node_modules/my-library/node_modules/**/*.{js,jsx,ts,tsx}",
        // Ideally you could just write "my-library", but not sure if that would currently work
      ],
      useCSSLayers: true,
      outputCSS: true,
      fileName: "stylex.css",
    },
    autoprefixer: {},
  },
};

• StyleX plugin automatically picks up babel.config.cjs.
• The getPackageIncludePaths can be replaced with two paths to node_modules (per package), to make it more portable.

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react(),
  ],
  // optimizeDeps: {
  //   exclude: ["@open-props"],
  // },
  build: {
    sourcemap: true,
    target: "esnext",
  },
});

• React plugin automatically picks up babel.config.cjs
• Vite automatically picks up postcss.config.cjs

Let me know if this worked for you guys.

[BMCwebdev]

Thanks @sergiocarneiro . I am trying to resolve some issues in updating one of my teams apps to the PostCSS config method right now actually and running into issues where the babel doesn't seem to be compiling and I keep running into the Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'. It seems to be due to my node_modules libraries. One is a component library built with StyleX, the other is a token library (much like open-props).

It is these node modules where I tend to always run into issues getting StyleX plugins configured correctly. Once I get this figured out I can figure out if I can make a template, but for now I cannot update my team's app to the new PostCSS method myself.

[sergiocarneiro]

It's definitely a challenge to make it work with libraries. I haven't been able to finish my setup either, just tried to make some improvements to what you shared. I remember getting that error you mention, but I also got another which I think it's due to my libraries being ESM-only.

[BMCwebdev]

I had success with my libraries when using https://github.com/HorusGoul/vite-plugin-stylex
But it seems that one is not supporting the latest StlyeX? So that's why I am trying to move to PostCSS method.

if I try to use

  optimizeDeps: {
    exclude: [
      '@acme/component-library-with-stylex',
      '@acme/tokens-with-define-vars-like-open-props',
    ],
  },

I will run into different errors.

• By default, Vite pre-bundles all node_modules with esbuild, which handles ESM/CommonJS interop for you.
• When you add a package (like Stitch) to optimizeDeps.exclude, you’re telling Vite:
  “Don’t pre-bundle this package—treat it like source code and run it through Babel (so StyleX can work).”
• But:
  When Vite treats a node_module as source, it no longer applies esbuild’s ESM/CJS interop magic to that package or its dependencies.
• If that package (or any of its dependencies) expects to be loaded as a CommonJS module, or expects named ESM exports that only work after pre-bundling, you get errors like:
  Uncaught SyntaxError: The requested module '...' doesn't provide an export named: 'useSyncExternalStore'
  This is because Vite is now trying to load a CommonJS module as ESM, which doesn’t work for named exports.

So it seems that optimizeDeps.exclude is needed for StyleX, but it can break other dependencies that rely on ESM/CJS interop?

[sergiocarneiro]

Same here, things were working smoothly with vite-plugin-stylex, but with that we are stuck with StyleX 0.9 and Vite 5. This means we cannot use features like the Vite Environment API, which modern tooling like Cloudflare Vite plugin depend on.

[BMCwebdev]

The vite plugin will still work with Vite 6 and StyleX 0.12.0 you have to force it in your package.json
I’ll share an example when I get back to my laptop.

still, it will give a warning.

[idonov]

The vite plugin will still work with Vite 6 and StyleX 0.12.0 you have to force it in your package.json I’ll share an example when I get back to my laptop.

still, it will give a warning.

It's not the warnings with me i can live with that, I have issues when using it for SSR, I get lots of Hydration errors