Theme values gets stripped down

[Ptichi]

We're using themes according to styled-system theme specification: https://styled-system.com/theme-specification#scale-aliases

For example, we define fields like this, which combines numeric indexes with string keys as aliases:

theme.fontSizes = ['12', '16,' '20'];
theme.fontSizes.sm = theme.fontSizes[0];
theme.fontSizes.md = theme.fontSizes[1];
theme.fontSizes.lg = theme.fontSizes[2];

This works in regular usages, but on Storybook (with the addon) the aliases keys are stripped down and all we're getting is the numeric indexes:

['12', '16,' '20'];

When debugging, I saw that initially, we have those aliases, but on rerender (on the 2nd hit of the debugger, which occurs immediately) the aliases disappear.

Any idea why this is happening?

[usulpro]

@Ptichi I didn't clearly get the problem. ['12', '16,' '20']; - isn't this what you expected to get?
Try to consider that the theme object you see in the theme panel is serialized when passing between theme provider and panel. You can lost some fields on serialization. In general, the best way to solve the issues like this is to pass to addon only a plain JS object and then reconstruct a theme via a custom providerFn function. See https://github.com/react-theming/storybook-addon#using-with-material-ui example

[Ptichi]

@usulpro
The serialization is probably causing those fields to disappear.
I was able to fix that by providing a providerFn as you suggested.
Thanks!