Media query styles applied only to the first element in function

[karpcs]

Expected behavior:
when changing screen size media query in function should apply styles to all the component that uses it

Describe the bug:
only the first component gets the styles of media query in function, it looks like it was introduced in 10.0.1

Codesandbox link:
https://codesandbox.io/s/react-jss-playground-nwurq

Versions (please complete the following information):

• jss:10.1.1
• Browser saw it on chrome, havent tested others
• OS windows10:

[pranshuchittora]

@kof if this issue is still open then I would like to work on this :)

[kof]

@pranshuchittora sure

[pranshuchittora]

Thanks @kof for the blazing fast reply 👍

[pranshuchittora]

-  wrapper: () => ({
    padding: 40,
    background: theme.background,
    textAlign: "left",
    "@media (min-width: 1024px)": {
      backgroundColor: "red"
    }
-  }),
+ wrapper: {
    padding: 40,
    background: theme.background,
    textAlign: "left",
    "@media (min-width: 1024px)": {
      backgroundColor: "red"
    },
+  }, 

@karpcs Converting the style object from an arrow function to plain object works.

@kof probably this is happening due to improper object referencing in arrow function approach. Is it still a bug, if no then I suggest closing this issue :)

[kof]

Feel free to dig deeper and figure out what the actual bug is. Yes it is only when rule function is used.

[kof]

Same as #1327

[pranshuchittora]

Rule function is not transpiling ?

[kof]

Might be just the playground, also it's not on the latest version, feel free to update and check what it does.

[pranshuchittora]

I have updated the deps.

    "jss": "^10.1.1",
    "jss-preset-default": "^10.1.1"

Still not working, will take a look at the rule function parsing.
Is this the correct function to look at ?

[pranshuchittora]

Hi @kof , Did some preliminary research and found out that the function is not being executed to get the returned object as shown below.

As the function is not bein executed, therefore converting it toCss string returns null.

[karpcs]

I kept the version in playground at the version, that this bug appears, prior versions does not have this bug.

i noticed this when looping through array and passing different props to each and only the first element got the styles, so i just put a little demo here

[kof]

@pranshuchittora yes, you are still on the surface, sheet.update is supposed to call function rules, jss-plugin-rule-value-function plugin is responsible for implementing the function rule API ... somewhere between jss core and the plugin there is a bug, most likely in the plugin.

[kof]

https://github.com/cssinjs/repl/blob/gh-pages/src/index.js#L55 repl doesn't call .update, so on the repl function rules won't work, we need to start calling .update there.

The actual issue in your production code might be in react-jss

[pranshuchittora]

@pranshuchittora yes, you are still on the surface, sheet.update is supposed to call function rules, jss-plugin-rule-value-function plugin is responsible for implementing the function rule API ... somewhere between jss core and the plugin there is a bug, most likely in the plugin.

Yeah, after call update() it worked. I have raised a PR regarding the following fix
cssinjs/repl#5