facebook · nmn · Oct 26, 2025 · Oct 26, 2025 · Oct 26, 2025 · Oct 26, 2025
@@ -2,7 +2,7 @@
   "private": true,
   "name": "example-esbuild",
   "version": "0.16.2",
-  "description": "Simple esbuild example for @stylexjs/esbuild-plugin",
+  "description": "Simple esbuild example for @stylexjs/unplugin",
   "main": "src/App.jsx",
   "scripts": {
     "example:build": "node scripts/build.mjs",
@@ -15,7 +15,7 @@
     "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "@stylexjs/esbuild-plugin": "0.11.1",
+    "@stylexjs/unplugin": "0.16.2",
     "@stylexjs/eslint-plugin": "0.16.2",
     "esbuild": "^0.25.0",
     "eslint": "^8.57.1"

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title>@stylexjs/esbuild-plugin</title>
+    <title>@stylexjs/unplugin (esbuild)</title>
     <meta charset="utf-8" />
     <style>
       @layer reset {

@@ -8,32 +8,27 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 import esbuild from 'esbuild';
-import stylexPlugin from '@stylexjs/esbuild-plugin';
+import stylex from '@stylexjs/unplugin';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const BUILD_DIR_NAME = 'public/dist';
 const OUTFILE = `${BUILD_DIR_NAME}/bundle.js`;
-const STYLEX_BUNDLE_PATH = path.resolve(
-  __dirname,
-  '..',
-  `${BUILD_DIR_NAME}/stylex.css`,
-);
 
 esbuild
   .build({
     entryPoints: [path.resolve(__dirname, '..', 'src/App.jsx')],
     bundle: true,
     outfile: OUTFILE,
     minify: true,
+    metafile: true, // lets the plugin find CSS outputs, if any
     plugins: [
       // See all options in the babel plugin configuration docs:
       // https://stylexjs.com/docs/api/configuration/babel-plugin/
-      stylexPlugin({
+      stylex.esbuild({
         useCSSLayers: true,
-        generatedCSSFileName: STYLEX_BUNDLE_PATH,
-        stylexImports: ['@stylexjs/stylex'],
+        importSources: ['@stylexjs/stylex'],
         unstable_moduleResolution: {
           type: 'commonJS',
           rootDir: path.resolve(__dirname, '../../..'),

@@ -9,6 +9,7 @@
 
 'use strict';
 
+import './global.css';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import * as stylex from '@stylexjs/stylex';

@@ -0,0 +1 @@
+:root { --stylex-injection: 0; }
@@ -0,0 +1,12 @@
+# example-rspack
+
+StyleX with Rspack using `@stylexjs/unplugin`.
+
+Scripts
+- `npm run dev`: starts Rspack dev server and opens the app.
+- `npm run build`: builds into `dist/` with a single `index.css` that includes StyleX CSS.
+
+Notes
+- The example imports `src/global.css` to ensure a CSS asset exists; the StyleX plugin appends aggregated CSS to that extracted file (preferably `index.css`).
+- Plugin used in `rspack.config.js` via `require('@stylexjs/unplugin').default()`.
+
@@ -0,0 +1,22 @@
+{
+  "name": "example-rspack",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Example: StyleX with Rspack via @stylexjs/unplugin",
+  "scripts": {
+    "build": "rspack build --config ./rspack.config.js",
+    "dev": "rspack serve --config ./rspack.config.js"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@stylexjs/stylex": "0.16.2"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^0.7.0",
+    "@rspack/core": "^0.7.0",
+    "css-loader": "^7.1.2",
+    "@stylexjs/unplugin": "0.16.2"
+  }
+}
+
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>StyleX + Rspack</title>
+    <link rel="stylesheet" href="/index.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/bundle.js"></script>
+  </body>
+  </html>
+
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+const path = require('path');
+const rspack = require('@rspack/core');
+const stylex = require('@stylexjs/unplugin').default;
+
+/** @type {import('@rspack/core').Configuration} */
+module.exports = {
+  mode: 'development',
+  context: __dirname,
+  entry: {
+    app: path.resolve(__dirname, 'src/main.jsx'),
+  },
+  experiments: {
+    // Disable built-in CSS experiment when using extract plugin
+    css: false,
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: { syntax: 'ecmascript', jsx: true },
+            transform: { react: { runtime: 'automatic' } },
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    // Use the unplugin adapter for Rspack/webpack
+    stylex.rspack({}),
+    new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+    port: 5174,
+  },
+};
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  app: {
+    minHeight: '100vh',
+    display: 'grid',
+    placeItems: 'center',
+    backgroundColor: '#f7f5ff',
+  },
+  title: {
+    color: 'rebeccapurple',
+    fontSize: 32,
+    fontWeight: 700,
+  },
+});
+
+export default function App() {
+  return (
+    <main {...stylex.props(styles.app)}>
+      <h1 {...stylex.props(styles.title)}>StyleX + Rspack + unplugin</h1>
+    </main>
+  );
+}
@@ -0,0 +1,12 @@
+/* Ensure Rspack produces a CSS asset to inject StyleX into */
+:root {
+  --brand-color: #663399;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+    Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji,
+    Segoe UI Symbol;
+}
+
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './global.css';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>example-vite-react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>