Styling children with recipes

[danequin]

Hi all,

I'm trying to use a recipe for my button styles, but I'm having an issue styling some children.

I have the following code...

globalStyle(`${buttonStyles()} i`, {
  ...
});

globalStyle(`${buttonStyles({ size: "medium" })} i`, {
  ...
});

The output I get is...

.Button__tgxw0o0 i {
  ...
}
.Button__tgxw0o0 .Button_size_medium__tgxw0oa i {
  ...
}

The first one is working as expected but the second one doesn't as it's prepending the base class for some reason. My recipe classes output just fine, like so...

.Button__tgxw0o0 {
  ...
}

.Button_size_medium__tgxw0oa {
  ...
}

Am I doing something wrong here or could this be a bug?

Thanks in advance.

[danequin]

Of course this is happening 🤦‍♂️

globalStyle(`${buttonStyles({ size: "medium" }).split(" ")[1]} i`, {
  ...
});

[askoufis]

For anyone that finds this discussion in the future, recipe class names are now directly accessible from the recipe function.