Style JSX is not working properly with @media-query

Bug report

Describe the bug

I am using <style jsx> to style my components. When that code is compiled @media query isn’t executed successfully.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

.post__card .summary {
   width: 351px;
}

@media screen and(max-width: 1142px) {
   .post__card .summary {
       width: 80%;
   }
}

Expected behavior

When code is compiled I have jsx-2993501484 post__card and jsx-2993501484 summary and JS is looking for

@media screen and(max-width:1142px) {
    .post__card.jsx-2993501484 .summary.jsx-2993501484 {
        width: 80%;
    }
}

But for some reason style from @media-query is not applied to the element. That part of CSS is not even available in Inspect element in browser

Screenshots

System information

• OS: Manjaro Linux
• Browser: Chrome
• Version of Next.js: ^9.1.8-canary.13

Additional context

Add any other context about the problem here.

[M1ck0]

Goddammit. I am so stupid. Thank you a lot. A lot

[jamesmosier]

You need to add a space to your media query between and and (:

@media screen and (max-width: 1142px) {