v2.1 Missing media queries with SSR

In 2.1.0 (compared to 2.0.0), some of my media queries have broken in production. Something simple like below doesn’t trigger and I get no error. It looks like it’s just missing from the CSS.

 @media (min-width: ${breakpoints.sm}) {
    width: ${imageSizeLg};
    height: ${imageSizeLg};
  }

I’m using Gatsby, so production meaning SSR. This is the code integrating styled-components

What I find strange is that there are still media query statements in the generated CSS, even ones that are using the exact same query.

Any idea what might have caused this?

[kitten]

I was able to reproduce this:

.djurMT {background-color: hotpink;width: 100px;height: 100px;border-radius: 3px;-webkit-flex: none;-ms-flex: none;flex: none;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}.djurMT@media (max-width: 62.5em) {.djurMT {
    width: ;
    height: ;
  ;}}

The relevant part being:

.djurMT@media

But I was only able to reproduce it using preprocess turned on in the babel plugin. So at least @Cinamonas reproduction is only a configuration mistake. Do note that preprocess is experimental and just a test leading up to v3, if you’ve purposefully turned it on 😉

I’m also sure that this triggers @0x80 bug, due to an edge-case in the preprocessing:

[["@media (min-width: ", breakpoints.sm, ") {"], [" {width: ", imageSizeLg, ";height: ", imageSizeLg, ";}}"]]

The preprocessing maps over the first level of arrays (the second being for the interpolations) and prepends each of them with the classname. When we use a media query, the first set of rules is not supposed to have a classname prepended to it (duh), so it fails. If you do want to continue using the experimental preprocessing, just put a dummy rule in front of the media query.

Btw before being done here, coming back to the first reproduction I mentioned:

const mediaQuery = (...args) => css`
  @media (max-width: 62.5em) {
    ${css(...args)}
  }
`;

mediaQuery`display: block`

This will never work with preprocessing, as we can’t preprocess dynamic input. The correct usage with it would be:

const mediaQuery = x => css`
  @media (max-width: 62.5em) {
    ${x}
  }
`;

mediaQuery(css`display: block`)

I hope this explains the issue 😉

[geelen]

Ooh sounds like a result! I’ll leave this to @philpl hopefully we can cut a new release of the parser and we’ll be golden.