⚠️ 此软件包不再维护 ⚠️

此包的变体组功能不再与当前版本的UnoCSS同步，因此应避免使用。此外，使用专用UnoCSS预设解析Rust文件也不再必要。
unocss-classes 已被创建作为替代品。它添加了一些新功能，并旨在支持比Yew更多的Rust前端框架。

yew-unocss-transformer

为UnoCSS提供的Yew类宏，具有变体组转换器

此软件包提供了 uno! 宏，该宏将 @unocss/transformer-variant-group 应用到给定的字符串字面量。

转换在Rust端执行，并允许生成具有有效类的HTML元素。但是，默认情况下，UnoCSS无法正确解析 .rs 文件。使用此宏与 unocss-preset-yew 一起使用，以便可以从Rust代码库生成CSS类。

与 classes! 不同，此宏不强制使用每个字符串的单个类（uno!("text-blue fw800") 也可以正常工作）。但是，仅允许字符串字面量 - 其他任何内容都无法转换。对于动态类，请使用标准 classes! 宏并填充UnoCSS 安全列表。

示例

use yew::prelude::*;
use yew_unocss_transformer::uno;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <div id="app">
            <input
                class={
                    uno!(
                        "w72",
                        "p-(x5 y.5)", // px5 py.5
                        "text-(center red)", // text-center text-red
                        "fw700",
                        "bg-green",
                        "rounded",
                        "border-(1 blue/30)", // border-1 border-blue/30
                        "placeholder:(italic text-sm text-secondary/75)", // placeholder:italic placeholder:text-sm placeholder:text-secondary/75
                        "outline-(~ 2 offset-0 transparent)", // outline outline-2 outline-offset-0 outline-transparent
                        "hover:outline-yellow !focus:outline-orange",
                        "transition-all",
                    )
                }
            />
        </div>
    }
}

上面的代码等效于

use yew::prelude::*;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <div id="app">
            <input
                class={
                    classes!(
                        "w72",
                        "px5",
                        "py.5",
                        "text-center",
                        "text-red",
                        "fw700",
                        "bg-green",
                        "rounded",
                        "border-1",
                        "border-blue/30",
                        "placeholder:italic",
                        "placeholder:text-sm",
                        "placeholder:text-secondary/75",
                        "outline",
                        "outline-2",
                        "outline-offset-0",
                        "outline-transparent",
                        "hover:outline-yellow",
                        "!focus:outline-orange",
                        "transition-all",
                    )
                }
            />
        </div>
    }
}

但更短！

.w72 {
  width: 18rem;
}
.border-1 {
  border-width: 1px;
  border-style: solid;
}
.border-blue\/30 {
  border-color: rgba(96, 165, 250, 0.3);
}
.rounded {
  border-radius: 0.25rem;
}
.bg-green {
  --un-bg-opacity: 1;
  background-color: rgba(74, 222, 128, var(--un-bg-opacity));
}
.p-x5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.p-y\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.text-center {
  text-align: center;
}
.placeholder\:text-sm::placeholder {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.fw700 {
  font-weight: 700;
}
.placeholder\:italic::placeholder {
  font-style: italic;
}
.text-red {
  --un-text-opacity: 1;
  color: rgba(248, 113, 113, var(--un-text-opacity));
}
.outline-2 {
  outline-width: 2px;
}
.\!focus\:outline-orange:focus {
  --un-outline-color-opacity: 1 !important;
  outline-color: rgba(251, 146, 60, var(--un-outline-color-opacity)) !important;
}
.hover\:outline-yellow:hover {
  --un-outline-color-opacity: 1;
  outline-color: rgba(250, 204, 21, var(--un-outline-color-opacity));
}
.outline-transparent {
  outline-color: transparent;
}
.outline-offset-0 {
  outline-offset: 0px;
}
.outline {
  outline-style: solid;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

全局使用 uno! 宏

#[macro_use]
extern crate yew_unocss_transformer;

使用Yew和UnoCSS

@unocss/cli 可用于生成 uno.css 文件，然后可以被 Trunk 的 index.html 文件导入。
还可以在 Trunk 的同时并行运行带有 UnoCSS 的 Vite。

许可协议

MIT 许可协议

版权所有 (c) 2022-至今 Kajetan Welc

在此特此授予任何人免费获得此软件及其相关文档文件（以下简称“软件”）的副本的权利，无限制地使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许将软件提供给他人，以便他们可以这样做，前提是遵守以下条件

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

软件按“原样”提供，不提供任何明示或暗示的保证，包括但不限于适销性、适用于特定目的和无侵权性保证。在任何情况下，作者或版权所有者不对任何索赔、损害或其他责任承担责任，无论是基于合同、侵权或其他法律行为，还是由于软件、软件的使用或其他方式产生的、与软件有关或与之相关的、或在使用软件或以其他方式处理软件的过程中产生的。