title: CSS module hover styles when inside another module
body: <p>In a React/Webpack app with <a href="https://github.com/css-modules/css-modules" rel="noreferrer">CSS modules</a> I have a module <code>.card</code> in its own .scss file and another module named <code>.stat</code> which is a content to be shown in the <code>.card</code>. </p>
  
  <p>What I need to achieve the following, but int the 'css-modules' way:</p>
  
  <pre><code>.card:hover .stat {
      color: #000;
  }
  </code></pre>
  
  <p>If I @import <code>.card</code> inside the <code>.stat</code> module, all of the <code>.card</code> css is dumped into the <code>.stat</code> output, but I only want to be able to use the correct class name for the <code>.card</code>. </p>
  
  <p>What's the correct way to solve the problem?</p>