Media queries don't work with function rules

[lttb]

Online example

Related to the https://github.com/cssinjs/styled-jss/issues/66

It looks like media queries don't work with function rules.

const styles = {
  container: props => ({
    padding: props.active ? 10 : 20,
    '@media screen and (min-width: 100px)': {
      color: 'red',
      background: props.active ? 'white' : 'gray',
    },
  }),

  container2: {
    padding: props => (props.active ? 10 : 20),
    '@media screen and (min-width: 100px)': {
      color: 'red',
      background: props => (props.active ? 'white' : 'yellow'),
    },
  },
}

const sheet = jss.createStyleSheet(styles, {link: true}).attach()
sheet.update({active: false})

const App = () => (
  <React.Fragment>
    <div className={sheet.classes.container}>
      <h2>@media does not work</h2>
    </div>
    <div className={sheet.classes.container2}>
      <h2>@media works well</h2>
    </div>
  </React.Fragment>
)

[kof]

tbc in https://github.com/cssinjs/jss/issues/682