Similar to others here, I had major issues getting this to work, whether with or without strict mode. After doing a lot of performance tracing on type checking, it appears to come down to the CSS type in css-utils.d.ts. I made a couple modifications to stitches in order to support updating TypeScript, including patching for the issue in #1078.

The key change though for the performance problem, not requiring any change to my code, was to modify the unknown property type intersection in css-util.d.ts. This is the diff:

 		[K: string]: (
 			| number
 			| string
-			| CSS<Media, Theme, ThemeMap, Utils>
 			| {}
 			| undefined
+			| any
 		)

This completely resolved my performance problem, and I don’t think it will have significant negative impact on the developer experience. (NOTE: I’m using patch-package to apply this patch in my repo as we aren’t on yarn v2 yet)

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

@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.

Node v16.15.1 TypeScript v4.7.3

{ "strict": true }: (1.63s)

$ tsc --noEmit --diagnostics
Files:              930
Lines:           174142
Nodes:           530418
Identifiers:     157583
Symbols:         113758
Types:               84
Instantiations:       0
Memory used:    184270K
I/O read:         0.14s
I/O write:        0.00s
Parse time:       1.24s
Bind time:        0.39s
Check time:       0.00s
Emit time:        0.00s
Total time:       1.63s

{ "strict": false }: (153.53s)

$ tsc --noEmit --diagnostics
Files:              930
Lines:           174142
Nodes:           530418
Identifiers:     157583
Symbols:         550041
Types:           408833
Instantiations: 2300116
Memory used:    989374K
I/O read:         0.06s
I/O write:        0.00s
Parse time:       1.48s
Bind time:        0.41s
Check time:     151.64s
Emit time:        0.00s
Total time:     153.53s

FWIW, the project is here: https://github.com/jakejarvis/jarv.is

For anyone who’s reading this and is experiencing degraded types performance, Please comment the time it takes to build your project with and without setting "strict": true in tsconfig.json Also please include both the TS and Node versions

Oh my goodness, THANK YOU @andrewgeorgemitchell for this quick fix! 🙏

If it helps at all @hadihallak, my Stitches project was fine with TS 4.5, got very slow in 4.6, was working great again in 4.7.2 and slow again in 4.7.3 (before changing strict to true). Could just be my individual experience but maybe a clue lies somewhere in the latest changelog…? (To be fair this back-and-forth flakiness could also mean the problem is more on TypeScript’s side than here!)

https://github.com/microsoft/TypeScript/issues?q=milestone%3A"TypeScript+4.7.3"+

https://github.com/microsoft/TypeScript/compare/v4.7.2...v4.7.3

@andrewgeorgemitchell btw, really appreciate this detailed issue. super helpful 🙏