question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styled Components in TypeScript 3.4.1 works much slower that in 3.3.4000

See original GitHub issue

I created an issue in TypeScript repo, but looks like this is related to styled-components. Tcs in new version of typescript work super slow if I add styled-components to my react project. You can find all details on typescript repo issue, but I also will add steps to reproduce and demo link here.

Environment

## System:
 - OS: Windows 10
 - CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
 - Memory: 2.74 GB / 15.94 GB
## Binaries:
 - Node: 11.6.0 - C:\Program Files\nodejs\node.EXE
 - Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
 - npm: 6.5.0-next.0 - C:\Program Files\nodejs\npm.CMD

Reproduction

Reproducible demo here: https://repl.it/@EugeneDraitsev/slow-tsc-341

3.3.4000: image

3.4.1: image

Steps to reproduce

yarn create react-app my-app --typescript
cd my-app
yarn add styled-components @types/styled-components 

add to src/index.tsx:

import styled from 'styled-components'
const Styled = styled.div``

add in package json tsc script in scripts section:

"tsc": "tsc"

run yarn tsc

if you’ll downgrade typescript version to 3.3.4000 or comment 2 lines of code in src/index.tsx it will work 20 times faster

Expected behavior:

Tsc should works with same acceptable time

Actual behavior:

Tsc works 20 times+ slower

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:16
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
jazzfogcommented, Mar 31, 2019

I ca’t be sure that this issue is on Styled Component’s side, it shouldn’t be actually on @types side either, types are just virtual entities… plus I just rolled back TS version keeping types and it solved the issue. I guess there is something wrong with TypeScript itself…

0reactions
jazzfogcommented, Mar 31, 2019

Actually OP already posted there - https://github.com/Microsoft/TypeScript/issues/30663

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vscode typescript styledcomponent too slow - Stack Overflow
Solution 1. You should make sure that you are pulling the latest version of @types/styled-components and also any older versions should not ...
Read more >
Releases - styled-components
styled -components is now written in TypeScript and ships its own types ... Fix slow SSR Rehydration for malformed CSS and increase fault-tolerance...
Read more >
VS Code issue with styled-components : r/vscode - Reddit
Is anyone having problems when importing 'styled-components' into any JS file? ... If you're using typescript, go back to 3.3.4000.
Read more >
typescript @ 3.3.4000 .. 3.4.1 - Package Diff
+/** The CSSKeyframeRule interface describes an object representing a set of style for a given keyframe. It corresponds to the contains of a...
Read more >
typescript-styled-plugin | Yarn - Package Manager
TypeScript Styled Plugin. TypeScript server plugin that adds intellisense to styled component css strings. Build Status. Features.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found