Not working with styled-components

[henrycity]

I tried to use this addon with ThemeProvider from styled-components and it didn't work.

const SpacingContainer = styled.div(({ theme }) => {
  console.log('theme', theme)
  return css`
    padding: ${theme.spacing.xs}rem;
  `
})

export default {
  title: 'Design Tokens',
}

const ThemeSpacing = () => <SpacingContainer />

When Storybook renders this component, it works fine and I can see the whole theme object. However, when I pressed START ALL in the Performance plugin, I could see in the log that the theme object was empty and there were only errors in the Performance addon console.

[danieldelcore]

Hey @henrycity, are there any error logs or similar that you could share with us to help debug this issue?

My first thought was that it might be because styled-components server side rendering doesn't work context without some setup.

Since this plug-in renders the stories to a string (amongst other things), styled-components might be blowing up as a result.

[henrycity]

I just tested it again and I luckily couldn't reproduce the issue. So I might have set it up wrong. I will re-open this if it occurs again.