Official Vite 6 config

[hyperknot]

Describe the feature request

I'm delighted to read that StyleX + Vite is now officially supported via PostCSS! There is no need for using one of the two unofficial plugins anymore!

Can someone add an official instruction for adding StyleX to a new, clean Vite starter project?

I mean pnpm create vite with the react-ts template and just give the minimal config needed.

[pnegahdar]

Got mine working after an hour of pulling my hair out. This is for the latest vite, react, typescript, stylex. It also supports typescript paths.

Main thing was: I had to move the postcss/babelrc config to a separate file and not inline it in the vite config.

vite.config.ts

Important bits:

• react should load the same bablerc, don't inline the postcss config so it can read the same babelrc.

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tsconfigPaths from "vite-tsconfig-paths"
import { viteStaticCopy } from "vite-plugin-static-copy"

export default defineConfig({
    // ...
    plugins: [
        tsconfigPaths({ loose: true }), // If using paths from typescript
        react({ babel: { babelrc: true } }), // Load the same babelrc
        // ...
    ],
    // ...
})

postcss.config.cjs

Pretty much as described in the configuration, but using preset-env instead of autoprefixer.

module.exports = {
    plugins: {
        "@stylexjs/postcss-plugin": {
            include: ["src/**/*.{js,jsx,ts,tsx}"],
        },
        "postcss-preset-env": {},
    },
}

.babelrc.cjs

Important bits:

• typescript bits are optional
• Decorators and class properties if you need them (remove these from the react() plugin in vite)
• Aliases to conform to your tsconfig paths

const path = require("path")

module.exports = {
    presets: [["@babel/preset-react", { runtime: "automatic" }], "@babel/preset-typescript"],
    plugins: [
        ["@babel/plugin-proposal-decorators", { version: "legacy" }],
        "@babel/plugin-transform-class-properties", // MUST COME AFTER decorators
        [
            "@stylexjs/babel-plugin",
            {
                aliases: {
                    "@/*": [path.join(__dirname, "./src/*")],
                },
                dev: process.env.NODE_ENV === "development",
                test: process.env.NODE_ENV === "test",
                runtimeInjection: false,
                genConditionalClasses: true,
                treeshakeCompensation: true,
                unstable_moduleResolution: {
                    type: "commonJS",
                },
            },
        ],
    ],
    parserOpts: {
        plugins: ["decorators-legacy", "classProperties"],
    },
}

Hope this saves someone else some time!