vanilla-extract：无运行时的TypeScript样式表库

vanilla-extract：无运行时的TypeScript样式表库

vanilla-extractZero-runtime Stylesheets-in-TypeScript项目地址:https://gitcode.com/gh_mirrors/va/vanilla-extract

在一个注重性能和开发效率的时代，vanilla-extract 是一个创新性的开源库，它允许你在 TypeScript 或 JavaScript 中编写样式表，并在构建时生成静态 CSS 文件。这可以被看作是 "CSS Modules-in-TypeScript" 的增强版，提供了更多强大的功能。

项目介绍

vanilla-extract 革新了CSS编写方式。它的核心理念是在保持CSS简洁性的同时，引入类型安全性和局部作用域的概念。通过这个库，你可以使用.css.ts文件编写样式，它们会被编译成静态CSS，并且在运行时无任何额外负担。

技术分析

vanilla-extract 提供了以下关键技术特性：

1. 静态生成 - 类似于 Sass 和 Less，所有样式都在构建时处理，不会出现在你的最终代码中。
2. ** TypeScript 支持** - 利用 CSSType 实现类型安全的样式编写。
3. 局部作用域 - 类似于 CSS Modules，但还支持CSS变量、关键帧动画(@keyframes)和字体定义(@font-face)的局部作用域。
4. 主题系统 - 具有高级主题功能，支持并行主题，无需全局变量。
5. 动态计算工具 - 用于生成基于变量的 calc 表达式。

应用场景

无论你是纯静态站点开发者，还是使用React、Vue等前端框架，甚至是无框架开发，vanilla-extract 都能很好地融入到你的开发流程中。它特别适用于需要高可复用性和高性能的项目，同时提供了一套完整的主题切换解决方案。

项目特点

1. 零运行时 - 在生产环境中，vanilla-extract 不会增加额外的运行时开销。
2. 简单抽象 - 它是对标准 CSS 的最小程度抽象，易于学习和上手。
3. 完全本地化 - 类名和样式规则都具有本地作用域，避免了命名冲突问题。
4. 可选的开发模式 - 为了测试和开发，还有一个可选的运行时版本。
5. 动态主题 - 可以通过API实现运行时的主题切换。

想快速体验？CodeSandbox 上有一个示例等待你探索。

此外，vanilla-extract 还推出了一个名为 Sprinkles 的配套框架，这是一个零运行时的原子 CSS 框架，进一步提升了风格重用和组件设计的层次。

最后，我们感谢 Nathan Nam Tran 的 css-in-js-loader，它是 treat（vanilla-extract 的前身）的灵感来源，也感谢 Stitches 带来的关于 CSS 变量的启示。

vanilla-extract 遵循 MIT 许可协议，欢迎大家参与贡献和使用！

开始你的无运行时样式之旅吧，vanilla-extract 将是你构建高效、整洁代码的理想伙伴！

vanilla-extractZero-runtime Stylesheets-in-TypeScript项目地址:https://gitcode.com/gh_mirrors/va/vanilla-extract