title: Dependency cycle issue when using Styled Components alongside compound component pattern
body: <p>I have a few accordion components created using the compound component methodology (there is a great talk by Ryan Florence describing compound components <a href="https://www.youtube.com/watch?v=hEGg-3pIHlE" rel="nofollow noreferrer">here</a>).</p>
  
  <p>One of the ESLint rules I have setup is <a href="https://github.com/benmosher/eslint-plugin-import/blob/v2.17.3/docs/rules/no-cycle.md" rel="nofollow noreferrer">import/no-cycle</a> to prevent dependency cycles. As I'm using the compound component methodology as well as the advised way to <a href="https://www.styled-components.com/docs/advanced#referring-to-other-components" rel="nofollow noreferrer">refer to other components</a> in Styled Components by keeping all styles relevant to a particular component in that file itself, I am triggering the import/no-cycle warning.</p>
  
  <p>Here is my Accordion.js file.</p>
  
  <pre><code>import React, { useState } from "react";
  
  import AccordionTrigger from "./accordionTrigger";
  import AccordionContent from "./accordionContent";
  
  const Accordion = ({ children, show }) =&gt; {
    const [isActive, setIsActive] = useState(show);
  
    const handleTriggerClick = () =&gt; {
      setIsActive(!isActive);
    };
  
    const compoundChildren = React.Children.map(children, child =&gt; {
      switch (child.type) {
        case AccordionTrigger:
          return React.cloneElement(child, {
            onClick: handleTriggerClick,
            active: isActive ? 1 : 0,
          });
  
        case AccordionContent:
          return React.cloneElement(child, {
            show: isActive,
          });
  
        default:
          return child;
      }
    });
  
    return &lt;div show={show ? 1 : 0}&gt;{compoundChildren}&lt;/div&gt;;
  };
  
  export default Accordion;
  </code></pre>
  
  <p>And my AccordionTrigger.js file.</p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  
  import FauxButton from "../buttons/fauxButton";
  
  import Accordion from "./accordion";
  import TopLevelTrigger from "./topLevelTrigger";
  import SecondaryLevelTrigger from "./secondaryLevelTrigger";
  
  const Root = styled(FauxButton)`
    ${Accordion} &amp; {
      width: 100%;
      border-bottom: 1px solid ${p =&gt; p.theme.greyLight};
    }
  `;
  
  const AccordionTrigger = ({ active, children, ...rest }) =&gt; {
    const clonedChildren = React.Children.map(children, child =&gt; {
      switch (child.type) {
        case TopLevelTrigger:
        case SecondaryLevelTrigger:
          return React.cloneElement(child, {
            active,
          });
  
        default:
          return child;
      }
    });
    return &lt;Root {...rest}&gt;{clonedChildren}&lt;/Root&gt;;
  };
  
  export default AccordionTrigger;
  </code></pre>
  
  <p>One thing I have tried is defining the <code>AccordionTrigger</code> styles in <code>Accordion.js</code> like so...</p>
  
  <pre><code>const Root = styled.div`
    ${AccordionTrigger} &amp; {
      width: 100%;
      border-bottom: 1px solid ${p =&gt; p.theme.greyLight};
    }
  `;
  
  const Accordion = ({ children, show }) =&gt; {
    ...same logic as before here
  
    return &lt;Root show={show ? 1 : 0}&gt;{compoundChildren}&lt;/Root&gt;;
  };
  </code></pre>
  
  <p>...but this doesn't work, the styles simply don't get added to the <code>AccordionTrigger</code> component. I know I can simply add my own class via the <code>className</code> prop when cloning inside of the <code>Accordion</code> component and then refer to it that way but I was wondering if there was a way to prevent this?</p>