title: React Styled Components generating excessive css
body: <p>Take the following example:</p>
  
  <pre><code>import * as React from 'react';
  import styled from 'styled-components';
  
  const Ball = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50%;
    background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
    background-size: 150% 150%;
    background-position: center;
    background-position-x: 87%;
    background-position-y: 87%;
  `;
  
  const SmallBall = styled(Ball)`
    width: 50px;
    height: 50px;
  `;
  
  export default () =&gt; (
    &lt;&gt;
      &lt;Ball name="Ball"&gt;&lt;/Ball&gt;
      &lt;SmallBall name="SmallBall"&gt;&lt;/SmallBall&gt;
    &lt;/&gt;
  )
  </code></pre>
  
  <p>Here's the markup that's being generated:
  <a href="https://i.stack.imgur.com/XzXcS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XzXcS.png" alt="generated image showing hashed classes of each element"></a></p>
  
  <p>If I were to write out the CSS I'd expect to be generated, it'd probably look something like this:</p>
  
  <pre><code>.sc-cHGsZl {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50%;
    background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
    background-size: 150% 150%;
    background-position: center;
    background-position-x: 87%;
    background-position-y: 87%;
  }
  
  .sc-cHGsZl.bmZbgS {
    width: 50px;
    height: 50px;
  }
  </code></pre>
  
  <p>Instead what's generated is:</p>
  
  <p><a href="https://i.stack.imgur.com/Vx3SC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vx3SC.png" alt="Generated styles for ball component"></a></p>
  
  <p>and</p>
  
  <p><a href="https://i.stack.imgur.com/kQuo3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kQuo3.png" alt="Generated styles for small ball component"></a></p>
  
  <p>How can I get styled-components to output more concise CSS where common properties are grouped and not unnecessarily repeated?</p>