Use Recipe in globalStyle for body

[bernhardw]

Hello, is there a way to apply a recipe to the body?

I have a font() recipe which I would like to use on the body element:

globalStyle('body', {
  margin: 0,
  font({ size: 'medium' }) // doesn't work
})

[AndrewLeedham]

@bernhardw recipe runtime functions return a string of the generated class name. So there is no way to extract the style rules from it. You could do something like this:

const fontStyles = {
  base: {
    lineHeight: '1.5em'
  },
  variants: {
    size: {
      medium: {
        fontSize: '1rem'
      }
    }
  }
}

export const font = recipe(fontStyles);

globalStyle('body', {
  margin: 0,
  ...fontStyles.base,
  ...fontStyles.variants.size.medium
});

You would likely need to play around with the types to get better intellisense. But as far as I am aware there is no native way to do this.