无样式

另一个提供Rust中作用域CSS样式的库。

这个库主要针对 leptos 制作，但应该没有理由它不能与yew 等其他框架一起工作。

特性

• 作用域CSS样式
  • 支持所有（我能想到的）CSS选择器类型
• 基本的CSS linting
  • 未终止的引号
  • 属性值缺失
  • 属性名中的无效字符
    • 包括emoji支持，自 规范 起有效
  • 缺少分号；

安装

$ 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

已知问题/待办事项

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