title: Circular dependency for extracted styles with styled-components
body: <p>I’m fairly new to styled-components and trying to extract / refactor styles to separate files. I have problem with circular dependency - probably because of lacks of experience in styled-components good practices.
  This is the situation:</p>
  
  <pre><code>// A.js
  import { StyledA } from './styles';
  
  export default () =&gt; (
    &lt;StyledA&gt;
      &lt;SomeOtherComponent /&gt;
    &lt;/StyledA&gt;
  );
  
  // B.js
  import { StyledA1 } from './styles';
  
  export default () =&gt; (
     &lt;SomeWrapperComponent&gt;
       &lt;StyledA1 /&gt;
     &lt;/SomeWrapperComponent&gt;
  );
  
  // styles.js
  import styled from 'styled-components';
  import A from './A.js';
  
  export const StyledA = styled.div`...`;
  export const StyledA1 = styled(A)`...`; // causes dependency circle error
  </code></pre>
  
  <p>What I'm trying to achieve, is to extend <code>A</code> component styles and keep it's children components (for file <code>B.js</code>).</p>
  
  <ul>
  <li><code>export const StyledA1 = styled(StyledA)</code> doesn't work because I lose component <code>A</code> structure.</li>
  <li>...and import <code>A</code> in <code>styles.js</code> causes eslint "dependency-cycle" error because of imports <code>A.js → styles.js → A.js</code>.</li>
  </ul>
  
  <p>What should I do to keep HTML structure of extended component and resolve dependency cycle issue?</p>