Cannot import globalStyles in Storybook preview.jsx

[kazuyaseki]

Bug report

I'm sorry if this is a dumb question, but when I try to use globalStyles of stitches in storybook, it throws an error as follows

Describe the bug

TypeError: (0 , _src_styles_reset_css__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
    at decorators (http://localhost:6006/main.iframe.bundle.js:32:68)
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:4064:21
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:19420:12
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:19478:12
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:4094:20
    at unboundStoryFn (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:19120:12)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:77520:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:81284:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:82797:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-671d6f.iframe.bundle.js:88636:14)

To Reproduce

I have preview.jsx like this

import resetStyles from "../src/styles/reset.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story) => {
    resetStyles();
    return <Story />;
  },
];

where resetStyles are defined as follows

import { globalCss } from './stitches.config';

export const resetStyles = globalCss({
  ...
});

Expected behavior

I want to know how to apply globalStyles of stitches to storybook without error

Screenshots

System information

• OS: [macOS]
• Browser (if applies) [chrome]
• Version of Stitches: [1.2.11]
• Version of Node.js: [v14.19.3]

[ygorluiz]

@kazuyaseki import it from stitches.config

import {globalStyles } from "../stitches.config"

export const decorators = [
    (Story) => {
        globalStyles();
        return (
            <div>
                <Story />
            </div>
        );
    },
];

stitches.config.ts

export const globalStyles = globalCss({ ... })

[kazuyaseki]

It worked thanks!!