Is there better way to use selector with recipe

[jiwon79]

Current Situation

At the first, I use selector with globalStyle following way.

export const container = style({
  display: 'flex',
  gap: 8,
});

globalStyle(`${container}:hover svg`, {
  display: 'block',
});

I want show svg when hover container. So it is work well. However it has a problem after changing style to recipe. Following is the first code after chaning recipe.

export const container = recipe({
  base: {
    display: 'flex',
    gap: 8,
  },
  variants: {
    size: {
      large: {
        padding: '0 20px',
      },
      medium: {
        padding: '0 13px',
      },
      small: {
        padding: '0 8px',
      },
    },
  },
  defaultVariants: {
    size: 'medium',
  },
});

globalStyle(`${container()}:hover svg`, {
  display: 'block',
});

Because the result is .test_aaa .test_size_medium_aaa:hover svg.

Workaround

I want .test_aaa:hover svg selector in global style. So I solve this problem with following code.

globalStyle(`${container().splig(' ')[0]}:hover svg`, {
  display: 'block',
});

but I feel it is not best way.

Feature Suggestion

I think other way to use selector.

globalStyle(`${container.origin}:hover svg`, {
  display: 'block',
});

It is just example. Is there better way to use selector with recipe?

[Niznikr]

https://vanilla-extract.style/documentation/packages/recipes/#recipe-class-name-selection

[jiwon79]

Oh, I missed it in the document. Thanks so much for letting me know.