title: babel-plugin-react-css-modules is not matching styles with styleName
body: <p><strong>Issue</strong></p>
  
  <p>I am trying to use <a href="https://github.com/gajus/babel-plugin-react-css-modules#runtime-stylename-resolution" rel="noreferrer">babel-plugin-react-css-modules</a> in my React project for better performance as opposed to <em>React CSS Modules</em>. </p>
  
  <p>However, the styles are being not applied correctly.</p>
  
  <p><strong>Cause</strong></p>
  
  <p>The version in <code>&lt;style&gt;</code> tag is wrapped with weird hypen, for example:</p>
  
  <ul>
  <li>In the <code>&lt;style&gt;</code> tag: <code>-components-Foo-___Foo__foo___1fcIZ-</code> </li>
  <li>On the DOM
  element class name: <code>components-Foo-___Foo__foo___1fcIZ</code></li>
  </ul>
  
  <blockquote>
    <p>Even if we are using the same <code>localIdentName</code>, the generated results
    are different from selectors in css and className on DOM element.</p>
    
    <p>(Note: In babel-plugin-react-css-modules, the <code>localIdentName</code> is
    <code>[path]___[name]__[local]___[hash:base64:5]</code> as hard-coded in
    <code>options.generateScopedName</code>)</p>
  </blockquote>
  
  <p>Any idea why there is a hypen-wrapper? </p>