Jss: media hover issue with JSS@9

[oliviertassinari]

I have noticed the following regression trying to upgrade JSS to v9 for Material-UI.
We have a diff between the server side and client side generated CSS. It was working fine with v8.

main.js:98 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) ass="Component-root-2" data-reactid="3">
(server) ass="Component-root-3" data-reactid="3">

Reproduction

Input

// @flow

import React from 'react';
import { withStyles } from 'material-ui/styles';

const styles2 = {
  root: {
    backgroundColor: 'red',
  },
};

const DivOleg = withStyles(styles2)(({ classes, ...other }) => (
  <div className={classes.root} {...other} />
));

const styles1 = {
  root: {
    '&:hover': {
      textDecoration: 'none',
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
};

function PageJss(props) {
  return (
    <div className={props.classes.root}>
      <DivOleg>{'Get Started'}</DivOleg>
    </div>
  );
}

export default withStyles(styles1)(PageJss);

Server Output

.Component-root-3 {
  background-color: red;
}
.PageJss-root-1:hover {
  text-decoration: none;
}
@media (hover: none) {
  .PageJss-.PageJss-root-1:hover-2 {
    background-color: transparent;
  }
}

Client Output

<style type="text/css" data-jss="" data-meta="Component">
.Component-root-2 {
  background-color: red;
}
</style>
<style type="text/css" data-jss="" data-meta="PageJss">
.PageJss-root-1:hover {
  text-decoration: none;
}
@media (hover: none) {
  .PageJss-root-1:hover {
    background-color: transparent;
  }
}
</style>

Or if you want to try it live: https://github.com/oliviertassinari/material-ui/blob/jss%409/pages/jss.js

[oliviertassinari]

The most interesting difference is here:

-.PageJss-.PageJss-root-1:hover-2 {         (server)
+.PageJss-root-1:hover {                    (client)

[kof]

Looks wrong on the server. Can you narrow it down to pure JSS?

[oliviertassinari]

@kof Ahah, I knew you were going to ask. The first step was to narrow it down to Material-UI style wrapper outside of our components. Will see if I can. I'm on https://github.com/callemall/material-ui/issues/7836#issuecomment-333394337 right now.

[kof]

@oliviertassinari did you have a chance?

[oliviertassinari]

@kof I'm looking into it. It the only blocker so far to upgrade to JSS@9 on Material-UI side.

[oliviertassinari]

Alright, I can reproduce the regression with node v6.11.2, jss v9.0.0, jss-preset-default v4.0.0.

Input

import preset from 'jss-preset-default'
import jss from 'jss'

jss.setup(preset())

const styles2 = {
  root: {
    backgroundColor: 'red',
  },
};

const styles1 = {
  root: {
    '&:hover': {
      textDecoration: 'none',
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
};

const styleSheet1 = jss.createStyleSheet(styles1)
const styleSheet2 = jss.createStyleSheet(styles2)

styleSheet1.attach()
styleSheet2.attach()

console.log(styleSheet1.toString())
console.log(styleSheet2.toString())

Output on the server side

--- jss@8

.root-0-0:hover {
  text-decoration: none;
}
@media (hover: none) {
  .root-0-0:hover {
    background-color: transparent;
  }
}
.root-0-1 {
  background-color: red;
}

--- jss@9

.root-0-1:hover {
  text-decoration: none;
}
@media (hover: none) {
  ..root-0-1:hover-0-2 {
    background-color: transparent;
  }
}
.root-0-3 {
  background-color: red;
}

[oliviertassinari]

It could be linked, I have noticed that there is one key of styleSheet.classes that looks incorrect: https://codesandbox.io/s/l59l686km9

[kof]

Cool, will fix soon, thanks!

[kof]

Turns out I had no test covering media query inside of a nested selector.

[kof]

fixed and released with preset 4.0.1

[oliviertassinari]

thanks :)