Jss: Incorrect class number if media query is used

[sammkj]

See this:

[kof]

Looks like a bug, do you want to send me a pr? Anything is welcome a test, a fix or even both!

[sammkj]

I will try to do it this weekend. But I'm not familiar with the codebase though. I might or might not find the solution.

[kof]

u still trying?) let me know on gitter if you need any help

[sammkj]

@kof , sorry I still have yet to find the culprit.

[AriaFallah]

@kof does this mean you can't use media queries with JSS?

[kof]

No, it seems like if you have more than one @media per sheet, the second one will not work. @sammkj let me know if I should take it, because it's a bad issue.

[AriaFallah]

@kof I think it should be fixed as soon as possible. It's one of the reasons for me why I might pick something else over JSS.

[kof]

I always try to give people a chance to contribute if they want to, your call @sammkj

[sammkj]

@kof, that would be great if you can take over.

[kof]

ok

[kof]

@sammkj @AriaFallah let me know if fix doesn't work for you.

[AlastairTaft]

I still seem to have this issue. I'm running jss version 3.11.0 and loading my styles with react-jss version 2.0.6.

The following styles

container: {
  height: '100%',
  paddingTop: 125,
  paddingBottom: 125,
  boxSizing: 'border-box',
  paddingBottom: 125,
  position: 'fixed',
  height: '100%',
  top: 0,
},
'@media (max-width: 992px)': {
  container: {
    width: '100%',
  },
},
'@media (min-width: 992px)': {
  container: {
    width: '30%',
  },
},

gets converted to the following stylesheet.

@media (min-width: 992px) {
  .container--jss-0-80 {
    width: 30%;
  }
}
.container--jss-0-81 {
  height: 100%;
  padding-top: 125px;
  padding-bottom: 125px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
}
@media (max-width: 992px) {
  .container--jss-0-81 {
    width: 100%;
  }
}

[kof]

looks like tests responsible for this has been moved during migration to mocha to functional tests and lost their checks of correct .toString compilation. will be fixed soon.

[AlastairTaft]

Also getting weird behaviour where it's picking up a class from a different stylesheet. So I have two components App.jsx and SidePanel.jsx in both components I have a container class but the App.jsx is picking up the styling from the SidePanel.jsx

[kof]

Can you create a separate issue and give me more data?

[kof]

Ok tests added, code was not broken. You need to check again version you are using (maybe you have more than one) and your code. In any case please create a separate issue.