[react-jss] Empty second rule is generated when using function value in useStyles hook
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Expected behavior:__
useStyles hook shouldn't create a class name with no rules.
__Describe the bug:__
I'm creating a useStyles hook where the rules are all derived from prop values:
```
const useStyles = createUseStyles({
styles: {
margin: props => props.margin,
padding: props => props.padding,
border: props => props.border
}
});
```
When the hook is called, it returns two class names, one with the rules derived from the prop values and another class name with no rules at all.
#668 seems to describe something similar but is marked as resolved... Could this have been fixed in the HOC but not the hook?
__Codesandbox link:__
https://codesandbox.io/s/upbeat-gould-n2ejd
__Versions (please complete the following information):__
- jss: react-jss 10.0.3
- Browser [e.g. chrome, safari]: chrome, firefox
- OS [e.g. Windows, macOS]: macOS
- node 10.15
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction and the createUseStyles/useStyles hook described in the issue. Compare the returned class names with the generated rules and review issue #668 for related context. Done means the hook returns no class name whose generated rule set is empty, while the expected prop-derived styles remain available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 42/100