Jss: 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 :+1:

[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 https://github.com/cssinjs/jss/issues/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
https://github.com/cssinjs/repl/pull/5

[pranshuchittora]

Till v10.0.0 it was working perfectly. In v10.0.1 the issue of dynamicStyles is occurring.

The line -> https://github.com/cssinjs/jss/blob/d9cca31ad2d058aa0108fa6ec48fe872b0e7e886/packages/jss/src/DomRenderer.js#L406

Is trying to concert the dynamic style to string, which is unable to.

This flow is encountered when the link is true.
IMO the issue is in jss not react-jss.

P.S. update method on rule is not available.

[kof]

That line was changed last time before 10.0.0

[pranshuchittora]

Hi @kof ,
So I ran git bisect between the v10.0.0 & v10.0.1. And found that the commit which introduced that bug was 9f7924eb79bf1e78816db7aaa4cf324471.

Reverting the changes in packages/react-jss/src/createUseStyles.js introduced in the following commit fixes the bug.

[kof]

Can you create a test? And optionally a fix?

On Sat, May 9, 2020, 11:31 Pranshu Chittora [e-mail]
wrote:

Hi @kof https://github.com/kof ,
So I ran git bisect between the v10.0.0 & v10.0.1. And found that the
commit which introduced that bug was 9f7924eb79bf1e78816db7aaa4cf324471
https://github.com/cssinjs/jss/commit/9f7924eb79bf1e78816db7aaa4cf324471
.

[image: Screenshot from 2020-05-09 14-25-42]
https://user-images.githubusercontent.com/32242596/81469474-a0960e80-9202-11ea-8a79-b4c0983f3d28.png

Reverting the changes in packages/react-jss/src/createUseStyles.js
introduced in the following commit fixes the bug.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/cssinjs/jss/issues/1320#issuecomment-626136881, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAM4WAFNYSXDJPUS5IZHLDRQUPGFANCNFSM4LTOR7UA
.

[pranshuchittora]

@kof kindly check #1343 for the fixes :)