Vanilla Extract 中 Recipes 生成类名不一致问题的分析与解决方案

问题背景

在使用 Vanilla Extract 的 Recipes 功能时，开发者可能会遇到一个常见问题：CSS 文件中生成的类名与浏览器中实际应用的类名不一致。这种差异会导致全局样式（globalStyles）无法正确匹配目标元素，从而影响样式应用效果。

问题本质

这种现象的根本原因在于 Recipes 函数返回的是变体（variants）中 style 调用创建的类名，而 container.classNames.variants 中引用的则是 Recipes 自身生成的类名。这是 Vanilla Extract 的预期行为，因为变体中可以包含多种内容，例如来自 Sprinkles 的类名列表。

解决方案

方案一：分离变体样式

第一种解决方案是将变体样式分离出来，直接引用这些样式而非通过 Recipes 的类名：

const red = style({
  color: "red"
});

const blue = style({
  color: "blue"
});

export const container = recipe({
  base: {},
  variants: {
    textColor: {
      red,
      blue
    }
  }
});

globalStyle(`.${red} h1`, {
  color: "pink"
});

这种方法虽然有效，但代码略显冗长，特别是当变体较多时。

方案二：内联定义变体样式

更简洁的解决方案是直接在变体中内联定义样式规则，而不使用 style 函数：

export const container = recipe({
  base: {},
  variants: {
    textColor: {
      red: {
        color: "red"
      },
      blue: {
        color: "blue"
      }
    }
  }
});

globalStyle(`.${container.classNames.variants.textColor.red} h1`, {
  color: "pink"
});

这种方式让 Recipes 自动创建样式，同时保持了类名引用的正确性，代码也更加简洁。

最佳实践建议

1. 简单样式优先使用内联定义：对于简单的样式规则，直接在变体中内联定义是最简洁高效的方式。

2. 复杂样式考虑分离定义：当变体样式较为复杂或需要复用多个地方时，可以考虑分离定义样式。

3. 注意类名引用的一致性：在使用全局样式时，确保引用的类名与最终生成的类名一致，避免样式失效。

4. 理解 Recipes 的工作原理：了解 Recipes 如何处理变体样式有助于更好地组织代码结构。

通过理解这些概念和解决方案，开发者可以更有效地使用 Vanilla Extract 的 Recipes 功能，避免类名不一致带来的样式问题。