feat: StyleManager supprot render CSS

myxvisual · Aug 8, 2017 · 70c0380 · 70c0380
1 parent 40d3a45
commit 70c0380
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/src/styles/StyleManager.ts b/src/styles/StyleManager.ts
@@ -7,11 +7,13 @@ const getStyleValue = (key: string, value: string) => ((typeof value === "number
 export class StyleManager {
   theme: ReactUWP.ThemeType;
   themeId: number;
-  sheets: any[] = [];
+  styleElement: HTMLStyleElement = null;
+  sheets: any = {};
 
   constructor(theme: ReactUWP.ThemeType) {
     this.setupTheme(theme);
-    this.addSheet({}, "");
+    this.addSheet({}, "text");
+    this.renderToDOM();
   }
 
   setupTheme = (theme: ReactUWP.ThemeType) => {
@@ -32,15 +34,29 @@ export class StyleManager {
       lineHeight: 2
     };
     let CSSText = Object.keys(style).map(key => `  ${replace2Dashes(key)}: ${getStyleValue(key, style[key])};`).join("\n");
-    const id = createHash(CSSText);
+    const id = createHash(`.${className} {\n${CSSText}\n}`);
     CSSText = `.${className}-${id} {\n${CSSText}\n}`;
+    this.sheets[id] = { CSSText };
   }
 
   updateSheetByID = () => {};
 
   updateAllSheets = () => {};
 
   removeSheetByID = () => {};
+
+  renderToDOM = () => {
+    this.styleElement = document.querySelector("[data-uwp-jss]") as HTMLStyleElement;
+    const textContent = `\n${Object.keys(this.sheets).map(id => this.sheets[id].CSSText).join("\n")}\n`;
+    if (!this.styleElement) {
+      this.styleElement = document.createElement("style");
+      this.styleElement.setAttribute("data-uwp-jss", "");
+      this.styleElement.textContent = textContent;
+      document.head.appendChild(this.styleElement);
+    } else {
+      this.styleElement.textContent = textContent;
+    }
+  }
 }
 
 export default StyleManager;