From 26fd58d8d15b69297325dbac40b3300572677892 Mon Sep 17 00:00:00 2001 From: Atul R Date: Wed, 7 Aug 2019 23:50:27 +0200 Subject: [PATCH] Adds basic stylesheet autoprefixer --- demo.ts | 40 +++++++++++++------ package-lock.json | 66 +++++++++++++++++++++++++++----- package.json | 3 +- src/lib/QtGui/QWidget/index.ts | 11 +++++- src/lib/core/Style/StyleSheet.ts | 16 ++++++++ src/lib/index.ts | 1 + 6 files changed, 113 insertions(+), 24 deletions(-) create mode 100644 src/lib/core/Style/StyleSheet.ts diff --git a/demo.ts b/demo.ts index af7af1231..dfb355b52 100644 --- a/demo.ts +++ b/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. diff --git a/package-lock.json b/package-lock.json index c73cca70c..4f46c685d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 63c5cebe2..b319afa6f 100644 --- a/package.json +++ b/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", diff --git a/src/lib/QtGui/QWidget/index.ts b/src/lib/QtGui/QWidget/index.ts index 2bc48bf4b..5c5da54e0 100644 --- a/src/lib/QtGui/QWidget/index.ts +++ b/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) => { + this.native.setStyleSheet(await style); + setTimeout(() => { + if (this.layout) { + this.layout.invalidate(); // Hackfix: To trigger recalculation + this.layout.update(); + } + }, 20); }; hide = () => { this.native.hide(); diff --git a/src/lib/core/Style/StyleSheet.ts b/src/lib/core/Style/StyleSheet.ts new file mode 100644 index 000000000..018c17242 --- /dev/null +++ b/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 => { + const { css } = await postcss([autoprefixer()]) + .process(cssString, { + from: undefined + }) + .catch(err => { + console.warn(`Error autoprefixing`, err); + return { css: cssString }; + }); + return css; + }; +} diff --git a/src/lib/index.ts b/src/lib/index.ts index 7e2d1e052..e0a67932a 100644 --- a/src/lib/index.ts +++ b/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";