unocss-classes

HTML 类构建宏，用于 Rust 网页框架的 UnoCSS 变体组转换器

此 crate 在 classes! 宏的基础上提供了封装，并额外将字符串字面量转换为与 @unocss/transformer-variant-group 保持一致。它旨在简化在 Leptos / Dioxus / Yew 等前端 Rust 框架中构建复合 DOM 类，同时充分利用 UnoCSS 的功能。

导出

• uno! - 与 classes! 宏的作用相同，但还可以在字符串字面量中转换变体组。转换是在编译时进行的，因此没有开销。
• to_uno! - 它具有相同的目的，但输出字符串在 运行时 额外转换。对于转换动态组合的类很有用，但通常应避免。需要 runtime 功能。
  此外，UnoCSS 可能无法拾取在运行时生成的实用工具，因此可能需要使用 Safelist 或 运行时引擎。

示例

• uno!["hover:(bg-gray-400 font-medium)", "font-(light mono)"]; // -> "hover:bg-gray-400 hover:font-medium font-light font-mono"
  

• let some = Some("text-red");
  let none = None::<String>;
  let truthy = true;
  let falsy = false;
  uno![
    some,
    none,
    "text-green" => truthy,
    "text-black" => falsy,
    Some("text-white").map(|_| "text-blue")
  ]; // -> "text-red text-green text-blue"
  

• let truthy = true;
  uno!["text-(sm center)" => truthy]; // -> "text-sm text-center"
  

请注意，只有宏作用域内的纯字符串字面量才会进行转换。

uno![Some("text-(sm center)")] // doesn't work

let class = "text-(sm center)";
uno![class] // doesn't work

这就是 to_uno! 宏派上用场的地方。

to_uno![Some("text-(sm center)")]

let class = "text-(sm center)";
to_uno![class]

Leptos 示例

use leptos::*;
use unocss_classes::uno;

#[component]
fn App() -> impl IntoView {
    view! { <div class=uno!["hover:(bg-gray-400 font-medium)", "font-(light mono)"]>"Some text"</div> }
    // equivalent to: <div class="hover:bg-gray-400 hover:font-medium font-light font-mono">Some text</div>
}

// or as a reactive derived signal:
#[component]
fn App() -> impl IntoView {
    let reactive_condition = create_rw_signal(true);
    view! {
        <div class=move || uno!["hover:(bg-gray-400 font-medium)", "font-(light mono)" => reactive_condition()]>
            "Some text"
        </div>
    }
}

您还可以查看此 Leptos 应用程序 示例。

Dioxus 示例

单独的Dioxus不允许直接在rsx!中使用String，因为它没有实现IntoAttributeValue特性。一些内置组件甚至严格要求使用&'a str作为类属性值。
为此，uno!和to_uno!宏都将Dioxus的Scope作为第一个参数，通过分号与其它参数隔开。在这种情况下，输出的String将被转换为一个具有有效生命周期的&'a str。
这种行为需要启用dioxus特性。

use dioxus::prelude::*;
use unocss_classes::uno;

pub fn App(cx: Scope) -> Element {
    render! {div { class: uno![cx; "hover:(bg-gray-400 font-medium)", "font-(light mono)"], "Some text" }}
}

还有一个Dioxus的示例应用程序！

Yew 示例

use yew::prelude::*;
use unocss_classes::uno;

#[function_component]
pub fn App() -> Html {
    html! { <div class={ uno!["hover:(bg-gray-400 font-medium)", "font-(light mono)"] }>{ "Some text" }</div> }
}

全局使用 uno! 宏

#[macro_use]
extern crate unocss_classes;

使用 UnoCSS 与 Rust 前端框架

基本上，您需要先运行 @unocss/cli 以构建嵌入到您的应用程序中的CSS文件，然后运行打包器（例如Trunk）来编译项目的其余部分。要自动执行此操作，您可以使用Cargo的构建脚本或Trunk的预构建钩子。对于在监视模式下运行的大型项目，可能最好也在监视模式下运行@unocss/cli，这样构建输出CSS文件会更快一些。

您可以参考已提到的利用Trunk的钩子的Leptos & Trunk 示例。

还可以将Vite与Trunk / Dioxus CLI / Leptos CLI结合使用，但这需要更复杂的设置，除非您真的需要一些Vite独有的功能（例如Webfont 自托管），否则可能不值得这么做。

许可

MIT 许可证

版权所有 © 2023-PRESENT Kajetan Welc

特此授予任何获得本软件及其相关文档副本（“软件”）的人免费使用权，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许向软件提供方提供软件的人这样做，但需遵守以下条件

上述版权声明和本许可声明应包含在软件的所有副本或主要部分中。

软件按“原样”提供，不提供任何形式的保证，无论是明示的、暗示的，还是基于侵权行为的保证，包括但不限于适销性、适用于特定用途和不侵犯版权的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论这些责任是基于合同、侵权或其他原因，无论这些责任是否与软件或其使用或其他方式相关。