feat: StyleManager support inline-style transform to CSSText

package.json

@@ -44,6 +44,7 @@
     "react-dom": "^15.4.0"
   },
   "devDependencies": {
+    "@types/murmurhash-js": "^1.0.2",
     "@types/react-router": "^3.0.11",
     "babel-eslint": "^7.2.3",
     "babel-preset-es2015": "^6.24.1",
@@ -76,8 +77,11 @@
     "@types/react-transition-group": "^1.1.0",
     "@types/tinycolor2": "^1.1.1",
     "inline-style-prefixer": "^3.0.5",
+    "jss": "^8.1.0",
+    "jss-preset-default": "^3.0.0",
     "keycode": "^2.1.8",
     "marked": "^0.3.6",
+    "murmurhash-js": "^1.0.0",
     "prismjs": "^1.6.0",
     "prop-types": "^15.5.8",
     "react-lazyload": "^2.2.7",

src/common/react/isUnitlessNumber.ts

@@ -0,0 +1,47 @@
+export const isUnitlessNumber = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};
+
+export default isUnitlessNumber;

src/styles/StyleManager.ts

@@ -1,9 +1,22 @@
+import * as createHash from "murmurhash-js/murmurhash3_gc";
+import isUnitlessNumber from "../common/react/isUnitlessNumber";
+
+const replace2Dashes = (key: string) => key.replace(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`);
+const getStyleValue = (key: string, value: string) => ((typeof value === "number" && !(isUnitlessNumber as any)[key]) ? `${value}px` : value);
+
 export class StyleManager {
   theme: ReactUWP.ThemeType;
+  themeId: number;
   sheets: any[] = [];
 
   constructor(theme: ReactUWP.ThemeType) {
+    this.setupTheme(theme);
+    this.addSheet({}, "");
+  }
+
+  setupTheme = (theme: ReactUWP.ThemeType) => {
     this.theme = theme;
+    this.themeId = createHash(JSON.stringify(theme));
   }
 
   renderSheets = () => {};
@@ -12,11 +25,20 @@ export class StyleManager {
 
   updateTheme = () => {};
 
-  addSheet = () => {};
+  addSheet = (style: React.CSSProperties, className = "") => {
+    style = {
+      borderTop: 2,
+      fontSize: 12,
+      lineHeight: 2
+    };
+    let CSSText = Object.keys(style).map(key => `  ${replace2Dashes(key)}: ${getStyleValue(key, style[key])};`).join("\n");
+    const id = createHash(CSSText);
+    CSSText = `.${className}-${id} {\n${CSSText}\n}`;
+  }
 
   updateSheetByID = () => {};
 
-  updateAllSheet = () => {};
+  updateAllSheets = () => {};
 
   removeSheetByID = () => {};
 }