vanilla-extract 在 React 19 中仍需构建工具插件支持，其零运行时特性不变；必须配置对应插件（如 Vite、Webpack、esbuild），类名可安全用于 RSC，但需避免非纯函数调用。
React 19 本身不改变 vanilla-extract 的集成逻辑——它依然完全依赖构建时编译，和 React 版本无关。只要你用的是支持 css.ts 文件处理的构建工具（如 Vite、Webpack、esbuild），vanilla-extract 就能照常工作，生成零运行时 CSS。
vanilla-extract 在 React 19 中仍需构建工具插件
vanilla-extract 不是“在 React 里写样式”的运行时库，而是一套构建期样式系统。React 19 的 Action、useOptimistic、use 指令等新特性都不影响 .css.ts 文件的编译流程。关键点在于：你必须显式配置对应构建工具的插件，否则 style()、createTheme() 等调用根本不会被识别或执行。
- 用 Vite → 必须启用
@vanilla-extract/vite-plugin，否则import { container } from './styles.css.ts'会报模块解析失败 - 用 Webpack → 必须安装并注册
@vanilla-extract/webpack-plugin，不能只靠css-loader或MiniCssExtractPlugin - 用 esbuild → 必须加
@vanilla-extract/esbuild-plugin，否则.css.ts被当作普通 TS 模块，style()不会求值，CSS 也不会产出
React Server Components（RSC）中 class 名可安全传递
vanilla-extract 生成的类名（如 container_abc123）是字符串字面量，在 RSC 中可直接作为 className prop 传入客户端组件，无需任何序列化/反序列化。因为整个过程不涉及运行时计算，也不依赖 useState 或闭包上下文。
- 服务端组件中 import 并使用
container是完全合法的，它只是个静态字符串 - 不要在 RSC 中调用
styleVariants({})等带参数的函数——虽然语法上可行，但这类函数本意是用于客户端条件渲染，且其返回值在服务端无法做类型推导保障 - 若需响应式变体（如暗色模式），应通过
createTheme+ CSS 变量方案，在服务端注入主题类，客户端用prefers-color-scheme切换，而非在 RSC 中动态生成类名
identifiers 配置影响开发体验，但不改变零运行时本质
React 19 的新调试能力（如 React DevTools 的组件层级高亮）依赖可读的类名。vanilla-extract 的 identifiers 选项控制类名生成策略，但它只影响产物可读性，不影响零运行时这一核心属性。
立即学习“前端免费学习笔记（深入）”；
-
identifiers: 'debug'→ 生成类似Button_root__button__dev的名称，便于定位样式来源，仅用于开发环境 -
identifiers: 'short'→ 生产环境默认，生成哈希前缀（如root_a1b2c3），体积更小，仍保持局部作用域 - 切勿在生产环境设为
'named'（如果插件支持）——这会导致类名冲突风险上升，且破坏 vanilla-extract 的隔离设计初衷
真正容易被忽略的是：vanilla-extract 的“零运行时”只保证样式代码不进入 JS bundle，但如果你在 .css.ts 中意外引入了非纯函数（比如调用了 localStorage.getItem 或 Date.now()），构建会失败或行为不可预测——因为这些模块是在 Node.js 环境下被求值的，不是浏览器。所以所有样式定义必须是纯声明式的。
