Unstyled

另一个提供 Rust 中作用域内 CSS 定制的库。

这个库主要考虑了 leptos，但理论上它应该可以与其他框架（如 yew）一起工作。

功能

• 作用域内 CSS 定制
  • 支持所有（我能想到的）CSS 选择器类型
• 基本的 CSS 检查
  • 未闭合引号
  • 缺少属性值
  • 属性名中的无效字符
    • 自 规范 起支持表情符号
  • 缺少分号；

安装

$ cargo add unstyled

与 leptos 一起使用

use leptos::*;

#[component]
pub fn MyUnstyledComponent(cx: Scope) -> impl IntoView {
    let class_name = unstyled::style! {"
        @keyframes rainbow-text {
            0% {
                color: hsl(0deg 100% 50%);
            }
        
            33% {
                color: hsl(120deg 100% 50%);
            }
        
            66% {
                color: hsl(240deg 100% 50%);
            }
        
            100% {
                color: hsl(360deg 100% 50%);
            }
        }

        .title {
            animation: rainbow-text infinite 1s;
        }
    "};

    view! {cx, class = class_name,
        <h1 class="title">"Style the, cruel, Unstyled world!"</h1>
    }
}

工作原理

"随机"/作用域类是通过哈希 CSS 样式生成的。它有效，因为虽然相同的样式会得到相同的类，但毕竟它们是相同的样式，所以没问题。它还可以减小重复样式的总 CSS 大小，因为这些样式不会重复输出。

此外，这使得获取 ssr & csr 渲染的 CSS/组件的作用域类成为可能，因为作用域名称是确定的。

感谢

这些项目激励我深入研究这个主题，即使这个库不适合您的用例，您也可能想看看它们！

• abishekatp/stylers
• eboody/styled

已知问题 / TODOs

• 到目前为止，伪选择器（如 :not()）内的选择器没有作用域！
• 无法定义非作用域样式
• 存储/写入合并的 CSS 现在非常糟糕