V4 media queries prioritized higher than extended styles

In v4, MoreStyles in this code will have a background-color of red or green, instead of the expected blue

const Styles = styled.div`
  @media (min-width: 1000px) {
    background-color: red;
  }
  @media (max-width: 1000px) {
    background-color: green;
  }
`;

const MoreStyles = styled(Styles)`
  background-color: blue;
`;

V4 version with unexpected behavior: https://codesandbox.io/s/vq6k94rpz0 V3 version with expected behavior: https://codesandbox.io/s/0z48zxvn (exactly the same code)

From what I can tell this is due to v4 adding styles to an existing class (of lower priority than the media query) rather than to a new class like v3 does:

V3:

V4:

Only work around I’ve found is something clunky like this

const MoreStyles = styled(Styles)`
  @media screen {
    background-color: blue;
  }
`;

If this is the intended behavior what is the correct way to achieve this functionality? Also if it is intended it should be probably be mentioned in https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4

[probablyup]

The way v4 currently works is styles are folded and flattened together in the case of nested styled(StyledComponent), so the background blue is essentially getting grouped with the other static rules (height and width) and the media queries are appended after since they aren’t part of the same style context.

Your v3 example works because before the components were not folded and each had its own generated style class. The blue background class comes after the first class due to runtime insertion order and then due to how CSS places higher precedence on equal-weight styles lower in the sheet, the blue is applied.

In terms of fixes, there are three I can think of:

1. Use a precedence boost:

&& {
  background-color: blue;
}

This seems like the better solution to me because it makes it more obvious that you intend for this particular style to be applied over other siblings.

1. Wrap it in a media query like you did; this forces the style to be broken off the main clump since media queries can not be nested inside a class definition and thus are inserted after the main set, becoming implicitly higher precedence

2. Use something like !important

[probablyup]

@codeaid definitely a bug, for some reason the second example is generating .cIZrDu + .sc-htpNat:hover which is wrong, should be .cIZrDu + .sc-htpNat. I’ll try and look into this today.