diff --git a/packages/jss-plugin-rule-value-function/.size-snapshot.json b/packages/jss-plugin-rule-value-function/.size-snapshot.json index 3708f18ea..df3e09c65 100644 --- a/packages/jss-plugin-rule-value-function/.size-snapshot.json +++ b/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 } } } diff --git a/packages/jss-plugin-rule-value-function/src/index.js b/packages/jss-plugin-rule-value-function/src/index.js index a59956465..aa9acf4b6 100644 --- a/packages/jss-plugin-rule-value-function/src/index.js +++ b/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 }, diff --git a/packages/jss/.size-snapshot.json b/packages/jss/.size-snapshot.json index 402f80a1f..8b0f64131 100644 --- a/packages/jss/.size-snapshot.json +++ b/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 } } } diff --git a/packages/jss/src/RuleList.js b/packages/jss/src/RuleList.js index 001d438f8..dcab9bbdf 100644 --- a/packages/jss/src/RuleList.js +++ b/packages/jss/src/RuleList.js @@ -200,8 +200,13 @@ 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 } @@ -209,7 +214,8 @@ export default class RuleList { 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) {