Merge pull request #110 from JsSucks/sass

Sass

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;

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;

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);
+            });
         });
     }
 }

core/src/main.js

@@ -9,6 +9,7 @@
 */
 
 const path = require('path');
+const sass = require('node-sass');
 
 /**
  * DEVELOPMENT VARIABLES
@@ -62,6 +63,20 @@ class Comms {
                 o.reply(filenames);
             });
         });
+
+        BDIpc.on('bd-compileSass', o => {
+            const { scss, path } = o.args;
+            if (!scss && !path) return;
+            const data = scss ? `${scss} @import '${path}';` : `@import '${path}';`;
+
+            sass.render({ data }, (err, result) => {
+                if (err) {
+                    o.reply({ err });
+                    return;
+                }
+                o.reply(result.css.toString());
+            });
+        });
     }
 
     async readFile(o, json) {

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",

tests/themes/Example/index.css

@@ -1,7 +0,0 @@
-div {
-    background: red;
-}
-
-span {
-    border: 1px solid brown;
-}

tests/themes/Example/index.scss

@@ -0,0 +1,9 @@
+@import 'vars.scss';
+
+div {
+    background: $divBg;
+}
+
+span {
+    border: 1px solid rgba(20, 20, 20, $spanOpacity);
+}

tests/themes/Example/vars.scss

@@ -0,0 +1,2 @@
+$divBg: green !default;
+$spanOpacity: 0.5 !default;