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

[amerllica]

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

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

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?

[kof]

that warning should be only shown when function value used inside a function rule like this:

createUseStyles({
   a: () => ({
     color: () => 'red'
   })
})

This should be a bug.

[amerllica]

@kof , But even in the below case I got that warning:

createUseStyles(({ colors }) => ({
   a: ({ isDisabled }) => ({
     color: isDisabled ? colors.gray : colors.primary,
   }),
}));

See, it is a function inside function too. I migrate from JSS to @material-ui/styles, I know it is a wrapper for JSS and ReactJSS but issues were settled inside itself.

[kof]

Like I said this should be a bug.