Emotion 10 greatly increases number of types during TypeScript compilation

I am opening this to start a discussion, I plan on debugging it and trying to figure out why but upgrading to emotion 10 increased our project compilation time from ~30 seconds to ~70seconds. Any ideas/help would be great though.

Got these stats by just running yarn tsc --diagnostics

Current behavior: Emotion 9:

Files:          2237
Lines:        308745
Nodes:       1049322
Identifiers:  331530
Symbols:     1031128
Types:        232302
Memory used: 750896K
I/O read:      1.47s
I/O write:     0.00s
Parse time:    5.07s
Bind time:     1.42s
Check time:   22.07s
Emit time:     0.00s
Total time:   28.55s

Emotion 10:

Files:           2246
Lines:         313024
Nodes:        1056772
Identifiers:   333322
Symbols:      1393179
Types:         852685
Memory used: 1185914K
I/O read:       1.94s
I/O write:      0.00s
Parse time:     5.67s
Bind time:      1.34s
Check time:    52.39s
Emit time:      0.00s
Total time:    59.40s

To reproduce:

I wanted to rule out our codebase, so have created a repo project at https://github.com/JakeGinnivan/emotion-types-sandbox

Emotion 10, with 1 styled component: https://github.com/JakeGinnivan/emotion-types-sandbox

Files:           110
Lines:         84080
Nodes:        285703
Identifiers:   99654
Symbols:       67179
Types:         11015
Memory used: 115850K
I/O read:      0.08s
I/O write:     0.00s
Parse time:    0.97s
Bind time:     0.45s
Check time:    0.68s
Emit time:     0.00s
Total time:    2.09s

Emotion 9 https://github.com/JakeGinnivan/emotion-types-sandbox/tree/emotion9

Files:           108
Lines:         83784
Nodes:        284068
Identifiers:   99089
Symbols:       63864
Types:          2793
Memory used: 111337K
I/O read:      0.10s
I/O write:     0.00s
Parse time:    0.92s
Bind time:     0.35s
Check time:    0.18s
Emit time:     0.00s
Total time:    1.46s

Baseline (without emotion):

Files:           104
Lines:         83593
Nodes:        283283
Identifiers:   98776
Symbols:       62954
Types:          1206
Memory used: 110732K
I/O read:      0.12s
I/O write:     0.00s
Parse time:    0.92s
Bind time:     0.40s
Check time:    0.12s
Emit time:     0.00s
Total time:    1.43s

Styled components:

Files:           111
Lines:         93595
Nodes:        303502
Identifiers:  105234
Symbols:       71068
Types:          4978
Memory used: 125100K
I/O read:      0.14s
I/O write:     0.00s
Parse time:    1.01s
Bind time:     0.41s
Check time:    0.26s
Emit time:     0.00s
Total time:    1.68s

Summary: Baseline (just react): 1206 types (1.43s @ 110,732K memory used) Baseline + 1 emotion 9 styled component: 2793 types (1.46s @ 111,337K memory used) Baseline + 1 emotion 10 styled component: 11,015 types (2.09s @ 115,850K memory used) Baseline + 1 styled-components 4.3.2: 4978 types (1.68s @ 125,100K memory used)

Expected behavior:

The emotion TypeScript types need to be simplified

Environment information:

• react version: 16.9.0
• emotion version: 10.0.17
• typescript version: 3.6.3

[orta]

I’ve started looking at a way to be able to catch these issues early with existing dts + js projects also: https://github.com/SamVerschueren/tsd/pull/34

[Andarist]

Going to close this issue right now as we plan to land the PR intended to improve this soon and I’d like to keep the issue tracker clean as I’m going through the list daily.