Warning: [JSS] Function values inside function rules are not supported.

__Expected behavior:__
Do not show warning, because it works well.

__Describe the bug:__
For some reasons I wrote my code like this:

```javascript
const useStyles = createUseStyles(({ colors, variables, breakpoints }) => ({
// above line get the theme variables
cropperRoot: {
margin: [0, -variables.gutter],
},
cropContainer: ({ cropWrapSize = 250 }) => ({
// above line get the variables from passed props to useState({ cropWrapSize })
height: cropWrapSize + 44 + 60,
padding: [44, 0, 60],
overflow: 'hidden',
background: colors.backgroundIcon,
}),
```

Now I'm faced to this warning:
> Warning: [JSS] Function values inside function rules are not supported.

__Versions (please complete the following information):__
- jss: "^10.5.1",
- Browser [e.g. chrome, safari]: 89.0.4
- OS [e.g. Windows, macOS]: Big Sur 11.2.3
Feel free to add any additional versions which you may think are relevant to the bug.

# Why this Warning is shown?

Start by reproducing the warning with the createUseStyles example and the nested cropContainer function rule shown in the issue. Trace the JSS handling of function-valued rules to determine whether this usage is supported or incorrectly warned about. Done means the behavior is clarified and the warning is corrected or the supported usage is documented.

Written by the indexing model from the issue text.