feat: Update StyleManager support add CSSText

myxvisual · Aug 8, 2017 · 8149025 · 8149025
1 parent 040c2a9
commit 8149025
Showing 1 changed file with 28 additions and 12 deletions.
diff --git a/src/styles/StyleManager.ts b/src/styles/StyleManager.ts
@@ -27,6 +27,9 @@ export class StyleManager {
   styleNode: HTMLStyleElement;
   sheetsDidUpdate: () => void;
   CSSText = "";
+  addedCSSText: {
+    [key: string]: boolean;
+  } = {};
 
   constructor(config: {
     theme: ReactUWP.ThemeType;
@@ -37,13 +40,23 @@ export class StyleManager {
     this.sheetsDidUpdate = sheetsDidUpdate || (() => {});
     this.globalClassName = globalClassName ? `${globalClassName}-` : "";
     this.setupTheme(theme);
+    this.initStyleElement();
   }
 
   setupTheme = (theme: ReactUWP.ThemeType) => {
     this.theme = theme;
     this.themeId = createHash([theme.accent, theme.themeName, theme.useFluentDesign].join(", "));
   }
 
+  initStyleElement = () => {
+    const name = `data-uwp-jss-${this.themeId}`;
+    if (!this.styleElement) {
+      this.styleElement = document.createElement("style");
+      this.styleElement.setAttribute(name, "");
+      document.head.appendChild(this.styleElement);
+    }
+  }
+
   cleanStyleSheet = () => {
     if (this.styleElement) document.head.removeChild(this.styleElement);
     this.theme = null;
@@ -93,13 +106,21 @@ export class StyleManager {
     return this.addSheet(style, className, this.updateSheetsToDOM);
   }
 
-  addCSSText = (CSSText: string) => this.CSSText += CSSText;
+  addCSSText = (CSSText: string, callback = () => {}) => {
+    const hash = createHash(CSSText);
+    if (!this.addedCSSText[hash]) {
+      this.addedCSSText[hash] = true;
+      this.CSSText += CSSText;
+      callback();
+    }
+  }
 
   addCSSTextWithUpdate = (CSSText: string) => {
-    this.addCSSText(CSSText);
-    if (this.styleElement) {
-      this.updateStyleTextContent(this.styleElement.textContent += CSSText);
-    }
+    this.addCSSText(CSSText, () => {
+      if (this.styleElement) {
+        this.updateStyleTextContent(this.styleElement.textContent += CSSText);
+      }
+    });
   }
 
   removeSheetByID = () => {};
@@ -112,15 +133,10 @@ export class StyleManager {
 
   updateStyleTextContent = (textContent: string) => {
     const name = `data-uwp-jss-${this.themeId}`;
-    if (!this.styleElement) {
-      this.styleElement = document.createElement("style");
-      this.styleElement.setAttribute(name, "");
-      this.styleElement.textContent = textContent;
-      document.head.appendChild(this.styleElement);
-    } else {
+    if (this.styleElement) {
       this.styleElement.textContent = textContent;
+      this.sheetsDidUpdate();
     }
-    this.sheetsDidUpdate();
   }
 }