encre-css

使用 Rust 编写的，兼容 TailwindCSS 的以工具优先的 CSS 生成库

目录

• 关于工具优先 CSS 框架的简要介绍
• 入门
• 命令行界面
• 关于名称
• 许可证

关于工具优先 CSS 框架的简要介绍

传统上，每当您需要在网页上设置样式时，您会在专门的文件中编写 CSS，并使用 HTML 中的类应用规则，如下所示

<div class="notification">
  <div class="notification-header">
    <div class="app-icon"></div>
    A new Javascript library has been released!
  </div>
  <div class="notification-body">
    The library <code>react</code> has just been released, did you know it?
    It is <i>a JavaScript library for creating user interfaces</i>.
  </div>
  <div class="notification-footer">
    <a href="#" class="dismiss-button">Dismiss</a>
    <a href="#" class="try-button">Try it here!</a>
  </div>
</div>

然而，这种方式相当无聊，因为您需要考虑好的类名，并且需要在多个文件之间反复切换，这可以做得更好。工具优先 CSS 框架采用了一种新的方法，通过使用最小化和预定义的类名直接与其 CSS 规则内容相关联。然后，CSS 文件将被按需生成 （请参阅此处），这使得类非常灵活和可定制。这种方法让您可以快速原型化视觉 HTML 元素，并鼓励您使用您喜欢的网页框架将它们转换为组件。它还使构建响应式网站变得更容易，并迫使其更接近您的系统设计（如果您有的话）

<div class="w-128 text-md shadow-[1px_1px_10px_2px_#e5e7eb] rounded-xl">
  <div class="p-3 flex items-center">
    <div class="bg-blue-500 rounded-full w-5 h-5 mr-3"></div>
    A new Javascript library has been released!
  </div>
  <div class="p-6 pt-4">
    The library <code>react</code> has just been released, did you know it?
    It is <i>a JavaScript library for creating user interfaces</i>.
  </div>
  <div class="flex justify-between">
    <a href="#" class="p-3 text-rose-600">Dismiss</a>
    <a href="#" class="p-3 bg-blue-600 text-white rounded-br-xl rounded-tl-xl shadow shadow-blue-600">Try it here!</a>
  </div>
</div>

已经有很多工具优先框架，如 Tailwind CSS、Windi CSS、Twind 和 Uno CSS，但 encre-css 是独一无二的，因为它是用 Rust 编写的，并使用了一种新的架构，使其成为 最快的工具优先框架（根据此处基于 Uno CSS 的基准测试 的基准测试）。

入门

将 encre-css 添加到您的 Cargo.toml

[dependencies]
encre-css = "0.13.0"

生成样式需要两个步骤

• 您需要通过创建一个 Config 结构来 配置 CSS 生成。它可以通过使用 Config::from_file 读取一个 TOML 文件来创建，或者通过使用默认值 Config::default 来使用
• 然后，您需要使用 generate 函数根据某些来源 生成样式。此函数将扫描来源的内容，提取原子类，并为每个类生成所需的样式。

示例

use encre_css::Config;

let config = Config::default();
let css = encre_css::generate(
    [r#"<p class="w-auto bg-red-200 rounded-md">Hello world!</p>"#],
    &config,
);

assert!(css.expect("failed to generate the CSS").ends_with(r#"
.w-auto {
  width: auto;
}

.rounded-md {
  border-radius: 0.375rem;
}

.bg-red-200 {
  --en-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--en-bg-opacity));
}"#));

命令行界面

还提供了一个命令行界面。使用以下命令进行安装：

cargo install encre-css-cli

然后运行 encrecss --help 以获取使用说明。

插件

encre-css 在构建时考虑了模块化，因此可以编写或使用自定义插件。 了解更多

关于名称

encre 在法语中意为 ink。

许可证

encre-css 在 MIT许可证 下发布。