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
• 🧩 Modular Architecture: 17 atomic Rust crates with strict dependency layering for maximum parallel compilation and surgical rebuilds
• 📦 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 @stylexswc/nextjs-plugin

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

Next.js Setup

Using with Webpack (Default)

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

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

Using with Turbopack

// next.config.ts
import stylexPlugin from '@stylexswc/nextjs-plugin/turbopack';

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

📁 Project Architecture

This monorepo is organized into a layered, strictly-scoped crate graph designed for maximum parallel compilation and clear domain boundaries. Each Rust crate owns exactly one concern — no re-export facades, no mixed-domain files.

🔥 Core Engines

The compiler pipeline is built from 18 atomic Rust crates arranged in a strict dependency DAG. Higher layers depend only on lower layers — never the reverse.

Layer 0 — Primitives (no internal dependencies)

• stylex-constants — Static lookup tables, keyword sets, and compile-time constants
• stylex-regex — Pre-compiled lazy_static! regex patterns for CSS value matching
• stylex-styleq — Rust port of the runtime styleq class-name merger
• stylex-utils — Lightweight SWC AST helpers

Layer 1 — Macros

• stylex-macros — Error-handling and diagnostic macros (stylex_panic!, stylex_bail!, stylex_unwrap!, etc.)

Layer 2 — Domain Leaves

• stylex-enums — 14 enum modules: CSSSyntax, ValueWithDefault, ImportPathResolution, StyleVarsToKeep, and more
• stylex-js — JS runtime guard helpers (is_valid_callee, is_mutation_expr, is_invalid_method)
• stylex-logs — Structured logging with ANSI-colored [StyleX]-branded output for the NAPI-RS pipeline
• stylex-css-parser — High-performance CSS value parser with comprehensive type, property, and at-rule coverage
• stylex-path-resolver — Import path resolution with partial package.json exports support

Layer 3 — Core Data Structures

• stylex-structures — 15 foundational struct modules: StylexOptions, UidGenerator, PluginPass, NamedImportSource, Order, and more

Layer 4 — Type System

• stylex-types — Cross-coupled core types (InjectableStyle*, MetaData) and the StyleOptions trait

Layer 5 — AST Foundations

• stylex-ast — SWC AST factory and convertor functions (semantically named create_*, convert_*)

Layer 6 — Evaluation

• stylex-evaluator — Pure JS expression evaluator; no transform side effects

Layer 7 — CSS Processing

• stylex-css — Unified CSS processing: generation (LTR/RTL), whitespace normalization, value parsing, property ordering strategies, and pseudo-class selector utilities

Layer 8 — StyleX Transform

• stylex-transform — Main SWC transform: StyleXTransform, StateManager, SWC Fold visitor, and all injection logic

Layer 9 — Compilers (top-level consumers)

• stylex-rs-compiler — NAPI-RS compiler exposing the full pipeline to Node.js

Dependency Graph

graph TD
  subgraph L0["Primitives"]
    stylex_constants["constants"]
    stylex_regex["regex"]
    stylex_styleq["styleq"]
    stylex_utils["utils"]
  end

  subgraph L1["Proc Macros"]
    stylex_macros["macros"]
  end

  subgraph L2["Domain Leaves"]
    stylex_enums["enums"]
    stylex_js["js"]
    stylex_logs["logs"]
    stylex_css_parser["css-parser"]
    stylex_path_resolver["path-resolver"]
  end

  subgraph L3["Core Data Structures"]
    stylex_structures["structures"]
  end

  subgraph L4["Type System"]
    stylex_types["types"]
  end

  subgraph L5["AST Foundations"]
    stylex_ast["ast"]
  end

  subgraph L6["Evaluation"]
    stylex_evaluator["evaluator"]
  end

  subgraph L7["CSS Processing"]
    stylex_css["css"]
  end

  subgraph L8["StyleX Transform"]
    stylex_transform["transform"]
  end

  subgraph L9["Compilers"]
    stylex_compiler_rs["rs-compiler"]
  end

  stylex_utils         --> stylex_regex

  stylex_macros        --> stylex_constants

  stylex_enums         --> stylex_macros
  stylex_js            --> stylex_constants
  stylex_js            --> stylex_macros
  stylex_logs          --> stylex_macros
  stylex_css_parser    --> stylex_macros
  stylex_path_resolver --> stylex_macros

  stylex_structures    --> stylex_constants
  stylex_structures    --> stylex_enums
  stylex_structures    --> stylex_macros

  stylex_types         --> stylex_constants
  stylex_types         --> stylex_enums
  stylex_types         --> stylex_macros
  stylex_types         --> stylex_structures
  stylex_types         --> stylex_utils

  stylex_ast           --> stylex_constants
  stylex_ast           --> stylex_macros
  stylex_ast           --> stylex_types
  stylex_ast           --> stylex_utils

  stylex_evaluator     --> stylex_ast
  stylex_evaluator     --> stylex_constants
  stylex_evaluator     --> stylex_js
  stylex_evaluator     --> stylex_macros
  stylex_evaluator     --> stylex_path_resolver
  stylex_evaluator     --> stylex_types

  stylex_css           --> stylex_ast
  stylex_css           --> stylex_constants
  stylex_css           --> stylex_css_parser
  stylex_css           --> stylex_enums
  stylex_css           --> stylex_evaluator
  stylex_css           --> stylex_macros
  stylex_css           --> stylex_regex
  stylex_css           --> stylex_structures
  stylex_css           --> stylex_types
  stylex_css           --> stylex_utils

  stylex_transform     --> stylex_ast
  stylex_transform     --> stylex_constants
  stylex_transform     --> stylex_css
  stylex_transform     --> stylex_css_parser
  stylex_transform     --> stylex_enums
  stylex_transform     --> stylex_evaluator
  stylex_transform     --> stylex_logs
  stylex_transform     --> stylex_macros
  stylex_transform     --> stylex_path_resolver
  stylex_transform     --> stylex_regex
  stylex_transform     --> stylex_structures
  stylex_transform     --> stylex_styleq
  stylex_transform     --> stylex_types
  stylex_transform     --> stylex_utils

  stylex_compiler_rs   --> stylex_ast
  stylex_compiler_rs   --> stylex_enums
  stylex_compiler_rs   --> stylex_logs
  stylex_compiler_rs   --> stylex_macros
  stylex_compiler_rs   --> stylex_regex
  stylex_compiler_rs   --> stylex_structures
  stylex_compiler_rs   --> stylex_transform
  stylex_compiler_rs   --> stylex_types
  stylex_compiler_rs   --> stylex_utils

  classDef l0 fill:#e8e8e8,stroke:#999,color:#333
  classDef l1 fill:#dce8ff,stroke:#6699cc,color:#333
  classDef l2 fill:#dcf5dc,stroke:#66aa66,color:#333
  classDef l3 fill:#fff3dc,stroke:#cc9933,color:#333
  classDef l4 fill:#ffe8dc,stroke:#cc6633,color:#333
  classDef l5 fill:#f5dcff,stroke:#9933cc,color:#333
  classDef l6 fill:#dcfff5,stroke:#33aaaa,color:#333
  classDef l7 fill:#ffdcdc,stroke:#cc3333,color:#333
  classDef l8 fill:#fffdc0,stroke:#aaaa33,color:#333
  classDef l9 fill:#ffc0c0,stroke:#cc0000,color:#333

  class stylex_constants,stylex_regex,stylex_styleq,stylex_utils l0
  class stylex_macros l1
  class stylex_enums,stylex_js,stylex_logs,stylex_css_parser,stylex_path_resolver l2
  class stylex_structures l3
  class stylex_types l4
  class stylex_ast l5
  class stylex_evaluator l6
  class stylex_css l7
  class stylex_transform l8
  class stylex_compiler_rs l9

🔌 Framework Integrations

• nextjs-plugin — Next.js configuration wrapper with seamless SWC integration
• turbopack-plugin — Turbopack loader for Next.js with high-performance StyleX compilation
• 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

• 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

🔧 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 a