importing types from @storybook/react breaks emotion css prop types

Describe the bug For some odd reason, whenever types are imported from @storybook/react/types-6-0 or @storybook/react, the type definition for the css prop used in emotion will break and throw a Typescript error.

To Reproduce Steps to reproduce the behavior:

In the provided sandbox repo:

1. Go to src/stories/Button.stories.tsx 2.Uncomment import from @storybook/react
2. Open Button.tsx
3. The following error will show up

Type ‘({ size }: any) => SerializedStyles’ is not assignable to type ‘Interpolation<undefined>’. Type ‘({ size }: any) => SerializedStyles’ is not assignable to type ‘ObjectInterpolation<undefined>’. Index signature is missing in type ‘({ size }: any) => SerializedStyles’. TS2322

1. Comment out the import from @storybook/react
2. The errors disappear.

Expected behavior the css prop should be able to take an array of functions that return SerializedStyles, without getting any Typescript error.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets Reproduce Repo

System Environment Info: System: OS: Linux 5.8 Pop!_OS 20.10 CPU: (4) x64 Intel® Core™ i5-4590 CPU @ 3.30GHz Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm Browsers: Chrome: 87.0.4280.66 Firefox: 84.0 npmPackages: @storybook/addon-actions: ^6.1.11 => 6.1.11 @storybook/addon-essentials: ^6.1.11 => 6.1.11 @storybook/addon-links: ^6.1.11 => 6.1.11 @storybook/node-logger: ^6.1.11 => 6.1.11 @storybook/preset-create-react-app: ^3.1.5 => 3.1.5 @storybook/react: ^6.1.11 => 6.1.11

[disintegrator]

If your project depends on emotion 11 AND storybook, you’ll likely encounter a type conflict. This happens because the typescript compiler will, at a certain point, while compiling/type-checking your files, load @emotion/core as a transitive dependency via @storybook/theming, @storybook/addon-knobs, etc… (see yarn why @emotion/core). Now, @emotion/core declares a global type declaration for the css prop (see here). This declaration is incompatible when it encounters the css props in your codebase that rely on emotion 11’s definition of that same prop. To overcome this conflict in the css prop type declaration you can create a stub module in your codebase called emotion-core-stub.ts:

// emotion-core-stub.ts
export {}

and in tsconfig.json

{
  "compilerOptions": {
    // ... all your existing compiler options here ...

    "paths": {
      "@emotion/core": ["./emotion-core-stub.ts"]
    }
  }
}

This will prevent the conflict introduced by having emotion 10 and 11 in your project’s dependency tree.

[csantos1113]

I don’t use @emotion in my codebase, but I see @emotion/core is a dependency of @storybook/ui an @storybook/theming which makes sense. But what does not make sense is to have css prop type being added to react interface (From here: https://github.com/emotion-js/emotion/blob/v10.0.1/packages/core/types/index.d.ts#L83-L99)

This is problematic when you use a different styled-library, because you’ll get a Types of property 'css' are incompatible.

Question: How can I ignore those types from my TS project?

Thanks