Nested function values not working in React (#1144)

* Add failing tests to demonstrate nested dynamic rule issue

* Fix nested dynamic styles

Author: felthy

packages/react-jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 168517,
-    "minified": 58191,
-    "gzipped": 19016
+    "bundled": 168992,
+    "minified": 58283,
+    "gzipped": 19042
   },
   "dist/react-jss.min.js": {
-    "bundled": 111849,
-    "minified": 41586,
-    "gzipped": 14098
+    "bundled": 112324,
+    "minified": 41678,
+    "gzipped": 14127
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 26550,
-    "minified": 11551,
-    "gzipped": 3816
+    "bundled": 27019,
+    "minified": 11643,
+    "gzipped": 3854
   },
   "dist/react-jss.esm.js": {
-    "bundled": 25588,
-    "minified": 10716,
-    "gzipped": 3693,
+    "bundled": 26057,
+    "minified": 10808,
+    "gzipped": 3733,
     "treeshaked": {
       "rollup": {
         "code": 1841,

packages/react-jss/src/utils/sheets.js

@@ -113,12 +113,20 @@ export const addDynamicRules = (sheet: StyleSheet, data: any): ?DynamicRules =>
   // Loop over each dynamic rule and add it to the stylesheet
   for (const key in meta.dynamicStyles) {
     const name = `${key}-${meta.dynamicRuleCounter++}`
-    const rule = sheet.addRule(name, meta.dynamicStyles[key])
+    const initialRuleCount = sheet.rules.index.length
 
-    sheet.update(name, data)
+    const originalRule = sheet.addRule(name, meta.dynamicStyles[key])
 
-    if (rule) {
-      rules[key] = rule
+    // Loop through all created rules, fixes updating dynamic rules
+    for (let i = initialRuleCount; i < sheet.rules.index.length; i++) {
+      const rule = sheet.rules.index[i]
+
+      // $FlowFixMe: Not sure why flow has an issue here
+      sheet.update(rule.key, data)
+
+      // If it's the original rule, we need to add it by the correct key so the hook and hoc
+      // can correctly concat the dynamic class with the static one
+      rules[originalRule === rule ? key : rule.key] = rule
     }
   }
 

packages/react-jss/test-utils/createDynamicStylesTests.js

@@ -28,7 +28,11 @@ export default ({createStyledComponent}) => {
         {
           button: {
             color: 'rgb(255, 255, 255)',
-            height: ({height = 1}) => `${height}px`
+            height: ({height = 1}) => `${height}px`,
+            '&::before': {
+              content: '""',
+              height: ({height = 1}) => `${height}px`
+            }
           }
         },
         {name: 'NoRenderer'}
@@ -100,12 +104,21 @@ export default ({createStyledComponent}) => {
         .button-0 {
           color: rgb(255, 255, 255);
         }
+        .button-0::before {
+          content: "";
+        }
         .button-0-1 {
           height: 10px;
         }
+        .button-0-1::before {
+          height: 10px;
+        }
         .button-1-2 {
           height: 20px;
         }
+        .button-1-2::before {
+          height: 20px;
+        }
       `)
     })
 
@@ -124,12 +137,21 @@ export default ({createStyledComponent}) => {
         .button-0 {
           color: rgb(255, 255, 255);
         }
+        .button-0::before {
+          content: "";
+        }
         .button-0-1 {
           height: 10px;
         }
+        .button-0-1::before {
+          height: 10px;
+        }
         .button-1-2 {
           height: 20px;
         }
+        .button-1-2::before {
+          height: 20px;
+        }
       `)
 
       renderer.update(<Container height={20} />)
@@ -138,12 +160,21 @@ export default ({createStyledComponent}) => {
         .button-0 {
           color: rgb(255, 255, 255);
         }
+        .button-0::before {
+          content: "";
+        }
         .button-0-1 {
           height: 20px;
         }
+        .button-0-1::before {
+          height: 20px;
+        }
         .button-1-2 {
           height: 40px;
         }
+        .button-1-2::before {
+          height: 40px;
+        }
       `)
     })