Adds basic stylesheet autoprefixer

demo.ts

@@ -1,4 +1,11 @@
-import { QMainWindow, QWidget, QLabel, FlexLayout } from "./src/lib/index";
+import {
+  QMainWindow,
+  QWidget,
+  QLabel,
+  FlexLayout,
+  StyleSheet,
+  QPushButton
+} from "./src/lib/index";
 
 const win = new QMainWindow();
 //-------------------------------
@@ -10,20 +17,29 @@ centralWidget.setLayout(rootLayout);
 const label = new QLabel();
 label.setObjectName("mylabel");
 label.setText("Hello World");
+
+const btn = new QPushButton();
+btn.setText("Yo button");
+btn.setObjectName("btn");
 //--------------------------------------
 rootLayout.addWidget(label);
+rootLayout.addWidget(btn);
 win.setCentralWidget(centralWidget);
-win.setStyleSheet(
-  `
-    #myroot {
-      background-color: #009688;
-    }
-    #mylabel {
-      font-size: 16px;
-      font-weight: bold;
-    }
-  `
-);
+const winStyleSheet = StyleSheet.create(`
+  #myroot {
+    background-color: #009688;
+  }
+  #mylabel {
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 30px;
+  }
+  #btn {
+    margin-top: 30px;
+  }
+`);
+win.setStyleSheet(winStyleSheet);
 win.show();
+win.resize(400, 500);
 
 (global as any).win = win; // To prevent win from being garbage collected.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodegui/nodegui",
-  "version": "0.0.8-alpha",
+  "version": "0.0.9-alpha",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -97,7 +97,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -324,7 +323,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -332,8 +330,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "combined-stream": {
       "version": "1.0.8",
@@ -485,8 +482,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "execa": {
       "version": "0.7.0",
@@ -721,8 +717,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -1100,6 +1095,54 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "postcss": {
+      "version": "7.0.17",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz",
+      "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==",
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-nodegui-autoprefixer": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-nodegui-autoprefixer/-/postcss-nodegui-autoprefixer-0.0.2.tgz",
+      "integrity": "sha512-l/sdfUqwroAaimfGIhkL2207JcuppZWP7FY7fy4plgzhKltv3jI9RoxxKbqcwdvDF/Ccitxt9yjVZNED1WGXAQ==",
+      "requires": {
+        "postcss": "^7.0.17"
+      }
+    },
     "prepend-http": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
@@ -1344,6 +1387,11 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",

package.json

@@ -25,10 +25,11 @@
     "docs": "serve docs"
   },
   "dependencies": {
+    "@nodegui/test": "^0.0.10",
     "bindings": "^1.5.0",
     "node-addon-api": "^1.6.3",
     "node-gyp": "^4.0.0",
-    "@nodegui/test": "^0.0.10"
+    "postcss-nodegui-autoprefixer": "0.0.2"
   },
   "devDependencies": {
     "@types/bindings": "^1.3.0",

src/lib/QtGui/QWidget/index.ts

@@ -3,6 +3,7 @@ import { NodeLayout } from "../../QtWidgets/QLayout";
 import { EventWidget, BaseWidgetEvents } from "../../core/EventWidget";
 import { NativeElement } from "../../core/Component";
 import { FlexLayout } from "../../core/FlexLayout";
+import { StyleSheet } from "../../core/Style/StyleSheet";
 
 // All Widgets should extend from NodeWidget
 // Implement all native QWidget methods here so that all widgets get access to those aswell
@@ -27,8 +28,14 @@ export abstract class NodeWidget extends EventWidget {
     this.native.setLayout(parentLayout.native);
     this.layout = parentLayout;
   };
-  setStyleSheet = (style: string) => {
-    this.native.setStyleSheet(style);
+  setStyleSheet = async (style: string | Promise<string>) => {
+    this.native.setStyleSheet(await style);
+    setTimeout(() => {
+      if (this.layout) {
+        this.layout.invalidate(); // Hackfix: To trigger recalculation
+        this.layout.update();
+      }
+    }, 20);
   };
   hide = () => {
     this.native.hide();

src/lib/core/Style/StyleSheet.ts

@@ -0,0 +1,16 @@
+import postcss from "postcss";
+import autoprefixer from "postcss-nodegui-autoprefixer";
+
+export class StyleSheet {
+  static create = async (cssString: string): Promise<string> => {
+    const { css } = await postcss([autoprefixer()])
+      .process(cssString, {
+        from: undefined
+      })
+      .catch(err => {
+        console.warn(`Error autoprefixing`, err);
+        return { css: cssString };
+      });
+    return css;
+  };
+}

src/lib/index.ts

@@ -20,3 +20,4 @@ export { FlexLayout } from "./core/FlexLayout";
 // Events : Maybe a separate module ?
 export { QKeyEvent } from "./QtGui/QEvent/QKeyEvent";
 export { NativeEvent } from "./core/EventWidget";
+export { StyleSheet } from "./core/Style/StyleSheet";