scoped-sass

Procedural macros for scoped Sass in Leptos apps.

This crate scans .scss/.sass files, compiles them with scoped-sass-core, rewrites class names with deterministic suffixes, and generates Rust modules you can use from components.

Install

[dependencies]
scoped-sass = "0.1.0"

The package name is scoped-sass, but in Rust code you import it as scoped_sass.

Macros

`scoped_scss!`

Compile one explicit Sass file:

scoped_sass::scoped_scss!(pub mod card, "src/components/card.scss");

`scoped_scss_auto!`

Scan a source directory recursively and generate one module per file:

scoped_sass::scoped_scss_auto!(
    pub,
    "src",
    inject = true,
    output_file = "public/styles/scoped.generated.css"
);

`scoped_sass_auto!`

Alias of scoped_scss_auto! (same behavior, shorter name).

Options (`scoped_scss_auto!` / `scoped_sass_auto!`)

inject = <bool> If true, app_styles() returns inline <style> tags with generated CSS.
output_file = "<path>" Writes all generated CSS into a single file (relative to CARGO_MANIFEST_DIR).
href = "<url>" Optional URL used by app_styles() when inject = false. If omitted, it defaults to "/" + output_file.

Generated items

The auto macros generate:

a rooted namespace: pub mod scoped { ... }
one Rust module per Sass file under path-based namespaces:
- src/components/card.scss -> scoped::components::card
- src/views/protected/home.scss -> scoped::views::protected::home
cls!(...) helper macro (crate-local) for joining classes from strings and Option<...>
global_styles() (inline styles only when inject = true)
app_styles() (high-level style entrypoint for app root)

Inside each generated module:

CSS: &'static str
SUFFIX: &'static str
classes::<class_name> constants mapped to transformed scoped class names

Suggested app usage

Declare the macro in your app entry module:

use scoped_sass::scoped_sass_auto;

scoped_sass_auto!(
    pub,
    "src",
    inject = true,
    output_file = "public/styles/scoped.generated.css"
);

Render styles once near the root:

Ok((app_styles(), routes))

For colocated files (card.rs + card.scss), re-export classes inside the module:

// src/components/card.rs
pub use crate::scoped::components::card::classes;

Then usage stays lightweight:

use crate::components::card::classes;

For Sass modules without a matching .rs file, add a module in mod.rs:

// src/components/mod.rs
pub mod solitario {
    pub use crate::scoped::components::solitario::*;
}

Then:

use crate::components::solitario::classes;

Notes

The macro includes Sass files as tracked dependencies so recompilation happens when imports change.
Rust Analyzer snapshots are kept under target/scoped_sass_cache/generated_rust (and target/rust-analyzer/...) so consumers don't need a src/.scoped folder.

scoped-sass 0.1.0