Typescript autocomplete broken with latest typescript version (4.4.2)

[dhushyanth-s]

Bug report

The autocomplete is broken for the styled function with typescript versions ^4.4.2 which is the latest stable version.

To Reproduce

1. Create a new react app with typescript

npx create-react-app --template typescript

2. Add stitches to dependencies

npm i @stitches/react

3. Import stitches with

import { styled } from '@stitches/react'

4. Try invoking autocomplete for css attributes.

Expected behavior

All css attributes should be shown in autocomplete menu

Screenshots

with TS compiler version 4.4.2

with TS version 4.3.5 (from stitches repo package.json file)

System information

• OS: macOS Big Sur 11.4 on M1 Macbook Pro
• Version of Stitches: 1.0.0
• Version of Node.js: v16.5.0

Additional context

• VSCode version: 1.60.0

[peduarte]

Hi!

I've just followed your steps and was unable to reproduce:

The only difference is that I'm not on an M1 Mac, on Intel.

Thanks

[dhushyanth-s]

As you can see on the bottom right of the VSCode window, VSCode is using typescript version 4.3.5 which is working as expected please test with latest stable version 4.4.2 or later.

You can change IDE typescript versions by just clicking on the version number in the status bar of the window.

[peduarte]

@dhushyanth-s ah, yep, you're right. Thank you for the heads up!

I am able to replicate this issue now.

/cc @jonathantneal @hadihallak

[cpakken]

Typescript 4.4 added control flow analysis, maybe this change is causing the issue?
https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#cfa-aliased-conditions.

Also even in Typescript 4.4.2, the autocomplete works when defining utils inside createStitches:

Hope this is useful for the bugfix

[peduarte]

Hi! This has been released to Stitches v1.1.0

yarn add @stitches/react@latest
# or
npm install @stitches/react@latest

[dhushyanth-s]

Wow that was quick!