Better integrations in 2025?

[realChakrawarti]

I heard about stylex about a year ago and have been checking from time to time. What I feel lacks is templates and integration guides.

For example, I just started a vite v6 + react v19 hobby project and wanted something new for styling and sadly I am struggling to set it up. Skill issues? Maybe, but would really love some integration guides/ templates.

With the year ending, I am hopeful that coming year 2025, we would get better updates on the setup side of things.

Merry Christmas and a happy new year!

[necolas]

A postcss plugin was recently added, although it has not yet been documented - #781
Give it a try and see if it's easier to work with than the existing bundler plugins

[zaydek]

@realChakrawarti Happily using Vite with minimal setup overhead:

📑 vite.config.ts

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

export default defineConfig({
  plugins: [
    react(),
    stylex(),
  ],
  server: { port: 3000 },
  preview: { port: 3000 },
});

📑 stylex.css

/* https://github.com/HorusGoul/vite-plugin-stylex?tab=readme-ov-file#including-stylex-styles-in-your-project */
@stylex stylesheet;

And import the StyleX CSS file once.

That's about all you need to do to get started. Just install:

npm i --save-dev @stylexjs/stylex vite-plugin-stylex

[nonzzz]

The following is my personal opinion. Like tailwind or other css tool based on the postcss or lightning css in vite is better than other integrations. Why? In vite ecosystem there are many SSR or other like framework, they always do a lot of things by themself. Like write some middleware or internal vite's plugin. AFAIK，To support react server render, waku do a lot of thing but as i can know, versions that below vite6 don't tell plug-in author how to distinguish between client and server.

Currently vite's integration relies on virtual module, but you can't ensure that these vite's based frameworks will break this behavior. (So based on css it self can using vite's internal css pipeline)

Anyway, I think if using vite plug-in should consider split it as multiple plugin. Split as scan, hmr, build. Thais is what i learn when i make style-extend/vite.

[Vlada3333]

Wish you all a happy new year!

[nmn]

As @nonzzz mentioned, Vite integrations are pretty problematic because of how various frameworks use it differently. One of the biggest challenges is the fact that Vite does not bundle in dev mode.

With the upcoming changes to Vite and Rolldown which will bundle even in development, I am hopefuly that a good Vite integration will become possible. 🤞

[nmn]

Oh, and happy new year!!

[taphill]

I set up the @stylexjs/postcss-plugin with my vite-react app, based on @necolas's suggestion. It seems to be working great! It requires slightly more setup than using a community-maintained vite plugin. But, switching to the postcss plugin resolved several issues I had with the vite plugin.

Note, my application is fully client rendered. I'm not sure if any more configuration is required for ssr/frameworks

Installation

npm install @stylexjs/stylex

npm install --save-dev @stylexjs/postcss-plugin autoprefixer

npm install --save-dev @babel/core @babel/preset-react @babel/preset-typescript

Config

📑 vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        babelrc: true,
        configFile: true,
      },
    }),
  ],
});

📑 postcss.config.js

export default {
  plugins: {
    "@stylexjs/postcss-plugin": {
      include: ["src/**/*.{js,jsx,ts,tsx}"],
      useCSSLayers: true, // Optional
    },
    autoprefixer: {},
  },
};

📑 babel.config.js

export default {
  presets: [
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
      },
    ],
    "@babel/preset-typescript", // If you're using typescript
  ],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        runtimeInjection: false,
        dev: process.env.NODE_ENV === "development",
        test: false,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: process.cwd(),
        },
      },
    ],
  ],
};

Set up

Add the stylex directive to your index.css file, or whatever the equivalent of that is for you in your project.

/* index.css */
@stylex;

Import the css file with the stylex directive into the entry point of your application.

// main.tsx
import './index.css';

Additional @stylexjs/postcss-plugin options and documentation

https://github.com/facebook/stylex/blob/main/packages/postcss-plugin/README.md

[taphill]

@nmn What would your thoughts be on adding an example app for a basic client rendered vite-react app using the postcss plugin?

[nmn]

Here's the live documentation: https://stylexjs.com/docs/learn/installation/#compiler

Here's a Vite example: https://stackblitz.com/edit/vitejs-vite-3vkyxg?file=package.json

This Vite example is soon going to be the "playground".

[sergiocarneiro]

@nmn Also consider including an example on how to include the NPM dependencies.

The only mention of this on the documentation was on the postcss config. Even if this is the only step, clarifying how they should be included would be good (e.g. package name vs actual path to the source files).

// postcss.config.js
module.exports = {
  plugins: {
    '@stylexjs/postcss-plugin': {
      include: [
        './**/*.{js,jsx,ts,tsx}',
        // any other files that should be included
        // this should include NPM dependencies that use StyleX
        '@/tokens',
        // or
        './node_modules/@/tokens/src/**/*.stylex.ts'
      ],
      useCSSLayers: true,
    },
    autoprefixer: {},
  },
};

[nmn]

For now the best example for that is the nextjs example in the repo. I might add a link to that for now.

[zaydek]

Thank you so much @taphill! I was really stuck on this and your comment saved the day. I tried to archive my process here: #1079. That being said, thank you!! I was really stuck on this.

[hyperknot]

I opened this issue, possibly related to this:
#888

[eslym]

i made it partialy worked in sveltekit, but .svelte file is not supported since babel does not understand that, so the experience is not as smooth as https://github.com/HorusGoul/vite-plugin-stylex

with @stylexjs/postcss-plugin + @stylexjs/babel-plugin: https://github.com/eslym/my-stylex-theme

[eslym]

HorusGoul/vite-plugin-stylex seems doesn't work with the lastest defineConsts feature, haven't try the official way for integration, after so long working with stylex + svelte, i could tell it would be a very pain journey

kind of sad to see now days everything is built around react

[hyperknot]

I think defineConsts has nothing to do with React. I'm also a non-React user of StyleX, using SolidJS.

What did break in the latest release is the removal of the attr.

[necolas]

You can follow this guide for the latest version without attrs https://stylexjs.com/docs/api/javascript/props/#not-using-react

[eslym]

sorry i dint make it clear, the statement "everything around react" is not really stylex fault, its mostly babel,babel does not support any syntax other than js/jsx/ts/tsx, using @stylexjs/postcss-plugin + @stylexjs/babel-plugin may make the thing work but not way to use stylex.xxx in svelte files, make the the development experience very bad.

HorusGoul/vite-plugin-stylex does make the experience smoother, but somehow it will invoke stylex.defineConsts before it getting compile, and i cant find where it get called

the remove of attrs function is not an issue for me

[hyperknot]

Based on @sergiocarneiro 's snippet, I made a full repo here for Vite + StyleX:

https://github.com/hyperknot/bug_repro/tree/main/vite_stylex

It works correctly, both in dev and build mode. What I cannot figure out so far is how to make it work in a pnpm workspace. I'll need some help for that.

But I think for the basic case of simple Vite + StyleX, this should be it.

[sergiocarneiro]

A pnpm workspace is for multi-project repositories. The repo you shared only has one project, at root, and no packages configured in the pnpm workspace. Probably that is why it's failing.

My snippet works with pnpm workspaces, I have a full example here: https://github.com/sergiocarneiro/example-stylex-vite-packages

[hyperknot]

Sorry, I wasn't clear. I made a minimum config example, which works and I uploaded that.
The one which uses pnpm workspace is not yet working and I haven't uploaded it yet. The problem is handling the token.stylex.ts like files from @alias-ed imports. Did you find a solution for that?

[hyperknot]

@sergiocarneiro I opened an Issue, I'm 90% done, only the @alias-ed imports are not working yet. I hope we have some official help for the matter, but also, if you have any ideas, can you have a look?

[sergiocarneiro]

I don't use aliases for local packages, instead I do:

1. Add a package.json to vite_stylex_outside with:

{
  "name": "@alias/vite_stylex_outside"
}

2. Add it as a dependency on vite_styles:

{
  "dependencies": {
    "@alias/vite_stylex_outside": "workspace:*"
  }
}

3. Remove it from tsconfig compilerOptions.paths and vite resolve.alias.

4. Change its StyleX include path to reference from node_modules:

// vite.config.ts
// ...
stylex({
  babelConfig,
  include: [
    //
    path.resolve('src/**/*.{ts,tsx}'),
    path.resolve('./*.{ts,tsx}'),
    path.resolve('node_modules/@alias/vite_stylex_outside/**/*.{ts,tsx}'),
  ],
  useCSSLayers: true,
})

As for aliases, adding the package as a dependency could probably be the missing piece.

[hyperknot]

OK, I think I figured out all possible import ways and edge cases. It should work now:

https://github.com/hyperknot/bug_repro/tree/main/vite_stylex_react