leptos_styling

Crates.ioleptos_styling
lib.rsleptos_styling
version0.3.1
created_at2025-05-04 08:43:03.969324+00
updated_at2025-12-25 19:15:55.127084+00
descriptionA powerful styling solution for Leptos applications that enables seamless integration of CSS and SCSS stylesheets with type-safe class names and zero runtime overhead.
homepage
repositoryhttps://github.com/TimTom2016/leptos_styling
max_upload_size
id1659462
size82,336
(TimTom2016)

documentation

https://docs.rs/leptos_styling/latest/

README

Leptos Styling

Crates.io docs.rs MIT licensed

Leptos Styling is a powerful styling solution for Leptos applications that enables seamless integration of CSS and SCSS stylesheets. It intelligently manages stylesheet embedding in both SSR (Server-Side Rendering) and CSR (Client-Side Rendering) modes.

This crate internally uses turf macros for efficient CSS processing and management.

Features

  • CSS/SCSS Support: Write your styles in CSS or SCSS and import them directly into your components
  • Smart Bundling: Automatically handles stylesheet embedding based on your rendering mode (SSR/CSR)
  • Type-Safe Classes: Generate type-safe CSS class names to prevent runtime errors
  • Zero Runtime Overhead: All processing happens at compile time
  • Framework Integration: Seamless integration with Axum and other web frameworks

Installation

Add the following to your Cargo.toml:

[dependencies]
leptos_styling = "0.3.0"

[features]
ssr = ["leptos_styling/ssr"]

Quick Start

Define Your Styles

use leptos::prelude::*;
use leptos_styling::{style_sheet, inline_style_sheet};

// Import from external CSS file
style_sheet!(green_button, "src/green_button.css", "green_button");

// Or define styles inline
inline_style_sheet! {red_button, "red_button",
    .button {
        background-color: red;
        padding: 8px 16px;
        border-radius: 4px;
    }
}

Use in Components

#[component]
pub fn MyButtons() -> impl IntoView {
    view! {
        <div>
            <button class=green_button::BUTTON>"Green Button"</button>
            <button class=red_button::BUTTON>"Red Button"</button>
        </div>
    }
}

Setup

Client-Side Setup(CSR)

#[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
    // Initialize styling system
    leptos_styling::init();

    // Mount your app
    leptos::mount::hydrate_body(App);
}

Client-Side Setup (SSR)

No special setup is required. Stylesheets are registered and managed automatically.

Server-Side Setup(SSR)

async fn main() {
    let leptos_options = get_configuration(None).unwrap().leptos_options;

    // Generate stylesheets (Required for SSR)
    generate_style_sheets(leptos_options.clone());

    let app = Router::new()
        .leptos_routes(&leptos_options, routes, move || {
            provide_meta_context();
            view! { <App/> }
        });

    // Start your server...
}

App Integration

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Html attr:lang="en"/>
        <StyleSheets/> // Include this to inject styles
        <Router>
            // Your routes here
        </Router>
    }
}

Feature Flags

Flag Description
ssr Enable server-side rendering support
csr Enable client-side rendering support

Version Compatibility

Leptos Styling Leptos Version
0.2.x - 0.3.x 0.8
0.1.x 0.7

Documentation

Contributing

We welcome contributions!

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

  • Leptos - The web framework
  • turf - CSS processing macros
Commit count: 7

cargo fmt