Components with multiple media queries only outputting the first media query in v2.1.1

Version

2.1.1

Also using babel-plugin-styled-components: version 1.1.17

Expected Behavior

Using the following CSS block should obviously result in 3 media queries being outputted for this styled-component.

const ContentSizer = styled.div`
    display: none;
    flex: 0 0 auto;
    width: 25%;
    margin: 0;

    @media(min-width: 1920px) {
      width: 20%;
    };

    @media(max-width: 768px) {
      width: calc(100% / 3);
    };

    @media(max-width: 480px) {
      width: 100%;
    };
`;

Actual Behavior

Only the first media query is outputted to the stylesheet and the others do not appear at all.

I thought this might be an issue with a breakpoint helper I was using or with the pre-processing issue described here.

To simplify things, I:

• Hardcoded the @media queries
• Removed babel-plugin-styled-components from my .babelrc and rebuilt
• Switched up the order and amount of media queries in the test component

None of those fixed the issue. However what did fix them was downgrading to styled-components v.2.0.0. With v2.0.0 I can use my breakpoint helper and the preprocessing babel plugin without a problem and my simplified test case also works fine of course.

I don’t have additional time at the moment to produce more of a repro but I may try to do that later on. Anyone else seeing this issue?

[k15a]

This is a problem the semi colon after the closing braces.

Quick fix would be:

const ContentSizer = styled.div`
    display: none;
    flex: 0 0 auto;
    width: 25%;
    margin: 0;

    @media(min-width: 1920px) {
      width: 20%;
    }

    @media(max-width: 768px) {
      width: calc(100% / 3);
    }

    @media(max-width: 480px) {
      width: 100%;
    }
`;

@thysultan Could you check if you can fix this in stylis?

[ryanheathers]

@philpl that sounds great. After figuring out what was wrong with my media queries, I looked back through my codebase and found a bunch of other cases where I’d closed interpolated helper functions with semicolons e.g.

const ExampleWithRogueSemicolon = styled.div`
    ${breakpoint('small', css`
      width: 100%;
    `)};
`;

In hindsight it’s obvious those won’t work as expected, but it can tricky to spot and currently styled-components swallows the error and you’re left scratching your head why nothing got outputted to the browser.