Media-queries are not created for the classes declared as functions

[Yegor-IM]

Expected behavior:

When there is a class declared as a function, the media queries related to this class are applied. Hence, here a block with the exampleClass applied should be red on the screens wider than 600px.

exampleClass: (props) => ({
    color: "white",
    backgroundColor: "blue",
    width: props.prop1 ? "50%" : "100%",

    "@media(min-width:600px)": {
      backgroundColor: "red"
    }
  })

Describe the bug: For the classes declared as functions media queries are not applied unless they are declared as functions themselves.

This variant won't work as well.

"@media(min-width:600px)": { exampleClass: { backgroundColor: "red" } }

But this one will do.

"@media(min-width:600px)": { exampleClass: () => ({ backgroundColor: "red" }) }

Reproduction:

You may check the working reproduction example here - https://codesandbox.io/s/react-jss-bug-report-guijv

Versions (please complete the following information):

• jss: 10.7.1
• Browser: Chrome - Version 93.0.4577.82 (Official Build) (x86_64)
• OS: macOS 11.2.3 (20D91)

[seiyab]

I encountered similar problem while I were working on #1563 ("another problem", I wrote). Here is another reproduction, that doesn't use react-jss: https://codesandbox.io/s/admiring-sea-pcuee?file=/src/index.ts I think it is because ConditonalRule.addRule that nested plugin uses doesn't trigger style to update.

[seiyab]

I wrote a minimal test that points this issue: https://github.com/seiyab/jss/commit/c47f7cb3ceec3e8ad863af45dfc272fd26e5c0cc

      ✖ should render correct CSS to DOM
        Chrome 94.0.4606 (Mac OS X 10.15.7)
      Error: expected '.a-id{color:red;}@mediaall{}' to equal '.a-id {\n  color: red;\n}\n@media all {\n  .a-id {\n    color: green;\n  }\n}'
          at Assertion.assert (webpack://jss/node_modules/expect.js/index.js:96:0 <- packages/jss-plugin-rule-value-function/src/index.test.js:3048:13)
          at Assertion.be.Assertion.equal (webpack://jss/node_modules/expect.js/index.js:216:0 <- packages/jss-plugin-rule-value-function/src/index.test.js:3168:10)
          at Assertion.<computed> [as be] (webpack://jss/node_modules/expect.js/index.js:69:0 <- packages/jss-plugin-rule-value-function/src/index.test.js:3021:24)
          at Context.<anonymous> (webpack://jss/packages/jss-plugin-rule-value-function/src/plugin-nested.test.js:62:21 <- packages/jss-plugin-rule-value-function/src/index.test.js:27816:64)

Feel free to cherry-pick to fix the problem