doesn't work properly with react-css-modules

demo

Only inner styleName compiles to ‘class’, but inners not. You can see that div-2 value has stylename attribute, but should class as div-1.

---

Component code:

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.css';

@CSSModules(styles)
export default class App extends Component {
  render() {
    return (
      <div styleName="div-1">
        <div styleName="div-2">
          Big square should be red; <br /> Small square should be black.
        </div>
      </div>
    );
  }
}

styles.css:

.div-1 {
  width: 500px;
  height: 500px;
  background: red;
}

.div-2 {
  width: 200px;
  height: 200px;
  background: black;
  color: white;
}

---

How it looks:

How it should:

[pavelivanov]

so sad, hoped it to be fixed… =/

[mqklin]

It’s very verbose to write styles every time, css-modules allows to write it only once, that’s why I use it. Will be very great for me if this will be fixed, I want to try preact in production. Thanks.