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

[nmn]

#830 adds documentation for the PostCSS plugin.

[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.