Wrong media queries output when using string styles with source maps on

Current behavior:

When source maps are enabled and we add some styles as string styles, then if we place a media query also with some string styles inside, as a result media query also takes the rules below, outside of it’s block.

const StyledText = styled.div`
  ${css`
    background-color: black;
  `}

  @media (min-width: 1040px) {
    ${css`
      background-color: green;
    `}
  }

  background-color: red;   <--- when source maps are enabled this is inside mediaquery above in CSS output
`;

To reproduce:

See example here: https://codesandbox.io/s/hello-world-b2xd6

1. Open .babelrc and check that source maps are disabled
2. Check out preview below 1040px bg color is red, above green
3. Go to .babelrc and enable source maps
4. Check out preview again, now below 1040px bg color is black and above red

Expected behavior:

Behaviour is the same in both cases, not depending on swtiching source maps.

Environment information:

• react version: 16.9.0
• emotion version: 10.0.20
• nextjs version: 9.0.7

I cannot say if it’s emotion thing, source map thing, or maybe SSR thing, if it’s not like 2 minute fix I could try to dig in and check it out a bit more 😉

[Andarist]

I’ve misunderstood the problem when you have reported it - I thought that this is a source map bug, that they point to a different than expected location. But actually this is also (like you have reported) about styles being concatenated in a wrong way.

This is caused by a bug in the parser we are using - I’ve reported it there last night: https://github.com/thysultan/stylis.js/issues/154 .

I’m going to close the issue then because it seems that we can’t really do much right now about it (I wouldn’t like to introduce any accidental regression into v10 at this point in time) and because we’ve merged in a change that should “fix” it coincidentally - https://github.com/emotion-js/emotion/pull/1653 . Hope you understand. Keep in mind that we release v11 versions regularly and they are very much usable, there won’t be many breaking changes there except package renaming and similar stuff - so I encourage you to migrate to it if you have a little bit of time to do so.

[marbor3]

Thanks for investigation! No worries, it does not affect production env, so it’s just a possible issue in development. I will try the workaround!