From c283ce7edc5717a74d1c60cc1266881a88fc6503 Mon Sep 17 00:00:00 2001 From: Henri Beck Date: Thu, 9 Aug 2018 18:28:43 +0200 Subject: [PATCH 1/4] Added failing test for the ordering issue --- packages/jss/tests/functional/priority.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/jss/tests/functional/priority.js b/packages/jss/tests/functional/priority.js index 3a1023457..8e534c46f 100644 --- a/packages/jss/tests/functional/priority.js +++ b/packages/jss/tests/functional/priority.js @@ -189,29 +189,33 @@ describe('Functional: dom priority', () => { }) }) - describe('element insertion point', () => { + describe('element insertion point: body', () => { let insertionPoint let sheet1 let sheet2 + let sheet3 beforeEach(() => { insertionPoint = document.body.appendChild(document.createElement('div')) const jss = create({insertionPoint}) sheet2 = jss.createStyleSheet({}, {meta: 'sheet2', index: 2}).attach() sheet1 = jss.createStyleSheet({}, {meta: 'sheet1', index: 1}).attach() + sheet3 = jss.createStyleSheet({}, {meta: 'sheet3', index: 3}).attach() }) afterEach(() => { document.body.removeChild(insertionPoint) sheet2.detach() sheet1.detach() + sheet3.detach() }) it('should insert sheets in the correct order', () => { const styleElements = document.body.getElementsByTagName('style') - expect(styleElements.length).to.be(2) + expect(styleElements.length).to.be(3) expect(styleElements[0].getAttribute('data-meta')).to.be('sheet1') expect(styleElements[1].getAttribute('data-meta')).to.be('sheet2') + expect(styleElements[2].getAttribute('data-meta')).to.be('sheet3') }) }) From a966c5163fc69392980bd88d9cc7cfe3b2d5411e Mon Sep 17 00:00:00 2001 From: Henri Beck Date: Thu, 9 Aug 2018 18:29:28 +0200 Subject: [PATCH 2/4] Added fix for the issue --- packages/jss/src/renderers/DomRenderer.js | 41 +++++++++++++++++------ 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/jss/src/renderers/DomRenderer.js b/packages/jss/src/renderers/DomRenderer.js index 429922bed..e912ec1dd 100644 --- a/packages/jss/src/renderers/DomRenderer.js +++ b/packages/jss/src/renderers/DomRenderer.js @@ -216,33 +216,54 @@ function findCommentNode(text: string): Node | null { return null } +type PrevNode = { + parent: ?Node, + node: ?Node +} + /** * Find a node before which we can insert the sheet. */ -function findPrevNode(options: PriorityOptions): ?Node | null { +function findPrevNode(options: PriorityOptions): PrevNode | false { const {registry} = sheets if (registry.length > 0) { // Try to insert before the next higher sheet. let sheet = findHigherSheet(registry, options) - if (sheet) return sheet.renderer.element + if (sheet) { + return { + parent: sheet.renderer.element.parentNode, + node: sheet.renderer.element + } + } // Otherwise insert after the last attached. sheet = findHighestSheet(registry, options) - if (sheet) return sheet.renderer.element.nextElementSibling + if (sheet) { + return { + parent: sheet.renderer.element.parentNode, + node: sheet.renderer.element.nextSibling + } + } } // Try to find a comment placeholder if registry is empty. const {insertionPoint} = options if (insertionPoint && typeof insertionPoint === 'string') { const comment = findCommentNode(insertionPoint) - if (comment) return comment.nextSibling + if (comment) { + return { + parent: comment.parentNode, + node: comment.nextSibling + } + } + // If user specifies an insertion point and it can't be found in the document - // bad specificity issues may appear. warning(insertionPoint === 'jss', '[JSS] Insertion point "%s" not found.', insertionPoint) } - return null + return false } /** @@ -250,11 +271,11 @@ function findPrevNode(options: PriorityOptions): ?Node | null { */ function insertStyle(style: HTMLElement, options: PriorityOptions) { const {insertionPoint} = options - const prevNode = findPrevNode(options) + const nextNode = findPrevNode(options) + + if (nextNode !== false) { + if (nextNode.parent) nextNode.parent.insertBefore(style, nextNode.node) - if (prevNode) { - const {parentNode} = prevNode - if (parentNode) parentNode.insertBefore(style, prevNode) return } @@ -268,7 +289,7 @@ function insertStyle(style: HTMLElement, options: PriorityOptions) { return } - getHead().insertBefore(style, prevNode) + getHead().appendChild(style) } /** From 5c274f2c6ebc124c1fb931091b8f7ea4c774cb15 Mon Sep 17 00:00:00 2001 From: Henri Beck Date: Sat, 11 Aug 2018 16:34:36 +0200 Subject: [PATCH 3/4] Update size-snapshots --- packages/jss/.size-snapshot.json | 28 +++++++++++++------------- packages/react-jss/.size-snapshot.json | 12 +++++------ 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/jss/.size-snapshot.json b/packages/jss/.size-snapshot.json index de22526d8..4ae151603 100644 --- a/packages/jss/.size-snapshot.json +++ b/packages/jss/.size-snapshot.json @@ -1,30 +1,30 @@ { "dist/jss.js": { - "bundled": 70577, - "minified": 20173, - "gzipped": 6124 + "bundled": 70964, + "minified": 20276, + "gzipped": 6147 }, "dist/jss.min.js": { - "bundled": 69339, - "minified": 19555, - "gzipped": 5805 + "bundled": 69726, + "minified": 19658, + "gzipped": 5829 }, "dist/jss.cjs.js": { - "bundled": 48406, - "minified": 20842, - "gzipped": 5950 + "bundled": 48625, + "minified": 20945, + "gzipped": 5975 }, "dist/jss.esm.js": { - "bundled": 47981, - "minified": 20488, - "gzipped": 5866, + "bundled": 48200, + "minified": 20591, + "gzipped": 5892, "treeshaked": { "rollup": { - "code": 17463, + "code": 17566, "import_statements": 85 }, "webpack": { - "code": 18755 + "code": 18858 } } } diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index 2c52060a9..f05262e2b 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/packages/react-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "dist/react-jss.js": { - "bundled": 236824, - "minified": 65331, - "gzipped": 17972 + "bundled": 237212, + "minified": 65434, + "gzipped": 17994 }, "dist/react-jss.min.js": { - "bundled": 201522, - "minified": 55978, - "gzipped": 15787 + "bundled": 201910, + "minified": 56081, + "gzipped": 15810 }, "dist/react-jss.cjs.js": { "bundled": 17646, From a7a39902012b1b08ce86a60b2f0c3cea1da3b70d Mon Sep 17 00:00:00 2001 From: Henri Beck Date: Sun, 12 Aug 2018 22:37:41 +0200 Subject: [PATCH 4/4] Fix tests --- packages/jss/.size-snapshot.json | 16 ++++++++-------- packages/jss/src/renderers/DomRenderer.js | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/jss/.size-snapshot.json b/packages/jss/.size-snapshot.json index 4ae151603..0b4b116f7 100644 --- a/packages/jss/.size-snapshot.json +++ b/packages/jss/.size-snapshot.json @@ -1,23 +1,23 @@ { "dist/jss.js": { - "bundled": 70964, + "bundled": 70962, "minified": 20276, - "gzipped": 6147 + "gzipped": 6145 }, "dist/jss.min.js": { - "bundled": 69726, + "bundled": 69724, "minified": 19658, - "gzipped": 5829 + "gzipped": 5827 }, "dist/jss.cjs.js": { - "bundled": 48625, + "bundled": 48623, "minified": 20945, - "gzipped": 5975 + "gzipped": 5971 }, "dist/jss.esm.js": { - "bundled": 48200, + "bundled": 48198, "minified": 20591, - "gzipped": 5892, + "gzipped": 5887, "treeshaked": { "rollup": { "code": 17566, diff --git a/packages/jss/src/renderers/DomRenderer.js b/packages/jss/src/renderers/DomRenderer.js index e912ec1dd..4a1fa9f5d 100644 --- a/packages/jss/src/renderers/DomRenderer.js +++ b/packages/jss/src/renderers/DomRenderer.js @@ -273,8 +273,8 @@ function insertStyle(style: HTMLElement, options: PriorityOptions) { const {insertionPoint} = options const nextNode = findPrevNode(options) - if (nextNode !== false) { - if (nextNode.parent) nextNode.parent.insertBefore(style, nextNode.node) + if (nextNode !== false && nextNode.parent) { + nextNode.parent.insertBefore(style, nextNode.node) return }