styled-components: 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?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 21 (12 by maintainers)

Most upvoted comments

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 😉

kitten on Jun 22, 2017

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.

geelen on Jun 23, 2017