From 31655e558c48c127c3f2c64c44daca6576976020 Mon Sep 17 00:00:00 2001 From: Jiiks Date: Sun, 11 Feb 2018 16:59:55 +0200 Subject: [PATCH 1/3] add sass compiler and reject to ipc --- client/src/index.js | 3 ++- common/modules/bdipc.js | 7 ++++++- core/src/main.js | 17 +++++++++++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/client/src/index.js b/client/src/index.js index 47d0519d..15c09440 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -11,11 +11,12 @@ import { DOM, BdUI } from 'ui'; import BdCss from './styles/index.scss'; import { Events, CssEditor, Globals, PluginManager, ThemeManager, ModuleManager, WebpackModules } from 'modules'; -import { ClientLogger as Logger } from 'common'; +import { ClientLogger as Logger, ClientIPC } from 'common'; class BetterDiscord { constructor() { + window.ClientIPC = ClientIPC; window.css = CssEditor; window.pm = PluginManager; window.events = Events; diff --git a/common/modules/bdipc.js b/common/modules/bdipc.js index 89d287cc..97d598b4 100644 --- a/common/modules/bdipc.js +++ b/common/modules/bdipc.js @@ -20,7 +20,12 @@ export class ClientIPC { const __eid = Date.now().toString(); ipcRenderer.send(channel, Object.assign(message ? message : {}, { __eid })); return new Promise((resolve, reject) => { - ipcRenderer.once(__eid, (event, arg) => resolve(arg)); + ipcRenderer.once(__eid, (event, arg) => { + if (arg.err) { + return reject(arg.err); + } + resolve(arg); + }); }); } } diff --git a/core/src/main.js b/core/src/main.js index 05b1b78a..0429ebb0 100644 --- a/core/src/main.js +++ b/core/src/main.js @@ -9,6 +9,7 @@ */ const path = require('path'); +const sass = require('node-sass'); /** * DEVELOPMENT VARIABLES @@ -62,6 +63,22 @@ class Comms { o.reply(filenames); }); }); + + BDIpc.on('bd-compileSass', o => { + const { scss, path } = o.args; + if (!scss && !path) return; + + sass.render({ + file: path, + data: scss + }, (err, result) => { + if (err) { + o.reply({ err }); + return; + } + o.reply(result.css.toString()); + }); + }); } async readFile(o, json) { From fa9c0d2f942f19c836570e11aa806b98f3fb545f Mon Sep 17 00:00:00 2001 From: Jiiks Date: Sun, 11 Feb 2018 17:42:24 +0200 Subject: [PATCH 2/3] Compile theme scss --- client/src/modules/thememanager.js | 9 +++++++-- tests/themes/Example/config.json | 5 +++-- tests/themes/Example/index.css | 7 ------- tests/themes/Example/index.scss | 9 +++++++++ tests/themes/Example/vars.scss | 1 + 5 files changed, 20 insertions(+), 11 deletions(-) delete mode 100644 tests/themes/Example/index.css create mode 100644 tests/themes/Example/index.scss create mode 100644 tests/themes/Example/vars.scss diff --git a/client/src/modules/thememanager.js b/client/src/modules/thememanager.js index 32946afb..cbf11716 100644 --- a/client/src/modules/thememanager.js +++ b/client/src/modules/thememanager.js @@ -10,7 +10,7 @@ import ContentManager from './contentmanager'; import { DOM } from 'ui'; -import { FileUtils } from 'common'; +import { FileUtils, ClientIPC } from 'common'; class Theme { @@ -94,7 +94,12 @@ export default class extends ContentManager { static get loadContent() { return this.loadTheme } static async loadTheme(paths, configs, info, main) { try { - const css = await FileUtils.readFile(paths.mainPath); + let css = ''; + if (info.type === 'sass') { + css = await ClientIPC.send('bd-compileSass', { path: paths.mainPath }); + } else { + css = await FileUtils.readFile(paths.mainPath); + } const instance = new Theme({ configs, info, main, paths: { contentPath: paths.contentPath, dirName: paths.dirName }, css }); if (instance.enabled) instance.enable(); return instance; diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json index 364f03cb..6a5ee81f 100644 --- a/tests/themes/Example/config.json +++ b/tests/themes/Example/config.json @@ -4,9 +4,10 @@ "authors": [ "Jiiks" ], "version": 1.0, "description": "Example Theme 1 Description", - "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==" + "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==", + "type": "sass" }, - "main": "index.css", + "main": "index.scss", "defaultConfig": [ { "category": "default", diff --git a/tests/themes/Example/index.css b/tests/themes/Example/index.css deleted file mode 100644 index 87adf4d5..00000000 --- a/tests/themes/Example/index.css +++ /dev/null @@ -1,7 +0,0 @@ -div { - background: red; -} - -span { - border: 1px solid brown; -} \ No newline at end of file diff --git a/tests/themes/Example/index.scss b/tests/themes/Example/index.scss new file mode 100644 index 00000000..54102d16 --- /dev/null +++ b/tests/themes/Example/index.scss @@ -0,0 +1,9 @@ +@import 'vars.scss'; + +div { + background: $divBg; +} + +span { + border: 1px solid brown; +} \ No newline at end of file diff --git a/tests/themes/Example/vars.scss b/tests/themes/Example/vars.scss new file mode 100644 index 00000000..440a4826 --- /dev/null +++ b/tests/themes/Example/vars.scss @@ -0,0 +1 @@ +$divBg: green; \ No newline at end of file From 8bb388fb25544198d2851608361e2307b619e068 Mon Sep 17 00:00:00 2001 From: Jiiks Date: Sun, 11 Feb 2018 18:28:47 +0200 Subject: [PATCH 3/3] Dynamic vars support --- core/src/main.js | 6 ++---- tests/themes/Example/index.scss | 2 +- tests/themes/Example/vars.scss | 3 ++- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/core/src/main.js b/core/src/main.js index 0429ebb0..0a400f74 100644 --- a/core/src/main.js +++ b/core/src/main.js @@ -67,11 +67,9 @@ class Comms { BDIpc.on('bd-compileSass', o => { const { scss, path } = o.args; if (!scss && !path) return; + const data = scss ? `${scss} @import '${path}';` : `@import '${path}';`; - sass.render({ - file: path, - data: scss - }, (err, result) => { + sass.render({ data }, (err, result) => { if (err) { o.reply({ err }); return; diff --git a/tests/themes/Example/index.scss b/tests/themes/Example/index.scss index 54102d16..97bebc4e 100644 --- a/tests/themes/Example/index.scss +++ b/tests/themes/Example/index.scss @@ -5,5 +5,5 @@ div { } span { - border: 1px solid brown; + border: 1px solid rgba(20, 20, 20, $spanOpacity); } \ No newline at end of file diff --git a/tests/themes/Example/vars.scss b/tests/themes/Example/vars.scss index 440a4826..005a4714 100644 --- a/tests/themes/Example/vars.scss +++ b/tests/themes/Example/vars.scss @@ -1 +1,2 @@ -$divBg: green; \ No newline at end of file +$divBg: green !default; +$spanOpacity: 0.5 !default; \ No newline at end of file