CSS-in-Rust 🎨

一个高性能、类型安全的Rust CSS-in-JS解决方案，专为现代Web开发设计。

✨ 特性

🚀 核心功能

• 类型安全: 利用Rust的类型系统确保CSS的正确性
• 高性能缓存: 智能LRU缓存机制，支持多种缓存策略
• 浏览器兼容性: 自动检测和生成CSS回退方案
• 内存管理: 先进的内存压力监控和自动清理
• 性能监控: 详细的性能指标和缓存命中率统计

🌐 浏览器支持

• 兼容性检测: 支持Chrome、Firefox、Safari、Edge等主流浏览器
• 自动回退: 为不支持的CSS特性自动生成回退代码
• 厂商前缀: 智能添加和优化厂商前缀
• 特性检测: 支持Flexbox、Grid、Container Queries等现代CSS特性

⚡ 性能优化

• 智能缓存: 支持LRU、LFU、TTL、自适应等多种缓存策略
• CSS压缩: 自动移除空白和注释
• 前缀优化: 根据目标浏览器移除不必要的厂商前缀
• 内存监控: 实时监控内存使用情况，自动执行清理策略

📦 项目结构

css-in-rust/
├── crates/
│   ├── css-in-rust-core/          # 核心功能库
│   │   ├── src/
│   │   │   ├── cache/              # 缓存系统
│   │   │   │   ├── entity.rs       # 缓存实体和LRU实现
│   │   │   │   ├── manager.rs      # 缓存管理器
│   │   │   │   ├── strategy.rs     # 高级缓存策略
│   │   │   │   └── mod.rs
│   │   │   ├── integration.rs      # 集成系统
│   │   │   └── lib.rs
│   │   └── Cargo.toml
│   └── css-in-rust-utils/          # 工具库
│       ├── src/
│       │   ├── browser.rs          # 浏览器兼容性检测
│       │   └── lib.rs
│       └── Cargo.toml
├── examples/
│   └── integrated_system_demo.rs   # 完整功能演示
├── Cargo.toml                      # 工作区配置
└── README.md

🚀 快速开始

安装

将以下内容添加到你的 Cargo.toml:

[dependencies]
css-in-rust-core = { path = "crates/css-in-rust-core" }
css-in-rust-utils = { path = "crates/css-in-rust-utils" }

Basic Usage

use css_in_rust::styled;
use dioxus::prelude::*;

#[styled]
struct ButtonStyles {
    base: &'static str = "
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
    ",
    variants: ButtonVariants {
        primary: "background: #007bff; color: white;",
        secondary: "background: #6c757d; color: white;",
    },
}

#[derive(Props)]
struct ButtonProps {
    variant: ButtonVariant,
    children: Element,
}

fn Button(cx: Scope<ButtonProps>) -> Element {
    let styles = use_style_register(cx, ButtonStyles::new());
    
    render! {
        button {
            class: "{styles.base} {styles.variant(props.variant)}",
            {&props.children}
        }
    }
}

fn App(cx: Scope) -> Element {
    render! {
        div {
            Button {
                variant: ButtonVariant::Primary,
                "Click me!"
            }
        }
    }
}

Theme Integration

use css_in_rust_theme::{ThemeProvider, use_theme};

fn App(cx: Scope) -> Element {
    render! {
        ThemeProvider {
            theme: create_theme(),
            Router {}
        }
    }
}

fn ThemedComponent(cx: Scope) -> Element {
    let theme = use_theme(cx);
    let styles = use_style_register(cx, |
        color: theme.colors.primary,
        padding: theme.spacing.md,
        border_radius: theme.radii.sm,
    |);
    
    render! {
        div { class: "{styles}", "Themed content" }
    }
}

Architecture

CSS-in-Rust is built with a modular architecture:

┌─────────────────────────────────────────────────────────────┐
│                    Application Layer                        │
│                  (Dioxus Components)                       │
├─────────────────────────────────────────────────────────────┤
│                  Integration Layer                          │
│              (Dioxus Hooks & Providers)                    │
├─────────────────────────────────────────────────────────────┤
│                    API Layer                               │
│               (CSS-in-Rust Macros)                         │
├─────────────────────────────────────────────────────────────┤
│                   Core Engine                              │
│            (Style Processing & Caching)                    │
├─────────────────────────────────────────────────────────────┤
│                 Foundation Layer                           │
│              (Lightning CSS + Utilities)                   │
└─────────────────────────────────────────────────────────────┘

Crates

• css-in-rust-core: Core style processing engine
• css-in-rust-macro: Procedural macros for compile-time CSS generation
• css-in-rust-theme: Theme system and design tokens
• css-in-rust-dioxus: Dioxus integration with hooks and providers
• css-in-rust-cli: Development tools and utilities

Performance

CSS-in-Rust is designed for maximum performance:

• Compile-time CSS generation: Zero runtime CSS parsing
• Lightning CSS optimization: Automatic vendor prefixing and minification
• Efficient caching: Multi-level caching strategy
• Small bundle size: <50KB core library
• SSR optimized: Critical CSS extraction and hydration

Comparison

Feature	CSS-in-Rust	styled-components	emotion
Runtime Performance	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Type Safety	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐
Bundle Size	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Developer Experience	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
SSR Support	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

Examples

Explore our examples directory for comprehensive usage examples:

• Basic Styling: Simple component styling
• Theme System: Advanced theming with design tokens
• Responsive Design: Mobile-first responsive components
• SSR Application: Server-side rendering setup
• Performance Demo: Benchmarking and optimization

Documentation

• User Guide - Comprehensive usage guide
• API Reference - Complete API documentation
• Migration Guide - Migrating from CSS-in-JS
• Performance Guide - Optimization techniques

Development Status

🚧 This project is currently in active development (Sprint 0/20)

Current Status

• Project setup and architecture design
• Rust workspace initialization
• Core type system implementation
• Lightning CSS integration
• Dioxus hooks development
• Theme system implementation
• SSR support
• Development tools
• Documentation and examples
• Performance optimization
• Testing and release

See our detailed iteration plan for the complete roadmap.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Clone the repository
git clone https://github.com/css-in-rust/css-in-rust.git
cd css-in-rust

# Install Rust toolchain
rustup component add rustfmt clippy
rustup target add wasm32-unknown-unknown

# Install development tools
cargo install cargo-watch wasm-pack trunk

# Run tests
cargo test

# Run examples
cd examples/basic
trunk serve

License

This project is licensed under either of

• Apache License, Version 2.0, (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

at your option.

Acknowledgments

• Lightning CSS - High-performance CSS parser and transformer
• Dioxus - Elegant React-like library for Rust
• styled-components - CSS-in-JS inspiration
• Ant Design - Design system reference

---

Built with ❤️ for the Rust and Dioxus community