title: Nicer class names in PostCSS
body: <p>I'm building my app using <code>Webpack 2</code>. I'm using <code>PostCSS 2</code> for CSS modules. Here is my CSS importing configuration for Webpack:</p>
  
  <pre><code>  {
      test: /\.css$/,
      exclude: /(node_modules)/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: loader =&gt; [
              require("postcss-import")({
                path: './js',
                addDependencyTo: webpack,
              }),
              require('postcss-cssnext')(),
            ],
          },
        },
      ],
    },
  </code></pre>
  
  <p>Now, the problem is, that this generates really ugly class names. Example using React:</p>
  
  <pre><code>import React, {Component} from 'react';
  import styles from './Element.css';
  
  export default class Element extends Component{
    render(){
      return (
        &lt;div className={styles.myElement}&gt;This is an example.&lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Renders into: </p>
  
  <pre><code>&lt;div class="_1DHVkmCxFFQMFYac-L_MIg"&gt;This is an example.&lt;/div&gt;
  </code></pre>
  
  <p>Now, this is fine in production, but in development, something like <code>class="myElement--_1DHVkmCxFFQMFYac-L_MIg"</code> would be a lot nicer. I found a <a href="https://github.com/facebookincubator/create-react-app/issues/90" rel="nofollow noreferrer">GitHub issue</a> discussing this, but as I'm new to Webpack, I couldn't figure out how to implement their suggestion. Whatever I tried resulted in an error, where Webpack couldn't resolve the module.</p>
  
  <p>I tried adding <code>localIdentName: '[local]--[hash:base64:5]'</code> to <code>postcss-loader</code> options, but that did nothing.</p>
  
  <p>So, how do I retain the original class name in the generated class name?</p>