Styled Components in TypeScript 3.4.1 works much slower that in 3.3.4000
See original GitHub issueI 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:
3.4.1:
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:
- Created 4 years ago
- Reactions:16
- Comments:5 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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…Actually OP already posted there - https://github.com/Microsoft/TypeScript/issues/30663