@storybook/theming causes type errors during tsc

[backbone87]

Describe the bug
Ok this is a fun one. Basically tsc complains about missing react typings, when trying to use create of @storybook/theming.
This is because:

• @storybook/theming imports @emotion/*
• which in turn imports react
• which in turn requires @types/react
• which would have to be installed manually
• which would then declare global JSX namespace
• which would then conflict with the JSX namespace of Vue

To Reproduce

• create Vue project with TS support via Vue CLI 3
• Storybook via vue-cli-plugin-storybook (TS conversion and config must be done by hand)
• Vue JSX/TSX typings -> https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/generator/template/src/shims-tsx.d.ts
• Create theme:

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Storybook',
});

• npx tsc

Expected behavior
Use create from @storybook/theming without requiring react typings and therefore no JSX namespace conflicts.

System:

• OS: any
• Device: any
• Browser: any
• Framework: vue
• Version: 5

Additional context
Workaround:

• dont use storybook theming
• or dont use vue jsx/tsx
• or run tsc with --skipLibCheck

Solution:

• provide a create theme function/module that does not use @emotion/*
• the only stuff that create requires from @emotion/* is import { css, keyframes } from '@emotion/core'; in animation.ts)
• where css type doesnt require react typings (so no problem here), but is imported from @emotion/core types, which imports react typings for other stuff (this is a problem) -> import css from @emotion/css
• where keyframes type doesnt require react typings (so no problem here), but its type is declared in @emotion/core type declaration file that imports react typings, but actually dont use react typings for keyframes itself (but for other stuff) -> ask for upstream change in emotion (which would maybe require some reorganisation of types/exports on their part) or reimplement/c&p keyframes into @storybook/theming or dont use keyframes during create

[github-actions]

Automention: Hey @domyen @elevatebart @emilio-martinez @gaetanmaisse @kroeder @pksunkara, you've been tagged! Can you give a hand here?

[ndelangen]

@backbone87 try:

import { create } from '@storybook/theming/create';

Does that solve the issue?

[backbone87]

@ndelangen no, see section "solution" in the opening post

[backbone87]

still relevant

[selcet]

Still, very need full custom styling for Storybook.