universal render and css-modules

Hey Claudio,

css-modules is a very good idea but it’s not working properly in isomorphic render. Server side does not recognise the following code:

import cx from 'classnames';
import styles from './styles.css';
...

class Header extends Component {
    render() {
        return (
            <h1 className={cx('m0', 'py2', 'h4', styles.siteName)} >
...

It seems that the server ignore the styles.siteName class.

Error Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) “/” class="m0 py2 h4 styles__site-name__ (server) “/” class=“m0 py2 h4” data-reactid=“15”>

I found a topic about this subject on Github https://github.com/css-modules/css-modules/issues/9#issue-86142149 also it seems to have found a solution https://github.com/css-modules/css-modules/issues/9#issuecomment-112373765

Maybe we can apply it in rfx-stack too.

[alisamar]

@foxhound87 I figured out what went wrong, It looks like a camelCase issue. styles.siteName did not work but styles['site-name'] works just fine!

[foxhound87]

You are not implementing the SSR in the right way, as you can read in the error, your render method is impure.