cssinjs / cssinjs/jss

Jss Typescript cannot accept value of array

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

Description

hi, after i upgrading jss to v 10.6.0, my code break!

It seem the typescript definition is wrong. See the TS code below:

```
const otherStyle1: JssStyle = {
background: 'red',
opacity: 5,
};
const otherStyle2: JssStyle = {
background: 'red',
opacity: 5,
};
const test = createUseStyles({
main: {
extend: otherStyle1 // FINE, otherStyle1 is acceptable JssValue
},
});
const test2 = createUseStyles({
main: {
extend: [otherStyle1, otherStyle2] // <== TYPESCRIPT ERROR HERE
},
});
```
It seem the prop value only accept string, number, another style, but **not an array**
` : `

in jss however, the `extend` is a special prop name. We should either passing a single value or an array of value,
so the TS definition should be:
` : `

to temporary workaround the problem, I just force the prop value as non array:
```
const test2 = createUseStyles({
main: {
extend: [otherStyle1, otherStyle2] as JssStyle
},
});
```

Contributor guide

Open the contributing guide

Research direction

Start at the TypeScript definition used by JssStyle and the createUseStyles example in the issue. Verify that extend accepts an array of the shown style values and that the example type-checks without the cast.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.