make rule-value-function and global work together

packages/jss-plugin-rule-value-function/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "jss-plugin-rule-value-function.js": {
-    "bundled": 2958,
-    "minified": 1046,
-    "gzipped": 579
+    "bundled": 3816,
+    "minified": 1409,
+    "gzipped": 750
   },
   "jss-plugin-rule-value-function.min.js": {
-    "bundled": 2379,
-    "minified": 795,
-    "gzipped": 455
+    "bundled": 3237,
+    "minified": 1158,
+    "gzipped": 631
   },
   "jss-plugin-rule-value-function.cjs.js": {
-    "bundled": 2526,
-    "minified": 1058,
-    "gzipped": 551
+    "bundled": 3100,
+    "minified": 1341,
+    "gzipped": 674
   },
   "jss-plugin-rule-value-function.esm.js": {
-    "bundled": 2240,
-    "minified": 835,
-    "gzipped": 452,
+    "bundled": 2731,
+    "minified": 1062,
+    "gzipped": 569,
     "treeshaked": {
       "rollup": {
-        "code": 33,
-        "import_statements": 33
+        "code": 76,
+        "import_statements": 76
       },
       "webpack": {
-        "code": 1071
+        "code": 1147
       }
     }
   }

packages/jss-plugin-rule-value-function/src/index.js

@@ -2,6 +2,7 @@
 import warning from 'tiny-warning'
 import {
   createRule,
+  RuleList,
   type Rule,
   type JssStyle,
   type RuleOptions,
@@ -22,7 +23,19 @@ export default function functionPlugin() {
     onCreateRule(name?: string, decl: JssStyle, options: RuleOptions): Rule | null {
       if (typeof decl !== 'function') return null
       const rule: StyleRuleWithRuleFunction = (createRule(name, {}, options): any)
-      rule[fnRuleNs] = decl
+      if (rule.type == 'global')
+        rule.updateFun = data => {
+          // compute styles
+          let styles = decl(data)
+          // Build a new RuleList that replaces the former one
+          rule.rules = new RuleList({
+            ...rule.options,
+            parent: rule
+          })
+          for (const selector in styles) rule.rules.add(selector, styles[selector])
+          rule.rules.process()
+        }
+      else rule[fnRuleNs] = decl
       return rule
     },
 

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "jss.js": {
-    "bundled": 63033,
-    "minified": 23299,
-    "gzipped": 7090
+    "bundled": 63305,
+    "minified": 23353,
+    "gzipped": 7113
   },
   "jss.min.js": {
-    "bundled": 61636,
-    "minified": 22531,
-    "gzipped": 6743
+    "bundled": 61908,
+    "minified": 22585,
+    "gzipped": 6766
   },
   "jss.cjs.js": {
-    "bundled": 58745,
-    "minified": 26132,
-    "gzipped": 7181
+    "bundled": 59011,
+    "minified": 26186,
+    "gzipped": 7209
   },
   "jss.esm.js": {
-    "bundled": 57127,
-    "minified": 24833,
-    "gzipped": 7000,
+    "bundled": 57393,
+    "minified": 24887,
+    "gzipped": 7028,
     "treeshaked": {
       "rollup": {
-        "code": 20291,
+        "code": 20345,
         "import_statements": 345
       },
       "webpack": {
-        "code": 21773
+        "code": 21827
       }
     }
   }

packages/jss/src/RuleList.js

@@ -200,16 +200,22 @@ export default class RuleList {
       sheet
     } = this.options
 
+    // updateFun is a workaround to use together
+    // jss-plugin-rule-value-function and jss-plugin-global
+    const hasUpdateFun = typeof rule.updateFun == 'function'
+
     // It is a rules container like for e.g. ConditionalRule.
-    if (rule.rules instanceof RuleList) {
+    // Ignore if there is an updateFun
+    if (!hasUpdateFun && rule.rules instanceof RuleList) {
       rule.rules.update(data, options)
       return
     }
 
     const styleRule: StyleRule = (rule: any)
     const {style} = styleRule
 
-    plugins.onUpdate(data, rule, sheet, options)
+    if (hasUpdateFun) rule.updateFun(data)
+    else plugins.onUpdate(data, rule, sheet, options)
 
     // We rely on a new `style` ref in case it was mutated during onUpdate hook.
     if (options.process && style && style !== styleRule.style) {