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

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.

• ⚡ 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!

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

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

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

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

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

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

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.

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

• stylex-constants — Static lookup tables, keyword sets, and compile-time constants
• stylex-regex — Pre-compiled lazy_static! regex patterns for CSS value matching
• stylex-utils — Lightweight SWC AST helpers

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

• 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

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

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

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

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

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

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

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

graph TD
  subgraph L0["Primitives"]
    stylex_constants["constants"]
    stylex_regex["regex"]
    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_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_transform     --> stylex_ast
  stylex_transform     --> stylex_constants
  stylex_transform     --> stylex_css
  stylex_transform     --> stylex_css_parser
  stylex_transform     --> stylex_enums
  stylex_transform     --> stylex_logs
  stylex_transform     --> stylex_macros
  stylex_transform     --> stylex_path_resolver
  stylex_transform     --> stylex_regex
  stylex_transform     --> stylex_structures
  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_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

• 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

• test-parser — Jest test parser for maintaining compatibility with official StyleX
• design-system — Internal design system for consistent workspace examples

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

# 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

• StyleX Documentation
• SWC Documentation
• NAPI-RS Documentation

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.

# 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

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, transform, resolver, parser, and all atomic crates (constants, regex, utils, macros, enums, js, logs, css-parser, structures, types, ast, evaluator, css, etc.)
• 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-transform-docs — Generate docs for transform crate
• make crate-ast-lint — Lint the AST utilities crate

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

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

MIT Licensed. See LICENSE for details.