README.md

Example: https://www.webpackbin.com/bins/-Ki2nECMzZC9_V_UEObo

When rendering <Button /> and <Button primary/> components, there are CSS properties that are duplicated across instances. Looking at the rendered-styles.css file, you can see the duplication. Looking at the markup, it looks like there are a couple ways styles could be mapped to avoid duplicated CSS rules, however I'm not sure what implementation considerations/constraints this would involve.

With the rendered markup styled-components creates in the rendered-html example, I assume the rendered CSS most developers who frequently write CSS would expect is something like:

.sc-bdVaJa {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
}

.efEkkO {
  background: white;
  color: palevioletred;
}

.eseLky {
  background: palevioletred;
  color: white;
}

or possibly

.sc-bdVaJa {}

.efEkkO {
  background: white;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
}

.eseLky {
  background: palevioletred;
  color: white;
}

rendered-html.html

<div data-reactroot="">
  <button class="sc-bdVaJa efEkkO">Normal</button>
  <button class="sc-bdVaJa eseLky">Primary</button>
</div>

rendered-styles.css

.sc-bdVaJa {}

.efEkkO {
  background: white;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
}

.eseLky {
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
}

styled-components.jsx

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  
  /* These styles below get duplicated */
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;