cssinjs / cssinjs/jss

Wrong TS type infered for object created using createUseStyles

Open
#1,479 13 comments 2 reactions 0 assignees View on GitHub
typescript
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Expected behavior:__

Given the following snippet:

```typescript
const useStyles = createUseStyles((theme) => ({
SectionTitle: {
color: theme.color, // Commenting out this line fixes the bug

// Bullet
"&:before": {
content: (props: JssProps) => `"${props.number}"`,
border: [1, "solid", "black"]
}
}
}));
```

The type should be:

```typescript
const useStyles: (data?: JssProps & {
theme?: Jss.Theme;
}) => Record<"SectionTitle", string>
```

But instead, it's:

```typescript
const useStyles: (data?: {
theme?: Jss.Theme;
}) => Record<"SectionTitle", string>
```

__Describe the bug:__

This only occurs in a very specific case:
- We use the theme in the JSS
- The Theme is not correctly defined (any)

My theme is actually generated by a webpack plugin, that's why the type not precise.

__Reproduction:__

https://codesandbox.io/s/bug-type-jss-j5gkw

__Versions (please complete the following information):__
- jss: 10.6.0
- Browser [e.g. chrome, safari]: Chrome / FireFox
- OS [e.g. Windows, macOS]: Linux

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and inspect the TypeScript types exposed by createUseStyles in jss 10.6.0. Confirm the case where theme.color is used with an imprecise theme, then make the inferred useStyles signature retain JssProps and verify that the expected Record result remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.