From 46493add8ef5613e8603aca50a67f388c1d256ee Mon Sep 17 00:00:00 2001 From: Mickael Jeanroy Date: Wed, 23 Jun 2021 16:30:39 +0200 Subject: [PATCH] Fix media query issue --- packages/css-jss/.size-snapshot.json | 12 +++---- .../jss-plugin-global/.size-snapshot.json | 24 ++++++------- packages/jss-plugin-global/src/index.js | 14 ++++++++ .../jss-plugin-nested/.size-snapshot.json | 24 ++++++------- packages/jss-plugin-nested/src/index.js | 17 ++++++---- .../jss-preset-default/.size-snapshot.json | 12 +++---- packages/jss-starter-kit/.size-snapshot.json | 12 +++---- packages/jss/.size-snapshot.json | 28 +++++++-------- packages/jss/src/StyleSheet.js | 34 ++++++++++++++----- packages/react-jss/.size-snapshot.json | 12 +++---- 10 files changed, 111 insertions(+), 78 deletions(-) diff --git a/packages/css-jss/.size-snapshot.json b/packages/css-jss/.size-snapshot.json index 96efc7433..a281686e8 100644 --- a/packages/css-jss/.size-snapshot.json +++ b/packages/css-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "css-jss.js": { - "bundled": 61186, - "minified": 21939, - "gzipped": 7380 + "bundled": 61681, + "minified": 22104, + "gzipped": 7434 }, "css-jss.min.js": { - "bundled": 60111, - "minified": 21316, - "gzipped": 7100 + "bundled": 60606, + "minified": 21481, + "gzipped": 7155 }, "css-jss.cjs.js": { "bundled": 3034, diff --git a/packages/jss-plugin-global/.size-snapshot.json b/packages/jss-plugin-global/.size-snapshot.json index 44e3c185e..a3041187a 100644 --- a/packages/jss-plugin-global/.size-snapshot.json +++ b/packages/jss-plugin-global/.size-snapshot.json @@ -1,23 +1,23 @@ { "jss-plugin-global.js": { - "bundled": 5195, - "minified": 2291, - "gzipped": 941 + "bundled": 5562, + "minified": 2405, + "gzipped": 969 }, "jss-plugin-global.min.js": { - "bundled": 5195, - "minified": 2291, - "gzipped": 941 + "bundled": 5562, + "minified": 2405, + "gzipped": 969 }, "jss-plugin-global.cjs.js": { - "bundled": 4452, - "minified": 2417, - "gzipped": 913 + "bundled": 4803, + "minified": 2531, + "gzipped": 947 }, "jss-plugin-global.esm.js": { - "bundled": 4106, - "minified": 2143, - "gzipped": 808, + "bundled": 4457, + "minified": 2257, + "gzipped": 841, "treeshaked": { "rollup": { "code": 55, diff --git a/packages/jss-plugin-global/src/index.js b/packages/jss-plugin-global/src/index.js index 0dc7506fe..1b08f8254 100644 --- a/packages/jss-plugin-global/src/index.js +++ b/packages/jss-plugin-global/src/index.js @@ -50,11 +50,25 @@ class GlobalContainerRule implements ContainerRule { * Create and register rule, run plugins. */ addRule(name, style, options) { + return this.createRule(name, style, options) + } + + // eslint-disable-next-line class-methods-use-this + prepareQueue() { + // NoOp + } + + createRule(name, style, options) { const rule = this.rules.add(name, style, options) if (rule) this.options.jss.plugins.onProcessRule(rule) return rule } + // eslint-disable-next-line class-methods-use-this + deployRule() { + // NoOp + } + /** * Get index of a rule. */ diff --git a/packages/jss-plugin-nested/.size-snapshot.json b/packages/jss-plugin-nested/.size-snapshot.json index 0e8ed5bc8..0383d9d1b 100644 --- a/packages/jss-plugin-nested/.size-snapshot.json +++ b/packages/jss-plugin-nested/.size-snapshot.json @@ -1,23 +1,23 @@ { "jss-plugin-nested.js": { - "bundled": 4795, - "minified": 1622, - "gzipped": 885 + "bundled": 4923, + "minified": 1673, + "gzipped": 918 }, "jss-plugin-nested.min.js": { - "bundled": 4355, - "minified": 1406, - "gzipped": 757 + "bundled": 4483, + "minified": 1457, + "gzipped": 791 }, "jss-plugin-nested.cjs.js": { - "bundled": 4052, - "minified": 1582, - "gzipped": 811 + "bundled": 4176, + "minified": 1633, + "gzipped": 845 }, "jss-plugin-nested.esm.js": { - "bundled": 3633, - "minified": 1259, - "gzipped": 696, + "bundled": 3757, + "minified": 1310, + "gzipped": 732, "treeshaked": { "rollup": { "code": 64, diff --git a/packages/jss-plugin-nested/src/index.js b/packages/jss-plugin-nested/src/index.js index a9bdb5642..6616f7e54 100644 --- a/packages/jss-plugin-nested/src/index.js +++ b/packages/jss-plugin-nested/src/index.js @@ -98,13 +98,16 @@ export default function jssNested(): Plugin { container.addRule(selector, style[prop], {...options, selector}) } else if (isNestedConditional) { // Place conditional right after the parent rule to ensure right ordering. - container - .addRule(prop, {}, options) - // Flow expects more options but they aren't required - // And flow doesn't know this will always be a StyleRule which has the addRule method - // $FlowFixMe[incompatible-use] - // $FlowFixMe[prop-missing] - .addRule(styleRule.key, style[prop], {selector: styleRule.selector}) + const queue = container.prepareQueue() + const addedRule = container.createRule(prop, {}, options) + + // Flow expects more options but they aren't required + // And flow doesn't know this will always be a StyleRule which has the addRule method + // $FlowFixMe[incompatible-use] + // $FlowFixMe[prop-missing] + addedRule.addRule(styleRule.key, style[prop], {selector: styleRule.selector}) + + container.deployRule(addedRule, queue) } delete style[prop] diff --git a/packages/jss-preset-default/.size-snapshot.json b/packages/jss-preset-default/.size-snapshot.json index 138b18701..65a0b8c2b 100644 --- a/packages/jss-preset-default/.size-snapshot.json +++ b/packages/jss-preset-default/.size-snapshot.json @@ -1,13 +1,13 @@ { "jss-preset-default.js": { - "bundled": 58386, - "minified": 21163, - "gzipped": 7032 + "bundled": 58881, + "minified": 21328, + "gzipped": 7081 }, "jss-preset-default.min.js": { - "bundled": 57311, - "minified": 20540, - "gzipped": 6753 + "bundled": 57806, + "minified": 20705, + "gzipped": 6803 }, "jss-preset-default.cjs.js": { "bundled": 2222, diff --git a/packages/jss-starter-kit/.size-snapshot.json b/packages/jss-starter-kit/.size-snapshot.json index ae803f6e6..b9aa029f9 100644 --- a/packages/jss-starter-kit/.size-snapshot.json +++ b/packages/jss-starter-kit/.size-snapshot.json @@ -1,13 +1,13 @@ { "jss-starter-kit.js": { - "bundled": 74529, - "minified": 31614, - "gzipped": 9665 + "bundled": 75024, + "minified": 31779, + "gzipped": 9720 }, "jss-starter-kit.min.js": { - "bundled": 73454, - "minified": 31426, - "gzipped": 9442 + "bundled": 73949, + "minified": 31591, + "gzipped": 9496 }, "jss-starter-kit.cjs.js": { "bundled": 5647, diff --git a/packages/jss/.size-snapshot.json b/packages/jss/.size-snapshot.json index e963463ba..5ad914cb4 100644 --- a/packages/jss/.size-snapshot.json +++ b/packages/jss/.size-snapshot.json @@ -1,30 +1,30 @@ { "jss.js": { - "bundled": 63839, - "minified": 23351, - "gzipped": 7097 + "bundled": 64256, + "minified": 23567, + "gzipped": 7140 }, "jss.min.js": { - "bundled": 62442, - "minified": 22583, - "gzipped": 6747 + "bundled": 62859, + "minified": 22799, + "gzipped": 6789 }, "jss.cjs.js": { - "bundled": 59531, - "minified": 26202, - "gzipped": 7199 + "bundled": 59922, + "minified": 26418, + "gzipped": 7246 }, "jss.esm.js": { - "bundled": 57923, - "minified": 24913, - "gzipped": 7026, + "bundled": 58314, + "minified": 25129, + "gzipped": 7069, "treeshaked": { "rollup": { - "code": 20340, + "code": 20556, "import_statements": 345 }, "webpack": { - "code": 21825 + "code": 22041 } } } diff --git a/packages/jss/src/StyleSheet.js b/packages/jss/src/StyleSheet.js index 24631f7a6..d38bdb3db 100644 --- a/packages/jss/src/StyleSheet.js +++ b/packages/jss/src/StyleSheet.js @@ -83,21 +83,39 @@ export default class StyleSheet { * Will insert a rule also after the stylesheet has been rendered first time. */ addRule(name: string, decl: JssStyle, options?: RuleOptions): Rule | null { - const {queue} = this + const queue = this.prepareQueue() + const rule = this.createRule(name, decl, options) - // Plugins can create rules. - // In order to preserve the right order, we need to queue all `.addRule` calls, - // which happen after the first `rules.add()` call. - if (this.attached && !queue) this.queue = [] + if (!rule) return null + this.deployRule(rule, queue) + + return rule + } + + createRule(name: string, decl: JssStyle, options?: RuleOptions): Rule | null { const rule = this.rules.add(name, decl, options) if (!rule) return null + this.prepareQueue() this.options.jss.plugins.onProcessRule(rule) + return rule + } + + prepareQueue(): ?Array { + const {queue} = this + // Plugins can create rules. + // In order to preserve the right order, we need to queue all `.addRule` calls, + // which happen after the first `rules.add()` call. + if (this.attached && !queue) this.queue = [] + return queue + } + + deployRule(rule: Rule, queue: ?Array): void { if (this.attached) { - if (!this.deployed) return rule + if (!this.deployed) return // Don't insert rule directly if there is no stringified version yet. // It will be inserted all together when .attach is called. if (queue) queue.push(rule) @@ -108,14 +126,12 @@ export default class StyleSheet { this.queue = undefined } } - return rule + return } // We can't add rules to a detached style node. // We will redeploy the sheet once user will attach it. this.deployed = false - - return rule } /** diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index b08b8c533..44c78918d 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/packages/react-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "react-jss.js": { - "bundled": 169770, - "minified": 59580, - "gzipped": 19568 + "bundled": 170265, + "minified": 59745, + "gzipped": 19621 }, "react-jss.min.js": { - "bundled": 112410, - "minified": 42780, - "gzipped": 14522 + "bundled": 112905, + "minified": 42945, + "gzipped": 14573 }, "react-jss.cjs.js": { "bundled": 27701,