{"id":20281783,"url":"https://github.com/dwlad90/stylex-swc-plugin","last_synced_at":"2026-04-02T14:22:58.321Z","repository":{"id":236378868,"uuid":"792491755","full_name":"Dwlad90/stylex-swc-plugin","owner":"Dwlad90","description":"Community NAPI-RS/SWC plugin for StyleX.","archived":false,"fork":false,"pushed_at":"2024-12-28T17:26:16.000Z","size":6261,"stargazers_count":57,"open_issues_count":5,"forks_count":5,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2024-12-30T09:46:40.745Z","etag":null,"topics":["nextjs","rust","stylex","swc-plugin","webpack"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dwlad90.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-26T19:28:02.000Z","updated_at":"2024-12-23T23:49:23.000Z","dependencies_parsed_at":"2024-09-09T20:03:49.843Z","dependency_job_id":"52506c4e-ab38-4a9b-adbe-718c42e5d9b2","html_url":"https://github.com/Dwlad90/stylex-swc-plugin","commit_stats":null,"previous_names":["dwlad90/stylex-swc-plugin"],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dwlad90%2Fstylex-swc-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dwlad90%2Fstylex-swc-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dwlad90%2Fstylex-swc-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dwlad90%2Fstylex-swc-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dwlad90","download_url":"https://codeload.github.com/Dwlad90/stylex-swc-plugin/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","rust","stylex","swc-plugin","webpack"],"created_at":"2024-11-14T14:06:49.825Z","updated_at":"2026-04-02T14:22:58.286Z","avatar_url":"https://github.com/Dwlad90.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StyleX in Rust \u0026middot; [![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/Dwlad90/stylex-swc-plugin/blob/develop/LICENSE) [![npm version](https://img.shields.io/npm/v/@stylexswc/rs-compiler.svg?style=flat)](https://www.npmjs.com/package/@stylexswc/rs-compiler) ![GitHub tag check runs](https://img.shields.io/github/check-runs/Dwlad90/stylex-swc-plugin/0.15.2?label=Release%20status) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Dwlad90/stylex-swc-plugin/pr-validation.yml?branch=develop\u0026label=Project%20Health)\n\n\u003e **Community-driven, high-performance StyleX compiler and tooling ecosystem built with Rust**\n\n\u003e [!IMPORTANT]\n\u003e 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.\n\nA comprehensive monorepo providing a community-built [`napi-rs`](https://napi.rs/) compiler, [SWC](https://swc.rs/) plugin, and complete CSS parser for [StyleX](https://github.com/facebook/stylex). Built from the ground up in Rust for maximum performance and developer experience.\n\n## 🚀 Why StyleX + Rust?\n\n- **⚡ Blazing Fast**: Significantly faster build times by leveraging NAPI-RS/SWC instead of Babel\n- **🔧 Performance-First Alternative**: Built from the ground up in Rust for maximum speed and efficiency\n- **🧩 Modular Architecture**: 17 atomic Rust crates with strict dependency layering for maximum parallel compilation and surgical rebuilds\n- **📦 Complete Ecosystem**: Community-built toolkit covering compilation to CSS parsing\n- **🌐 Universal Integration**: Works seamlessly with Next.js, Webpack, Vite, Rollup, and more\n- **🛡️ Type Safe**: Full Rust implementation with comprehensive error handling\n- **🤝 Community Driven**: Open source with active community contributions and support\n\nPerfect for developers who want blazing-fast StyleX compilation and are excited about Rust-powered tooling!\n\n## 📦 Quick Start\n\n```bash\n# For Next.js projects\nnpm install --save-dev @stylexswc/nextjs-plugin\n\n# For other build tools\nnpm install --save-dev @stylexswc/unplugin\n```\n\n### Next.js Setup\n\n#### Using with Webpack (Default)\n\n```javascript\n// next.config.js\nconst stylexPlugin = require('@stylexswc/nextjs-plugin');\n\nmodule.exports = stylexPlugin({\n  rsOptions: {\n    dev: process.env.NODE_ENV !== 'production',\n  },\n})();\n```\n\n#### Using with Turbopack\n\n```typescript\n// next.config.ts\nimport stylexPlugin from '@stylexswc/nextjs-plugin/turbopack';\n\nexport default stylexPlugin({\n  rsOptions: {\n    dev: process.env.NODE_ENV !== 'production',\n  },\n})();\n```\n\n## 📁 Project Architecture\n\nThis monorepo is organized into a layered, strictly-scoped crate\ngraph designed for maximum parallel compilation and clear domain\nboundaries. Each Rust crate owns exactly one concern — no re-export\nfacades, no mixed-domain files.\n\n### 🔥 Core Engines\n\nThe compiler pipeline is built from 17 atomic Rust crates arranged in\na strict dependency DAG. Higher layers depend only on lower layers —\nnever the reverse.\n\n#### Layer 0 — Primitives (no internal dependencies)\n\n- **[`stylex-constants`](./crates/stylex-constants)** — Static lookup tables, keyword sets, and compile-time constants\n- **[`stylex-regex`](./crates/stylex-regex)** — Pre-compiled `lazy_static!` regex patterns for CSS value matching\n- **[`stylex-utils`](./crates/stylex-utils)** — Lightweight SWC AST helpers\n\n#### Layer 1 — Macros\n\n- **[`stylex-macros`](./crates/stylex-macros)** — Error-handling and diagnostic macros (`stylex_panic!`, `stylex_bail!`, `stylex_unwrap!`, etc.)\n\n#### Layer 2 — Domain Leaves\n\n- **[`stylex-enums`](./crates/stylex-enums)** — 14 enum modules: `CSSSyntax`, `ValueWithDefault`, `ImportPathResolution`, `StyleVarsToKeep`, and more\n- **[`stylex-js`](./crates/stylex-js)** — JS runtime guard helpers (`is_valid_callee`, `is_mutation_expr`, `is_invalid_method`)\n- **[`stylex-logs`](./crates/stylex-logs)** — Structured logging with ANSI-colored `[StyleX]`-branded output for the NAPI-RS pipeline\n- **[`stylex-css-parser`](./crates/stylex-css-parser)** — High-performance CSS value parser with comprehensive type, property, and at-rule coverage\n- **[`stylex-path-resolver`](./crates/stylex-path-resolver)** — Import path resolution with partial `package.json` exports support\n\n#### Layer 3 — Core Data Structures\n\n- **[`stylex-structures`](./crates/stylex-structures)** — 15 foundational struct modules: `StylexOptions`, `UidGenerator`, `PluginPass`, `NamedImportSource`, `Order`, and more\n\n#### Layer 4 — Type System\n\n- **[`stylex-types`](./crates/stylex-types)** — Cross-coupled core types (`InjectableStyle*`, `MetaData`) and the `StyleOptions` trait\n\n#### Layer 5 — AST Foundations\n\n- **[`stylex-ast`](./crates/stylex-ast)** — SWC AST factory and convertor functions (semantically named `create_*`, `convert_*`)\n\n#### Layer 6 — Evaluation\n\n- **[`stylex-evaluator`](./crates/stylex-evaluator)** — Pure JS expression evaluator; no transform side effects\n\n#### Layer 7 — CSS Processing\n\n- **[`stylex-css`](./crates/stylex-css)** — Unified CSS processing: generation (LTR/RTL), whitespace normalization, value parsing, property ordering strategies, and pseudo-class selector utilities\n\n#### Layer 8 — StyleX Transform\n\n- **[`stylex-transform`](./crates/stylex-transform)** — Main SWC transform: `StyleXTransform`, `StateManager`, SWC `Fold` visitor, and all injection logic\n\n#### Layer 9 — Compilers (top-level consumers)\n\n- **[`stylex-rs-compiler`](./crates/stylex-rs-compiler)** — NAPI-RS compiler exposing the full pipeline to Node.js\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2\u003eDependency Graph\u003c/h2\u003e\u003c/summary\u003e\n\n```mermaid\ngraph TD\n  subgraph L0[\"Primitives\"]\n    stylex_constants[\"constants\"]\n    stylex_regex[\"regex\"]\n    stylex_utils[\"utils\"]\n  end\n\n  subgraph L1[\"Proc Macros\"]\n    stylex_macros[\"macros\"]\n  end\n\n  subgraph L2[\"Domain Leaves\"]\n    stylex_enums[\"enums\"]\n    stylex_js[\"js\"]\n    stylex_logs[\"logs\"]\n    stylex_css_parser[\"css-parser\"]\n    stylex_path_resolver[\"path-resolver\"]\n  end\n\n  subgraph L3[\"Core Data Structures\"]\n    stylex_structures[\"structures\"]\n  end\n\n  subgraph L4[\"Type System\"]\n    stylex_types[\"types\"]\n  end\n\n  subgraph L5[\"AST Foundations\"]\n    stylex_ast[\"ast\"]\n  end\n\n  subgraph L6[\"Evaluation\"]\n    stylex_evaluator[\"evaluator\"]\n  end\n\n  subgraph L7[\"CSS Processing\"]\n    stylex_css[\"css\"]\n  end\n\n  subgraph L8[\"StyleX Transform\"]\n    stylex_transform[\"transform\"]\n  end\n\n  subgraph L9[\"Compilers\"]\n    stylex_compiler_rs[\"rs-compiler\"]\n  end\n\n  stylex_macros        --\u003e stylex_constants\n\n  stylex_enums         --\u003e stylex_macros\n  stylex_js            --\u003e stylex_constants\n  stylex_js            --\u003e stylex_macros\n  stylex_logs          --\u003e stylex_macros\n  stylex_css_parser    --\u003e stylex_macros\n  stylex_path_resolver --\u003e stylex_macros\n\n  stylex_structures    --\u003e stylex_constants\n  stylex_structures    --\u003e stylex_enums\n  stylex_structures    --\u003e stylex_macros\n\n  stylex_types         --\u003e stylex_constants\n  stylex_types         --\u003e stylex_enums\n  stylex_types         --\u003e stylex_macros\n  stylex_types         --\u003e stylex_structures\n  stylex_types         --\u003e stylex_utils\n\n  stylex_ast           --\u003e stylex_constants\n  stylex_ast           --\u003e stylex_macros\n  stylex_ast           --\u003e stylex_types\n  stylex_ast           --\u003e stylex_utils\n\n  stylex_evaluator     --\u003e stylex_ast\n  stylex_evaluator     --\u003e stylex_constants\n  stylex_evaluator     --\u003e stylex_js\n  stylex_evaluator     --\u003e stylex_macros\n  stylex_evaluator     --\u003e stylex_path_resolver\n  stylex_evaluator     --\u003e stylex_types\n\n  stylex_css           --\u003e stylex_ast\n  stylex_css           --\u003e stylex_constants\n  stylex_css           --\u003e stylex_css_parser\n  stylex_css           --\u003e stylex_enums\n  stylex_css           --\u003e stylex_evaluator\n  stylex_css           --\u003e stylex_macros\n  stylex_css           --\u003e stylex_regex\n  stylex_css           --\u003e stylex_structures\n  stylex_css           --\u003e stylex_types\n\n  stylex_transform     --\u003e stylex_ast\n  stylex_transform     --\u003e stylex_constants\n  stylex_transform     --\u003e stylex_css\n  stylex_transform     --\u003e stylex_css_parser\n  stylex_transform     --\u003e stylex_enums\n  stylex_transform     --\u003e stylex_logs\n  stylex_transform     --\u003e stylex_macros\n  stylex_transform     --\u003e stylex_path_resolver\n  stylex_transform     --\u003e stylex_regex\n  stylex_transform     --\u003e stylex_structures\n  stylex_transform     --\u003e stylex_types\n  stylex_transform     --\u003e stylex_utils\n\n  stylex_compiler_rs   --\u003e stylex_ast\n  stylex_compiler_rs   --\u003e stylex_enums\n  stylex_compiler_rs   --\u003e stylex_logs\n  stylex_compiler_rs   --\u003e stylex_macros\n  stylex_compiler_rs   --\u003e stylex_regex\n  stylex_compiler_rs   --\u003e stylex_structures\n  stylex_compiler_rs   --\u003e stylex_transform\n  stylex_compiler_rs   --\u003e stylex_types\n  stylex_compiler_rs   --\u003e stylex_utils\n\n  classDef l0 fill:#e8e8e8,stroke:#999,color:#333\n  classDef l1 fill:#dce8ff,stroke:#6699cc,color:#333\n  classDef l2 fill:#dcf5dc,stroke:#66aa66,color:#333\n  classDef l3 fill:#fff3dc,stroke:#cc9933,color:#333\n  classDef l4 fill:#ffe8dc,stroke:#cc6633,color:#333\n  classDef l5 fill:#f5dcff,stroke:#9933cc,color:#333\n  classDef l6 fill:#dcfff5,stroke:#33aaaa,color:#333\n  classDef l7 fill:#ffdcdc,stroke:#cc3333,color:#333\n  classDef l8 fill:#fffdc0,stroke:#aaaa33,color:#333\n  classDef l9 fill:#ffc0c0,stroke:#cc0000,color:#333\n\n  class stylex_constants,stylex_regex,stylex_utils l0\n  class stylex_macros l1\n  class stylex_enums,stylex_js,stylex_logs,stylex_css_parser,stylex_path_resolver l2\n  class stylex_structures l3\n  class stylex_types l4\n  class stylex_ast l5\n  class stylex_evaluator l6\n  class stylex_css l7\n  class stylex_transform l8\n  class stylex_compiler_rs l9\n```\n\n\u003c/details\u003e\n\n### 🔌 Framework Integrations\n\n- **[`nextjs-plugin`](./packages/nextjs-plugin)** — Next.js configuration wrapper with seamless SWC integration\n- **[`turbopack-plugin`](./packages/turbopack-plugin)** — Turbopack loader for Next.js with high-performance StyleX compilation\n- **[`unplugin`](./packages/unplugin)** — Universal plugin supporting Vite, Webpack, Rollup, Rspack, and 8+ build tools\n- **[`jest`](./packages/jest)** — Jest transformer for StyleX testing workflows\n- **[`postcss-plugin`](./packages/postcss-plugin)** — PostCSS integration for existing CSS pipelines\n\n### ⚙️ Developer Tools\n\n- **[`test-parser`](./crates/stylex-test-parser)** — Jest test parser for maintaining compatibility with official StyleX\n- **[`design-system`](./packages/design-system)** — Internal design system for consistent workspace examples\n\n### 🏗️ Development Infrastructure\n\n- **[`eslint-config`](./packages/eslint-config)** — Shared ESLint configuration\n- **[`typescript-config`](./packages/typescript-config)** — TypeScript configuration presets\n- **[`playwright`](./packages/playwright)** — Visual regression testing setup\n\n## 🎯 Build Tool Ecosystem\n\n| Tool | Package | Experience |\n|------|---------|------------|\n| Next.js (Webpack) | `@stylexswc/nextjs-plugin` | 🚀 Native SWC Integration |\n| Next.js (Turbopack) | `@stylexswc/nextjs-plugin/turbopack` | ⚡ Ultra-Fast Builds |\n| Vite | `@stylexswc/unplugin` | ⚡ Lightning Fast HMR |\n| Webpack | `@stylexswc/unplugin` | 🔧 Seamless Integration |\n| Rollup | `@stylexswc/unplugin` | 📦 Optimized Bundling |\n| Jest | `@stylexswc/jest` | 🧪 Reliable Testing |\n| PostCSS | `@stylexswc/postcss-plugin` | 🎨 CSS Pipeline Ready |\n| Rspack | `@stylexswc/unplugin` | 🚀 Rust-Powered Speed |\n| Farm, Rsbuild, Solid | `@stylexswc/unplugin` | 🌟 Modern Build Experience |\n\n## 🔧 Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/Dwlad90/stylex-swc-plugin.git\n\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm build\n\n# Run tests\npnpm test\n```\n\n## 📖 Documentation\n\n- [StyleX Documentation](https://stylexjs.com)\n- [SWC Documentation](https://swc.rs)\n- [NAPI-RS Documentation](https://napi.rs)\n\n## Development\n\nThis project includes a comprehensive Makefile that provides convenient\nshortcuts for common development tasks. The Makefile integrates with both the\nNode.js ecosystem (using pnpm and Turborepo) and Rust toolchain.\n\n### Quick Start\n\n```bash\n# Setup development environment\nmake setup\n\n# Show all available commands\nmake help\n\n# Build all packages\nmake build\n\n# Start development servers\nmake dev\n\n# Run tests\nmake test\n\n# Run quality checks\nmake quick-check\n```\n\n### Available Commands\n\nThe Makefile organizes commands into several categories:\n\n**Setup Commands:**\n\n- `make install` — Install all dependencies (Node.js and Rust)\n- `make setup` — Full development environment setup\n- `make prepare` — Prepare hooks and development tools\n\n**Build Commands:**\n\n- `make build` — Build all packages (Node.js and Rust)\n- `make build-rust` — Build only Rust packages\n- `make build-node` — Build only Node.js packages\n- `make clean` — Clean all build artifacts\n\n**Development Commands:**\n\n- `make dev` — Start development servers\n- `make watch` — Watch for changes and rebuild\n\n**Quality Commands:**\n\n- `make lint` — Run linting on all packages\n- `make format` — Format all code\n- `make typecheck` — Run TypeScript type checking\n- `make quick-check` — Quick development check (format, lint, typecheck)\n- `make full-check` — Full development check including tests\n\n**Test Commands:**\n\n- `make test` — Run all tests\n- `make test-visual` — Run visual regression tests\n- `make bench` — Run benchmarks\n\n**App Commands:**\n\n- `make apps-build` — Build all example apps\n- `make apps-dev` — Start development servers for all apps\n- `make apps-clean` — Clean all app build artifacts\n- `make app-nextjs-dev` — Start Next.js example app in development mode\n- `make app-nextjs-build` — Build Next.js example app\n- `make app-nextjs-serve` — Serve Next.js example app (requires build first)\n- `make app-vite-dev` — Start Vite example app in development mode\n- `make app-vite-build` — Build Vite example app\n- `make app-vite-serve` — Serve Vite example app (requires build first)\n- `make app-webpack-dev` — Start Webpack example app in development mode\n- `make app-webpack-build` — Build Webpack example app\n- `make app-rollup-dev` — Start Rollup example app in development mode\n- `make app-rollup-build` — Build Rollup example app\n- `make apps-serve-common` — Serve commonly used example apps simultaneously\n\n**Documentation \u0026 Release:**\n\n- `make docs` — Generate documentation\n- `make info` — Show project information\n\n**Package Commands:**\n\n_Bulk Package Operations:_\n\n- `make packages-build` — Build all Node.js packages\n- `make packages-lint` — Lint all Node.js packages\n- `make packages-test` — Test all Node.js packages\n- `make packages-typecheck` — Typecheck all Node.js packages\n- `make packages-clean` — Clean all Node.js packages\n\n_Bulk Rust Crate Operations:_\n\n- `make crates-build` — Build all Rust crates\n- `make crates-format` — Format all Rust crates\n- `make crates-lint` — Lint all Rust crates\n- `make crates-clean` — Clean all Rust crates\n- `make crates-docs` — Generate docs for all Rust crates\n\n_Individual Package Commands:_\n\nEach package has individual commands available in the format\n`pkg-{name}-{action}` and `crate-{name}-{action}`:\n\n- **Node.js packages**: unplugin, nextjs, webpack, rollup, postcss, jest,\n  design, playwright, eslint, typescript\n- **Rust crates**: compiler, transform, resolver, parser, and all atomic\n  crates (constants, regex, utils, macros, enums, js, logs,\n  css-parser, structures, types, ast, evaluator,\n  css, etc.)\n- **Available actions**: build, lint, test, typecheck, clean (for Node.js) /\n  build, format, lint, clean, docs (for Rust)\n\nExamples:\n\n- `make pkg-unplugin-build` — Build unplugin package\n- `make pkg-webpack-lint` — Lint webpack plugin package\n- `make crate-compiler-format` — Format Rust compiler crate\n- `make crate-transform-docs` — Generate docs for transform crate\n- `make crate-ast-lint` — Lint the AST utilities crate\n\n### Manual Commands (Alternative to Makefile)\n\nIf you prefer to use the tools directly:\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm build\n\n# Run tests\npnpm test\n\n# Run visual regression tests\npnpm test:visual\n\n# Lint code\npnpm lint\n\n# Check lint\npnpm lint:check\n\n# Format code\npnpm format\n\n# Check format\npnpm format:check\n\n# Typecheck code\npnpm typecheck\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our contributing guidelines and submit pull requests to the `develop` branch.\n\n## 📄 License\n\nMIT Licensed. See [LICENSE](./LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwlad90%2Fstylex-swc-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwlad90%2Fstylex-swc-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwlad90%2Fstylex-swc-plugin/lists"}