Compiling Stitches without "strict": true, causes massive performance issues

Bug report

Describe the bug

When compiling Stitches in a TS environment without "strict": true in tsconfig.json the compile time will jump from a few seconds to multiple minutes (~200 seconds).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1 Clone Repo

• git clone [e-mail]:andrewgeorgemitchell/stitches-strict-repro.git

2 Install deps

• yarn install

3 Run TS compiler (will take ~160-200 seconds)

• yarn tsc

4 Enable strict mode in tsconfig.json line 10

• "strict": true,

5 Run TS compiler (will take ~4 seconds)

• yarn tsc

Expected behavior

TS build should not take ~200 seconds

Screenshots

Screen shot of slow compile (169.41s): ('strict': false)

Screen shot of normal compile (4.00s): ('strict': true)

System information

• OS: [macOS]
• Browser (if applies) [N/A]
• Version of Stitches: [1.2.8]
• Version of Node.js: [16.x]
• Version of Typescript: [4.6.x, 4.7.x] (tested both)

Additional context

Possible Cause & Interesting observation

The issue when not in strict mode seems to be that Typescript spends a large amount of time comparing CSS objects to each other, you can see this behaviour for yourself by:

• commenting out line 71 in src/components/Text/Text.tsx
• uncommenting line 72 in src/components/Text/Text.tsx

[hadihallak]

Typescript is the gift that keeps on giving 😄 I remember fixing a similar issue about a year ago. Thanks for reporting it.

[andrewgeorgemitchell]

@hadihallak Glad I could help/finally figured this one out 👍 We are loving Stitches as we use it to build out our design-system @ Drift so just let me know if there is anything I can do to help.

One more thing that just popped into my head that may or may not be relevant is that in the reproduction repo I only have 1 component which uses the line:

css={css}

While in the design-system this reproduction repo is based on we have a lot more components and yet when looking at the tsc --generateTrace trace its pretty obvious that it only slows down the first time it runs into

css={css}

and when it runs subsequent times it finishes them in seconds, so yeah just further evidence I guess that something strange is happening with typescript and comparing those types.