theme from useStyes() without stylesheet assumes type as never

[z1haze]

Description

I am not sure if this is a setup issue on my part or not, however I am noticing that intellisense in my IDE is typing the theme object that comes from the useStyles return object as never.

Apologies if this is not legitimate, I'm just trying to help point out a possible bug

Steps to reproduce

1. call useStyles without explicitly providing a stylesheet and destructure theme

Snack or a link to a repository (optional)

No response

Unistyles version

2.0.1

React Native version

0.72.6

Platforms

Android, iOS

Engine

Hermes

Architecture

Paper (old)

[z1haze]

[RodzAlves]

Did you do the correct setup?

https://reactnativeunistyles.vercel.app/start/setup/

Take a look at session 3.3 Configure TypeScript

[efoken]

Cannot reproduce, probably something is wrong with your setup.

[z1haze]

Sorry it took so long to reply back, I believe I have everything setup correctly, which is why I'm asking. Attaching my setup file from 3.3 for your inspection.

import { UnistylesRegistry } from 'react-native-unistyles';
import { darkTheme, lightTheme } from '@/styles/themes';

type AppThemes = {
  light: typeof lightTheme,
  dark: typeof darkTheme
}

declare module 'react-native-unistyles' {
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry
  .addThemes({
    light: lightTheme,
    dark: darkTheme
  })
  .addConfig({
    adaptiveThemes: true
  });

[jpudysz]

Did you import this file anywhere in your app?

import './unistyles'

or whatever your filename is?

[z1haze]

yes, in App.tsx. I'm able to use theme from the destructured object, and it even knows all of the fields from ts.. its just the intellisense things it is of type never.

[jpudysz]

Two more questions:

Can you try to import your themes without absolute aliased path?

What IDE are you using ?

[z1haze]

I'm using webstorm. I will attempt this tomorrow, I've left my work machine for the night!

[jpudysz]

No worries, we will find the root cause ☺️

[z1haze]

Hey all, I made the update as requested to make the theme imports be relative paths, and there was no change here. Intellisense still claims to be never however I don't want to mistake you in claming that the typescript isn't working properly, because it does work. It is just very strange that is says never in intellisense.

[jpudysz]

Is it possible to get minimal repo with repro? I need to see the whole picture.

[z1haze]

I can see about tomorrow starting a brand new expo project and seeing if it occurs. But fwiw, I am using expo 49 in webstorm and ts version 5.2.2 i think. I'm not on that machine right now but I do believe that is the version

[jpudysz]

I just want to confirm the issue and detect if this is machine / setup / unistyles core.

Thanks!

[jpudysz]

Hey, any update? Is this somehow related to: https://github.com/jpudysz/react-native-unistyles/discussions/133 ?

[jpudysz]

Hey @z1haze, I haven't heard from you for the past 7 days. Feel free to reopen this issue when you provide more information. Thanks!

[z1haze]

Apologies, I've been swamped. Once I get a moment to breathe ill create a separate project and try to replicate!

[jpudysz]

Sorry to hear that. Take your time

[mzaien]

I think I know what is the issue because I had it this week, if the unistyles type override was using ts type instead of interface this issue happens I noticed that because my eslint converts everything into a type

// override library types
declare module 'react-native-unistyles' {
    // for some reason typing does not work unless we used an interface
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    export interface UnistylesThemes extends AppThemes {}
}

[jpudysz]

Thanks for posting it. Interface is required by TypeScript itself. Maybe that was the issue! 🙏

[z1haze]

We were already using an interface like described in the docs. The issue persists

[jpudysz]

It shouldn't. Many ppl are using unistyles without the issue.

It must be something local, hard to guess. I need a minimal repo to help

[efoken]

Must be locally, I don’t have any problems.

[z1haze]

We've just learned to deal with it. Also its quite frustrating to get replies like "other people don't have issues". I don't see how that's contributing to the discussion. I didn't report this issue because I thought it would be fun to make up a problem :(. We run expo v51, (before it was 50, and before that it was 49), with react navigation, and a handful of other libraries.

There is some weird bug somewhere that webstorm's intellisense picks up on and infers the object as type never, while at the same time clearly knowing what the value of the object is. It is very strange, as you can see here in the screenshot.

Finally, I wouldn't had reported this issue had I run into this problem, even once before, ever. This is literally the first and only time I have ever see this occur in webstorm when using typescript. Virtually every other variable I've ever defined, many many thousands, across dozens and dozens of libraries have no had this happen. So to be told its a me issue is beyond frustrating. I hope it is a me issue, but please allude to what it is. I've sent along the configuration and setup we are using months ago, and I'd followed the installation documentation to a T. This is a great library, and this issue isn't going to stop us from using it, but it is definitely a nuisance.

[jpudysz]

I just meant that it's your unique issue, as you're only reporting it. I'm also using unistyles in multiple projects and I didn't get such weird types across any IDEs.

You need to also understand that's frustrating to me as there is no reproduction and there is now way to help. This is typescript feature to extend someone's type it's not a blacboxed magic from unistyles.

[DaltonPelkey]

@jpudysz Here is a repro: https://github.com/DaltonPelkey/UnistyleRepro

Not sure if it is a Typescript issue or just general behavior, but once the theme object reaches a certain size the type defaults to never. See in the repo where Unistyles is configured the recommended way. In App.tsx the type of theme reads correctly. However, if you uncomment a single value in lightTheme it changes to never. If seemingly no one else is experiencing this then it leads me to believe that it is a Typescript issue.

If you swap out the declaration with the one commented out, it will then default to the explicit type of UnistylesTheme rather than never. This is my recommended fix for this specific issue.

Out of curiosity what IDEs have you been testing on, and how large have the theme objects been?

With 12 theme properties:

With 13:

With 13 -and- my declaration code:

[jpudysz]

I'm using themes with dozens of lines. I can get the same experience across WebStorm, VSC and Zed.

Btw, do you use bundled typescript from node_modules? Maybe you have some older version globally installed.

For sure there is no limit for number of props!

[DaltonPelkey]

Btw, do you use bundled typescript from node_modules? Maybe you have some older version globally installed.

Just updated to the latest 5.4.5 and still the same issue. Let me know what you think of the repro

Edit: Just to clarify. I don't think there is a limit on the number of properties. This is either a Typescript issue, a Typescript issue with Unistyles, or a Typescript issue with Webstorm.

[DaltonPelkey]

Just to point out as well, most of the Unistyle methods also return theme of type never (rather than an explicit type):

[z1haze]

Thanks @DaltonPelkey for making a repro. so @jpudysz are you saying that you cannot observe this behavior with his repo? I just cloned it into a new project and am able to observe exactly what he's shown.

Also I believe that if this were an issue exclusive to typescript, or exclusive to typescript and webstorm, we would be observing this across all sorts of libraries and scenarios. The fact remains though that this only occurs with unistyles. Hopefully the repro repo provided will help them get to the bottom if it and fix it.

[jpudysz]

I can't repro. What I've done:

1. Download repo
2. yarn install
3. Open in VSC

4. Check TS popup

5. Uncomment all props from theme type

6. Add new props:

7. Repeat in WS (works the same)

[DaltonPelkey]

I'm confused. You just sent a screenshot of the repro working on Webstorm. The intellisense on the object is not the issue. We are only referring to the never preview type

[jpudysz]

So, the issue is that WS previews the theme type as 'never'?

It seems that the issue comes from Webstorm TypeScript engine, as it's not visible in any other editor. To fix it, you need to enable Use types from server setting which will use TypeScript Language Service.

More here:

https://www.jetbrains.com/help/webstorm/typescript-support.html#ws_ts_use_ts_service_checkbox scroll to section 5 (3rd list item)

By default, the checkbox is cleared so type evaluation, resolution, code inspections and refactorings are based on the type information from the WebStorm internal TypeScript engine.

This default behavior may result in performance issues and in bugs in type resolution because the type evaluation algorithm that the TypeScript Language Service uses differs from the algorithm of the TypeScript Compiler. Selecting the checkbox may help avoid these problems.

[z1haze]

So, the issue is that WS previews the theme type as 'never'?

can't be serious...

[efstathiosntonas]

/rant IntelliJ and Webstorm is getting worse and worse in every single update. The amount of bugs these products have is beyond reality (been using them for 5 years daily), a visit to Youtrack will convince you.

Anyway, can you guys try this out and check if typings are still wrong?

• https://blog.jetbrains.com/webstorm/2023/12/try-the-future-typescript-engine-with-the-webstorm-next-program/