Media queries still inject styles when they shouldn't @8.0.2-2

[apostolos]

• emotion version: 8.0.2-3
• react version: 16.0.0-rc.3

First of all, I would like to show my appreciation for your latest work and for a fantastic library. I wish I was able to contribute myself, however I didn't have much luck setting up a development environment for emotion. CONTRIBUTING.md must need updating, although I suspect some of the scripts won't work on Windows.

Anyway, there is still at least one bug on the way @ rules are handled.

Reduced test case:

const ExampleDiv1 = styled.div`
  color: blue;

  @media (max-width: 400px) {
    color: red;
  }
`;

const ExampleDiv2 = styled.div`
  color: blue;

  @media (max-width: 400px) {
    color: green;
    h1 {
      color: red;
    }
    span {
      color: red;
    }
  }
`;

const ExampleDiv3 = styled.div`
  color: blue;

  @media (max-width: 400px) {
    h1 {
      color: red;
    }
    span {
      color: red;
    }
  }
`;

const ExampleP1 = styled.p`
  @media (max-width: 400px) {
    color: green;
    span {
      color: red;
    }
  }
`;

const ExampleP2 = styled.p`
  span {
    color: blue;
  }
  @media (max-width: 400px) {
    color: green;
    span {
      color: red;
    }
  }
`;

const MediaQueriesTest = () => (
  <section>
    <ExampleDiv1>
      <h1>1. This text should be blue</h1>
      <p>Paragraph text should be blue</p>
    </ExampleDiv1>
    <ExampleDiv2>
      <h1>2. This text should be blue</h1>
      <p>
        <span>Paragraph text should also be blue</span>
      </p>
    </ExampleDiv2>
    <ExampleDiv3>
      <h1>3. This text should be blue</h1>
      <p>
        <span>Paragraph text should also be blue</span>
      </p>
    </ExampleDiv3>
    <hr />
    <ExampleP1>
      This paragraph should be black. <span>This span should be blue</span>
    </ExampleP1>
    <ExampleP2>
      This paragraph should be black. <span>This span should not override a red color (inspect me)</span>
    </ExampleP2>
  </section>
);

What happened (errors in bold):

CASE 1: everything looks OK
CASE 2: red is injected for H1 and SPAN
CASE 3: if green is removed from inside the media query, suddenly the SPAN is rendered in blue, however red is still injected for H1
CASE P1: red is injected for SPAN
CASE P2: SPAN is blue as it is supposed to, but if you inspect it you will see that blue overrides a red rule. The red rule shouldn't be there or it should be inside a media query.

[tkh44]

Thank you for this great bug report @apostolos!