vanilla-extract 用于以 TypeScript 编写样式，并在构建时静态提取为 CSS，实现零运行时开销，同时获得类型安全。
主要能力：使用 style 定义基础样式，支持伪选择器、复杂选择器、媒体查询与容器查询；通过 createVar 定义 CSS 变量，fallbackVar 提供回退值；styleVariants 定义样式变体；globalStyle 定义全局样式；createTheme 与 createThemeContract 支持主题与多主题切换；recipes 包提供带变体和 compoundVariants 的组件样式配方，并可提取 RecipeVariants 类型；sprinkles 包用于构建响应式原子化工具类。
安装与用法：
npm install @vanilla-extract/css npm install @vanilla-extract/vite-plugin npm install @vanilla-extract/next-plugin
Vite 配置：
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; import { defineConfig } from 'vite';
export default defineConfig({ plugins: [vanillaExtractPlugin()], });
Next.js 使用 createVanillaExtractPlugin() 包装配置。样式文件需使用 .css.ts 扩展名，导出 style 后在组件中以 className 引用。recipes 与 sprinkles 需分别安装对应包。
适用场景：需要类型安全 CSS、设计系统基元、主题切换和组件变体的项目。限制：未提供具体价格、性能数据或平台差异等细节。