styled-components ssr problems with bad usage

App.js

/* FOCUS IN THE PURPLE (COOL) <a /> component */

// GOOD ----------------------------------
const Container = styled("div")``;
const Link = styled("a")`
  color: green;
`;
const LinkCool = styled(Link)`
  color: purple;
`;
const Text = styled("p")`
  color: black;
`;

const App = props => (
  <Container {...props}>
    <Link href="/">Home</Link>
    <Text>
      Click <LinkCool href="/purple">purple</LinkCool>
    </Text>
  </Container>
);

// GOOD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
  color: green;
`;
const Text = styled("p") `
  color: black;
  ${Link}: {
    color: purple;
  }
`;

const App = props => (
  <Container {...props}>
    <Link href="/">Home</Link>
    <Text>
      Click <Link href="/purple">purple</Link>
    </Text>
  </Container>
);

// BAD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
  color: green;
`;
const Text = styled("p") `
  color: black;
  a {
    color: purple;
  }
`;

const App = props => (
  <Container {...props}>
    <Link href="/">Home</Link>
    <Text>
      Click <a href="/purple">purple</a>
    </Text>
  </Container>
);

// BAD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
  color: green;
`;
const Text = styled("p") `
  color: black;
  .cool {
    color: purple;
  }
`;

const App = props => (
  <Container {...props}>
    <Link href="/">Home</Link>
    <Text>
      Click <a className="cool" href="/purple">purple</a>
    </Text>
  </Container>
);

// BAD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
  color: green;
`;
const Text = styled("p") `
  color: black;
  #purple {
    color: purple;
  }
`;

const App = props => (
  <Container {...props}>
    <Link href="/">Home</Link>
    <Text>
      Click <a id="#purple" href="/purple">purple</a>
    </Text>
  </Container>
);