CSS variables not compiled by Storybook

[mellis481]

Description

I have a tsdx app with Storybook (generated using the CLI) which I've integrated Chakra (a popular widget library) into and I'm seeing CSS variables not being compiled. eg.

When I compare this to working Chakra examples, I see that the CSS variables are successfully compiled and available at run-time. eg.

Note that I tried to integrate Chakra into a tsdx react project and I did NOT see this issue. It's only when Chakra is integrated into a react-with-storybook tsdx project.

Link to Reproduction

https://github.com/mellis481/chakra-test

Steps to reproduce

1. Clone repo.
2. Run npm i.
3. Run npm run storybook.
4. See error

Your environment

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 3.11 GB / 15.85 GB
  Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.75
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.29)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1
    typescript: ^4.6.3 => 4.6.3

[mellis481]

For posterity, it looks like adding the following webpackFinal storybook configuration (.storybook/main.js) fixed it:

const path = require('path');

const toPath = (_path) => path.join(process.cwd(), _path);

module.exports = {
  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
  typescript: {
    check: true, // type-check stories during Storybook build
  },
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': toPath('node_modules/@emotion/react'),
        },
      },
    };
  },
};