From 58c18bfe496762c6dce26986b61c55d708c6d723 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Wed, 29 May 2019 17:34:55 +0800 Subject: [PATCH 1/5] Fix call on CSSStyleSheet.{addImport, addPageRule, addRule, deleteRule, insertRule, removeImport, removeRule} 1. Fix call on CSSStyleSheet.{addImport, addPageRule, addRule, deleteRule, insertRule, removeImport, removeRule} --- adoptedStyleSheets.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/adoptedStyleSheets.js b/adoptedStyleSheets.js index 001c649..0539210 100644 --- a/adoptedStyleSheets.js +++ b/adoptedStyleSheets.js @@ -100,6 +100,26 @@ CSSStyleSheet.prototype.replaceSync = replaceSync; StyleSheet.prototype.replaceSync = replaceSync; + + + function hookCSSStyleSheetMethod(/** @type {keyof typeof CSSStyleSheet.prototype} */ key) { + const old = CSSStyleSheet.prototype[key] + CSSStyleSheet.prototype[key] = function hook(...args) { + /** @type {_StyleSheet | CSSStyleSheet} */ + if (node in this) + this[node]._adopters.forEach(i => { + i.clone.sheet && i.clone.sheet[key](...args) + }) + return old.call(this, ...args) + } + } + hookCSSStyleSheetMethod('addImport') + hookCSSStyleSheetMethod('addPageRule') + hookCSSStyleSheetMethod('addRule') + hookCSSStyleSheetMethod('deleteRule') + hookCSSStyleSheetMethod('insertRule') + hookCSSStyleSheetMethod('removeImport') + hookCSSStyleSheetMethod('removeRule') window.CSSStyleSheet = _StyleSheet; const adoptedStyleSheetsConfig = { @@ -128,11 +148,9 @@ }); this._adopted = uniqueSheets; - if (this.isConnected) { - sheets.forEach(sheet => { - appendContent(this, sheet); - }); - } + sheets.forEach(sheet => { + appendContent(this, sheet); + }); } }; From fbf463b5730593f07f6a1dcc51991e7327d3a4c5 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Thu, 30 May 2019 13:10:08 +0800 Subject: [PATCH 2/5] Move styles from top to a --- adoptedStyleSheets.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/adoptedStyleSheets.js b/adoptedStyleSheets.js index 0539210..ad339c8 100644 --- a/adoptedStyleSheets.js +++ b/adoptedStyleSheets.js @@ -37,6 +37,7 @@ const constructed = Symbol('constructed'); const obsolete = Symbol('obsolete'); const iframe = document.createElement('iframe'); + const styles = Symbol('Styles'); const mutationCallback = mutations => { mutations.forEach(mutation => { const { addedNodes, removedNodes } = mutation; @@ -70,7 +71,11 @@ location.body ? location = location.body : null; clone[constructed] = location; sheet[node]._adopters.push({ location, clone }); - location.appendChild(clone); + if (!location[styles]) { + location[styles] = document.createElement('head'); + location.appendChild(location[styles]); + } + location[styles].appendChild(clone); return clone; }; From bfef3139793633390d647b0aa3bcb8e10ac0a1dd Mon Sep 17 00:00:00 2001 From: Jack Works Date: Thu, 30 May 2019 13:14:08 +0800 Subject: [PATCH 3/5] Only create new node for