Wrong TS type infered for object created using createUseStyles
- 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
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