"Type instantiation is excessively deep and possibly infinite" Typescript error when used with styled-components css prop

[matt-winfield]

🐛 Bug Report

Using react-spring in conjunction with styled-components css prop in Typescript causes a "Type instantiation is excessively deep and possibly infinite" compilation error.

There are several ways to enable typescript support for the css prop from styled-components in typescript listed here: DefinitelyTyped/DefinitelyTyped#31245 all of which cause this error.

To Reproduce

Steps to reproduce the behavior:

1. Create a typescript react app with npx create-react-app react-spring-css-prop-error --template typescript
2. Add react-spring, styled-components and types: yarn add react-spring styled-components @types/styled-components
3. Add reference to css prop types in App.tsx: /// <reference types="styled-components/cssprop" />
4. Attempt to use animated compenent (e.g. animated.div) in App component

Expected behavior

<animated.div></animated.div> should have no compilation errors

Link to repro

CodeSandbox repro

Environment

• react-spring v9.1.2
• react v17.0.2
• styled-components v5.3.0
• '@types/styled-components` v5.1.9

[joshuaellis]

I can't find a link to what the css prop does with styled-components do you have a link?

[matt-winfield]

I can't find a link to what the css prop does with styled-components do you have a link?

https://styled-components.com/docs/api#css-prop

It allows directly applying styles to an element/component without having to create a wrapper component for it.

(The actual usage of the prop isn't shown in the reproduction steps as using it isn't required to cause the error, it's only importing the types for it that cause this issue)

[joshuaellis]

Hm. I'm not sure this is an issue with our library? It appears to be a known issue – microsoft/TypeScript#34933

Unless you've done some research into the issue to be certain it is an issue with react-spring?

[matt-winfield]

Hm. I'm not sure this is an issue with our library? It appears to be a known issue – microsoft/TypeScript#34933

Unless you've done some research into the issue to be certain it is an issue with react-spring?

I looked at that issue before posting here, it's obviously related but given that this issue only happens with the two libraries combined (if you take away either one both work fine individually) I'm not sure if it's the fault of the TypeScript compiler. Seems these 2 libraries conflict for some reason.

Perhaps I should raise this in styled-components instead, they may be able to fix the issue more easliy then in this library.

[joshuaellis]

Yeah maybe, I don't think the issue is particularly easy to solve, but they might have a better idea, it doesn't happen when using regular styled-components so it must be some way the css prop works...

[brancusi]

Any work arounds on this one? Hitting the same issue.

[joshuaellis]

@brancusi see my comment above, it only happens with the css prop of styled-components and they've not replied to the issue posted there, you should try prod them 👍🏼

[joshburgess]

Also running into the same issue when attempting to use any of the animated components from react-spring in a project which has the implicit css prop enabled (via babel-plugin-styled-components). Unfortunately, it does not matter whether or not you are actually using the css prop on any of the animated components. Merely the existence of babel-plugin-styled-components causes this problem. :/

[mandyMooreFan]

@brancusi The work around I found currently was to just wrap the animated.div and reference that variable:

const AnimatedDiv = styled(animated.div)``;

    "@types/styled-components": "5.1.14",
    "react-spring": "9.2.4",
    "typescript": "4.4.2",