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

• StyleX Documentation
• SWC Documentation
• NAPI-RS 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.