使用 TypeScript 编写 CSS 样式带来了类型安全性，确保在编译时发现错误，并在编码过程中提供样式提示。常用样式 API 包括 @vanilla-extract/css 库的 style() 方法，样式文件以 .css.ts 结尾，属性名采用驼峰式书写。在 App 组件中导入样式文件并为标签的 className 属性赋值，这种方式与其它 CSS-in-...
CSS-in-JS 技术的又一匹黑马，零运行时且支持 TS！
Vanilla Extract 是一个新颖的 CSS-in-JS 库，旨在编写 CSS 样式文件。在 2021 年开源，并在年度全球 CSS 报告中以满意度排名榜首。此库在框架方面十分友好，不绑定于任何特定的 JavaScript 框架，如 React、Vue、Angular 等，但需确保构建工具支持它。目前，它已与主流的前端构建工具集成，包括 webpack、esbuild、Vite 等。若在 Vite 中使用，需安装 @vanilla-extract/css、@vanilla-extract/vite-plugin 两个库，其中 @vanilla-extract/css 为样式开发的核心库。在 Vite 配置中添加 vanillaExtractPlugin 插件，用于在构建时编译和处理 CSS，编写样式文件时需以 .css.ts 结尾。
Vanilla Extract 的亮点在于它能在编译时生成 CSS 样式文件，实现零运行时，并支持 TypeScript，这与其它 CSS-in-JS 解决方案如 Styled Components 和 Emotion 有所不同。使用 TypeScript 编写 CSS 样式带来了类型安全性，确保在编译时发现错误，并在编码过程中提供样式提示。常用样式 API 包括 @vanilla-extract/css 库的 style() 方法，样式文件以 .css.ts 结尾，属性名采用驼峰式书写。在 App 组件中导入样式文件并为标签的 className 属性赋值，这种方式与其它 CSS-in-JS 库有所区别。Vanilla Extract 支持伪类选择器、子选择器、媒体查询、@supports 以及引用 style() 函数创建的其他类。为了提高可维护性，每个样式块只能针对单个元素，但提供了 GlobalStyle() API 用于全局范围内的子节点定位。Vanilla Extract 全局样式不支持嵌套，需调用 globalStyle() 函数多次设置样式。
CSS 变量（CSS 自定义属性）在 Vanilla Extract 中得到了广泛应用，允许在样式文件中重复使用，并在样式块内限定 CSS 变量的范围。对于存在多个主题的项目，可使用 createGlobalThemeContract() 方法创建主题契约，并通过 createTheme() 方法创建主题。应用主题时，将创建的主题类名应用于 HTML 标签的 className 中，通过设置此类名实现主题的切换。在组件样式中使用声明好的主题变量时，需通过 vars 导出的变量获取 CSS 变量的值。
Vanilla Extract 提供了灵活的样式管理和主题支持，其编译时生成 CSS 的机制使其在性能上优于运行时方案。尽管在使用率上尚未与市场领导者相匹敌，但在 2021 年全球 CSS 满意度调查中名列前茅，是值得关注的技术。除了本文介绍的内容，更多信息可参考官方文档和作者的项目示例，以便深入了解其特性和应用。2024-08-16
