Function in theme break CSS properties

[mikaelkarlsson-se]

Hello there! 👋
I have a couple of functions in my theme and since installing this addon they unfortunately do not work within the Storybook context. My guess is that the addon can't handle functions and they are therefore not executed, in the end resulting in the CSS properties using the functions to be removed.
As example, one of my functions is theme.spacing() that is used to calculate values for paddings, margins etc but those CSS properties are no longer generated.

An example is my Button component that lack a gap property, resulting in no space between the text and arrow icon:

// Some of the button styles
const buttonWithIcon = (theme: Theme) => css`
    display: grid;
    grid-auto-flow: column;
    gap: ${theme.spacing(2)}; // Works just fine then the addon isn't active
    justify-content: space-between;
    align-items: center;

// Simplified theme
const theme = {
  ...someProperties,
  spacing(factor) { return `${factor * 4}px` }
}

// preview.js in SB
const providerFn = ({ theme, children }) => (
    <ThemeProvider theme={theme}>
        {children}
    </ThemeProvider>
);

export const decorators = [withThemes(null, [{ name: "Default theme", ...defaultTheme }], { providerFn })];

I'm using SB 6.5 (still in alpha release), Emotion 11 and v1.1.5 of this addon.
I've tried to create a Codesandbox but not yet succeeded, will try to get back to you with one.

[usulpro]

Hey @mikaelkarlsson-se
Thanks for sharing this!

The reason why you have issues with functions in your theme is that a theme object is passed to addon panel via postmessage and therefore should be serialized. The best way to solve this is to separate theme data and functions when you pass it to addon and concatenate back when you wrap your components.
Try to do something like this:

// Simplified theme
const myTheme = {
  ...someProperties,
  functionA(factor) { return `${factor * 4}px` },
  functionB(factor) { return `${factor * 4}px` },
}

const { functionA, functionB, ...defaultTheme } = myTheme;

const providerFn = ({ theme, children }) => (
    <ThemeProvider theme={{...theme, functionA, functionB}}>
        {children}
    </ThemeProvider>
);

export const decorators = [withThemes(null, [{ name: "Default theme", ...defaultTheme }], { providerFn })];

This way you still be able to see and edit other theme values in the addon panel and bypass functions to your components directly

[mikaelkarlsson-se]

Thanks @usulpro , that works great! 🎉 🤝