reproduce safari issue

Author: majodev

README.md

@@ -1,5 +1,11 @@
 # React CSS Modules Examples
 
+**Issue Fork!** Example code to reproduce an issue with Safari + react-css-modules < v3.7.0.
+
+Updated components don't no receive their [local styles](doc/fail_in_safari.png) (however they do if [dev-tool are open](doc/works_with_devtools_open.png)).
+
+---
+
 https://github.com/gajus/react-css-modules
 
 ## Setup

doc/fail_in_safari.png

@@ -4,10 +4,27 @@ import styles from './../table.css';
 
 @CSSModules(styles)
 export default class extends React.Component {
+
+    constructor(props) {
+
+      super(props);
+
+      this.state = {
+          count: 0
+      };
+
+      // force updates in the component to break safari
+      setInterval(() => {
+        this.setState({
+            count: this.state.count + 1
+        });
+      })
+    }
+
     render () {
         return <div styleName='table'>
             <div styleName='row'>
-                <div styleName='cell'>A0</div>
+                <div styleName='cell'>A0 {this.state.count}</div>
                 <div styleName='cell'>B0</div>
             </div>
         </div>;

doc/works_with_devtools_open.png

@@ -3,10 +3,27 @@ import CSSModules from 'react-css-modules';
 import styles from './../table.css';
 
 class Table extends React.Component {
+
+    constructor(props) {
+
+      super(props);
+
+      this.state = {
+          count: 0
+      };
+
+      // force updates in the component to break safari
+      setInterval(() => {
+        this.setState({
+            count: this.state.count + 1
+        });
+      })
+    }
+
     render () {
         return <div styleName='table'>
             <div styleName='row'>
-                <div styleName='cell'>A0</div>
+                <div styleName='cell'>A0 {this.state.count}</div>
                 <div styleName='cell'>B0</div>
             </div>
         </div>;

src/UsingDecorator/index.js

@@ -3,10 +3,27 @@ import CSSModules from 'react-css-modules';
 import styles from './../table.css';
 
 class Table extends React.Component {
+
+    constructor(props) {
+
+      super(props);
+
+      this.state = {
+          count: 0
+      };
+
+      // force updates in the component to break safari
+      setInterval(() => {
+        this.setState({
+            count: this.state.count + 1
+        });
+      })
+    }
+
     render () {
         return <div styleName='table'>
             <div styleName='row'>
-                <div styleName='cell'>A0</div>
+                <div styleName='cell'>A0 {this.state.count}</div>
                 <div styleName='cell'>B0</div>
             </div>
         </div>;