StyleX in Rust ·

Community-driven, high-performance StyleX compiler and tooling ecosystem built with Rust

Important

This is a community-written implementation of StyleX tooling. Built with love by the open source community, it aims to provide a high-performance alternative to the official StyleX tooling while not being affiliated with or officially supported by Meta/Facebook.

A comprehensive monorepo providing a community-built napi-rs compiler, SWC plugin, and complete CSS parser for StyleX. Built from the ground up in Rust for maximum performance and developer experience.

🚀 Why StyleX + Rust?

⚡ Blazing Fast: Significantly faster build times by leveraging NAPI-RS/SWC instead of Babel
🔧 Performance-First Alternative: Built from the ground up in Rust for maximum speed and efficiency
📦 Complete Ecosystem: Community-built toolkit covering compilation to CSS parsing
🌐 Universal Integration: Works seamlessly with Next.js, Webpack, Vite, Rollup, and more
🛡️ Type Safe: Full Rust implementation with comprehensive error handling
🤝 Community Driven: Open source with active community contributions and support

Perfect for developers who want blazing-fast StyleX compilation and are excited about Rust-powered tooling!

📦 Quick Start

# For Next.js projects
npm install --save-dev @toss/stylexswc-nextjs-plugin

# For other build tools
npm install --save-dev @toss/stylexswc-unplugin

Next.js Setup

// next.config.js
const stylexPlugin = require('@toss/stylexswc-nextjs-plugin');

module.exports = stylexPlugin({
  rsOptions: {
    dev: process.env.NODE_ENV !== 'production',
  },
})();

📁 Project Architecture

This monorepo is organized into specialized packages for maximum modularity and reusability:

🔥 Core Engines

rs-compiler - High-performance NAPI-RS compiler for StyleX transformation
css-parser - Comprehensive CSS value parser with extensive test coverage, supporting colors, lengths, calc expressions, transforms, and media queries
shared - Shared utilities and configurations for SWC transformations

🔌 Framework Integrations

nextjs-plugin - Next.js configuration wrapper with seamless SWC integration
unplugin - Universal plugin supporting Vite, Webpack, Rollup, Rspack, and 8+ build tools
jest - Jest transformer for StyleX testing workflows
postcss-plugin - PostCSS integration for existing CSS pipelines

⚙️ Developer Tools

path-resolver - Advanced path resolution with partial package.json exports support
test-parser - Jest test parser for maintaining compatibility with official StyleX
design-system - Internal design system for consistent workspace examples

🏗️ Development Infrastructure

eslint-config - Shared ESLint configuration
typescript-config - TypeScript configuration presets
playwright - Visual regression testing setup

🎯 Build Tool Ecosystem

Tool	Package	Experience
Next.js	`@toss/stylexswc-nextjs-plugin`	🚀 Native SWC Integration
Vite	`@toss/stylexswc-unplugin`	⚡ Lightning Fast HMR
Webpack	`@toss/stylexswc-unplugin`	🔧 Seamless Integration
Rollup	`@toss/stylexswc-unplugin`	📦 Optimized Bundling
Jest	`@toss/stylexswc-jest`	🧪 Reliable Testing
PostCSS	`@toss/stylexswc-postcss-plugin`	🎨 CSS Pipeline Ready
Rspack	`@toss/stylexswc-unplugin`	🚀 Rust-Powered Speed
Farm, Rsbuild, Solid	`@toss/stylexswc-unplugin`	🌟 Modern Build Experience

🔧 Development

# Clone the repository
git clone https://github.com/Dwlad90/stylex-swc-plugin.git

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

📖 Documentation

Development

This project includes a comprehensive Makefile that provides convenient shortcuts for common development tasks. The Makefile integrates with both the Node.js ecosystem (using pnpm and Turborepo) and Rust toolchain.

Quick Start

# Setup development environment
make setup

# Show all available commands
make help

# Build all packages
make build

# Start development servers
make dev

# Run tests
make test

# Run quality checks
make quick-check

Available Commands

The Makefile organizes commands into several categories:

Setup Commands:

make install - Install all dependencies (Node.js and Rust)
make setup - Full development environment setup
make prepare - Prepare hooks and development tools

Build Commands:

make build - Build all packages (Node.js and Rust)
make build-rust - Build only Rust packages
make build-node - Build only Node.js packages
make clean - Clean all build artifacts

Development Commands:

make dev - Start development servers
make watch - Watch for changes and rebuild

Quality Commands:

make lint - Run linting on all packages
make format - Format all code
make typecheck - Run TypeScript type checking
make quick-check - Quick development check (format, lint, typecheck)
make full-check - Full development check including tests

Test Commands:

make test - Run all tests
make test-visual - Run visual regression tests
make bench - Run benchmarks

App Commands:

make apps-build - Build all example apps
make apps-dev - Start development servers for all apps
make apps-clean - Clean all app build artifacts
make app-nextjs-dev - Start Next.js example app in development mode
make app-nextjs-build - Build Next.js example app
make app-nextjs-serve - Serve Next.js example app (requires build first)
make app-vite-dev - Start Vite example app in development mode
make app-vite-build - Build Vite example app
make app-vite-serve - Serve Vite example app (requires build first)
make app-webpack-dev - Start Webpack example app in development mode
make app-webpack-build - Build Webpack example app
make app-rollup-dev - Start Rollup example app in development mode
make app-rollup-build - Build Rollup example app
make apps-serve-common - Serve commonly used example apps simultaneously

Documentation & Release:

make docs - Generate documentation
make info - Show project information

Package Commands:

Bulk Package Operations:

make packages-build - Build all Node.js packages
make packages-lint - Lint all Node.js packages
make packages-test - Test all Node.js packages
make packages-typecheck - Typecheck all Node.js packages
make packages-clean - Clean all Node.js packages

Bulk Rust Crate Operations:

make crates-build - Build all Rust crates
make crates-format - Format all Rust crates
make crates-lint - Lint all Rust crates
make crates-clean - Clean all Rust crates
make crates-docs - Generate docs for all Rust crates

Individual Package Commands:

Each package has individual commands available in the format pkg-{name}-{action} and crate-{name}-{action}:

Node.js packages: unplugin, nextjs, webpack, rollup, postcss, jest, design, playwright, eslint, typescript
Rust crates: compiler, shared, resolver, parser
Available actions: build, lint, test, typecheck, clean (for Node.js) / build, format, lint, clean, docs (for Rust)

Examples:

make pkg-unplugin-build - Build unplugin package
make pkg-webpack-lint - Lint webpack plugin package
make crate-compiler-format - Format Rust compiler crate
make crate-shared-docs - Generate docs for shared crate

Manual Commands (Alternative to Makefile)

If you prefer to use the tools directly:

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Run visual regression tests
pnpm test:visual

# Lint code
pnpm lint

# Check lint
pnpm lint:check

# Format code
pnpm format

# Check format
pnpm format:check

# Typecheck code
pnpm typecheck

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to the develop branch.

📄 License

MIT Licensed. See LICENSE for details.

toss / stylex-swc-plugin