styleVariants inside a recipe leading to counter-intuitive results

[Dremora]

I wanted to share a peculiar gotcha I've discovered: using styleVariants inside a recipe (or anywhere that's not the top level of a file) is totally possible, but can lead to unexpected results.

Consider the following code:

import { styleVariants } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";

const colors = {
  red: "#f00",
  green: "#0f0",
  blue: "#00f"
};

export const styleWithoutVariants = recipe({
  base: {
    backgroundColor: colors.green
  },
  variants: {
    color: {
      red: { backgroundColor: colors.red },
      green: { backgroundColor: colors.green },
      blue: { backgroundColor: colors.blue }
    }
  }
});

export const styleWithVariants = recipe({
  base: {
    backgroundColor: colors.green
  },
  variants: {
    color: styleVariants(colors, (color) => ({
      backgroundColor: color
    }))
  }
});

The two recipes seem to be functionally equivalent: both provide a style with green background color, and and ability to override it.

However, styleWithVariants will produce unexpected results: using variants will not work, the color will always be green.

See this Codesandbox.

This might be counter-intuitive, but can be explained by the fact that vanilla-extract generates CSS in order of TypeScript evaluation, and styleVariants will actually be evaluated before recipe gets called.

Do you have any other similar examples you've faced where v-e didn't behave like you'd expect, due to its architectural constrains? Perhaps custom ESLint rules could help here.

Finally, I wonder whether it's possible to overcome this limitation within vanilla-extract (without having to parse TypeScript's AST).