CSS module hover styles when inside another module : <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>
