Nested function values not working in React

[felthy]

I've found that code like this:

injectSheet({
  button: {
    '&::before': {
      content: '""',
      height: () => 1
    }
  }
})(Component)

Results in CSS like this:

.Component-button-0-2-31 {}
.Component-button-0-2-31::before {
 content: "";
}
.Component-button-0-0-2-32 {}
.Component-button-0-0-2-32::before {}

That is, the result of the function value, height: 1px;, is missing.

This feature works in react-jss v8.6.1 so seems like a regression somewhere between then and v10.

This seems to be specific to react-jss because the test in plugin-nested.test.js#L180 does something very similar and passes.

This PR adds failing tests to react-jss. I haven't figured out the cause of the issue yet.

[felthy]

Just to be sure it's React-specific, I've tried adding the exact same pattern to the jss-plugin-rule-value-function tests and it passes there:

diff --git a/packages/jss-plugin-rule-value-function/src/plugin-nested.test.js b/packages/jss-plugin-rule-value-function/src/plugin-nested.test.js
index 4f1ee75..9c0f490 100644
--- a/packages/jss-plugin-rule-value-function/src/plugin-nested.test.js
+++ b/packages/jss-plugin-rule-value-function/src/plugin-nested.test.js
@@ -180,6 +180,12 @@ describe('jss-plugin-rule-value-function: plugin-nested', () => {
                   margin: () => '10px'
                 }
               }
+            },
+            d: {
+              '&::before': {
+                content: '""',
+                height: () => '1px'
+              }
             }
           },
           {link: true}
@@ -205,6 +211,11 @@ describe('jss-plugin-rule-value-function: plugin-nested', () => {
         .c-id.a-id .b-id {
           margin: 10px;
         }
+        .d-id {}
+        .d-id::before {
+          content: "";
+          height: 1px;
+        }
       `)
     })
   })

[felthy]

I think the problem originates in addDynamicRules() here:

  for (const key in meta.dynamicStyles) {
    const name = `${key}-${meta.dynamicRuleCounter++}`
    const rule = sheet.addRule(name, meta.dynamicStyles[key])

because meta.dynamicStyles has not been flattened, so the iteration is only over top level classnames (i.e. button) - so sheet.update() is called with something like .Component-button-0-0-2-32 when it would need to be called with .Component-button-0-0-2-32::before for the function value to be updated.

[kof]

Yes, I the dynamic rules map doesn't know anything about the nested rules basically since they were added to the sheet.rules by plugins.

The mistake that was made is that to assume that dynamicStyles are all dynamic styles we might have.

[kof]

Evtl. the right solution to this problem is to make the plugin that is responsible for dynamic styles to update that map.

[felthy]

Do you recall what changed between the stable release and the v10 alpha to make it stop working?
Made a quick demo of it working with react-jss 8.6.1 / jss 9.8.7 here: https://codesandbox.io/s/jss-1144-nested-function-values-working-v861-e4l13

[kof]

Yes, @HenriBeck optimized the sheet creation using just one sheet for both dynamic and static rules, which resulted in the need of knowing what dynamic rules belong to a specific component instance since you don't want to update all dynamic rules. Before that there was one shared static sheet and each instance had a separate sheet for dynamic rules.

[HenriBeck]

What we could do to detect these nested dynamic rules is to check how many rules have been added for the one call (through the RuleList). If only one rule was added, we could just take that one. Otherwise, we would need to get also the rest of them.

[kof]

check how many rules have been added for the one call

yeah but also sounds like a hack

[kof]

What about adding a plugin in react-jss that reacts when a rule has been added? Using onProcessRule hook.

[HenriBeck]

What about adding a plugin in react-jss that reacts when a rule has been added? Using onProcessRule hook.

But how would we get these rules from inside the component then? We either need to check first if we have nested rules, but also then figuring out their name feels hacky.

[kof]

But how would we get these rules from inside the component then?

Evtl. by turning on a flag before adding a rule and checking that flag in the hook. Once flag is true, every added rule is added during addRule() after that you have an aggregated list of rules and clean up the list and move on.

That's just the idea in theory, I would have to try to see how this plays out.

[HenriBeck]

I will try to fix this on the weekend.

[HenriBeck]

This is fixed @kof

[kof]

🎉