cssinjs / cssinjs/jss

[react-jss] Empty second rule is generated when using function value in useStyles hook

Open
#1,264 9 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.