core: `makeStaticStyles` to support @at-rules

[jligeza]

This code:

export default makeStyles({
  ':root': {
    backgroundColor: 'red',
    '@media screen': {
      color: 'blue',
    }
  }
});

Produces this:

.f3xbvq9 {
  background-color: red;
}

@media screen {
  .f16lhzc5 {
    color: blue;
  }
}

While this code:

export default makeStaticStyles({
  ':root': {
    backgroundColor: 'red',
    '@media screen': {
      color: 'blue',
    }
  }
});

Produces this (missing media query):

:root {
  background-color: red;
}

Other functions such as @supports also don't work. It is not mentioned in documentation that media query is not supported, but even if it isn't, I think it should, as it is rather important.

[layershifter]

Indeed, good catch 👍 Would be nice to support it.

[FelixWiecz]

@layershifter any plans to implement that? :)

[layershifter]

@layershifter any plans to implement that? :)

@FelixWiecz we don't have plans on it currently :(