RCSS - 在Rust应用程序中可重用的CSS。

RCSS允许你直接在Rust代码中编写样式，大部分无需引号。

let css = css!{
    .container {
        background-color: black;
    }
    #id {
        color: red;
    }
    button {
        border: 1px solid black;
    }
};
assert!(css.container.starts_with("container"));

RCSS使用LightningCSS（浏览器级CSS预处理器）来解析和生成CSS代码。它可以打包所有CSS为静态文件，或生成内联CSS内容。

它使用与JS世界中的css_modules类似的方法，以类型安全的方式公开CSS类。对于不使用类名的选择器，它使用作用域样式方法（添加具有唯一名称的自定义类）。

使用RCSS定义的样式可以在其他组件中扩展和重用。

// Declare a public module name foo;
css!{
    @rcss(pub struct Foo);

    .container {
        color: green;
        background-color: black;
    }
};

// Component define what type of css it needs.
fn hello_world<C>(css: C) -> String
C: rcss::ScopeChain<Root = Foo>
{
    // use ScopeChain to include style chain. Checkout rcss-layers for details.

    format!(r#"<div class="{}">Hello</div>"#, css.container)
}
...

// Extend style from module foo, typecheck that no new classes, ids or types are added.
let css = css!{
    @rcss(extend ::path::to::Foo);

    .container {
        background-color: red;
    }
};

let html = hello_world(css);

为了更好地控制层叠和避免冲突，RCSS提供了可以保存扩展样式到CSS rcss-layers 的crate。

使用方法

[dependencies]
rcss = "0.2"

RCSS不专注于任何特定的Web框架，即使在没有框架的情况下也可以使用，只需使用format!，但要使其更方便，此存储库还将包括与流行Web框架的集成。目前，只有一个集成crate：为leptos的rcss-leptos。

与leptos一起使用

要使用rcss与leptos一起使用，将以下内容添加到您的Cargo.toml

[dependencies]
rcss = "0.2"
rcss-leptos = "0.2"

然后在组件中，您可以使用css!宏来定义样式。

use rcss::css;
use leptos::*;

#[component]
fn hello_world() -> Node {
    let css = css!{
        .container {
            background-color: black;
            color: white;
        }
    };
    rcss_leptos::register_style(css.clone());

    view! {
        <div class=css.container>Hello</div>
    }
}

更多示例可以在examples/leptos目录中找到。

打包CSS

RCSS可以将所有CSS打包为一个静态文件。为此，可以在build.rs中使用rcss-bundler crate。

[build-dependencies]
rcss-bundler = "0.2"

fn main() {
    rcss_bundler::bundle_build_rs();
}

默认情况下，打包器将CSS保存到$OUT_DIR/styles.css。但是，这可以通过cargo metadata进行自定义。

[package.metadata.rcss]
output-path = "style/counters.css" # Path to save styles
disable-styles = false # If set to true will force `rcss-macro` to remove style strings from macro output.

注意：如果 rcss-bundler 在第一次构建之后添加，rcss-macro 将会忽略 disable-styles。可以使用以下命令强制 cargo 重新构建 rcss-macro：cargo clean -p rcss-macro 或 cargo clean -p rcss-macro --target-dir target/front（在 cargo-leptos 的情况下）。

已知问题

1. rcss-bundler 应仅从一个根包使用。如果您有多个使用 rcss-bundler 的包，或者工作空间在同一个目标目录中共享多个根包的构建工件，将会导致配置冲突。例如，如果一个根包设置了 disable-styles=true，而另一个没有，则 rcss-bundler 将会抛出一个警告并使用 disable-styles=false 为所有工作空间/包。

2. 目前，CSS 解析错误还没有完全集成到 Rust 诊断消息中，所以如果存在无效的 CSS 语法，它将只抛出一个通用错误，而不会突出显示错误的确切位置。

3. 宏中的未引用文本有一些限制，例如它不能包含单引号 '' 或未完成的括号（如 { 或 (）。这是因为 Rust 向宏提供 TokenStream 的方式。

4. 未引用文本与 em 单位和一些以数字开头并以字母 e 开头的十六进制数（如 #0ed）不太兼容，因为 Rust 将它们解析为指数数文字面量，并期望在 e 之后是一个数字而不是字母 "m"。