SAAM/app/styles.js

const { ipcRenderer } = require('electron')
const sass = require('sass');
const path = require('path');
const fs = require('fs');

const SASS_BASE_PATH = 'view/sass';

// TODO: Once configs are setup, make this section more dynamic!!
var VARS = {
  COLOR_LIGHTER: "#fffcf2",
  COLOR_LIGHT: "#ccc5b9",
  COLOR_DARK: "#403d39",
  COLOR_DARKER: "#252422",
  COLOR_HIGHLIGHT: "#eb5e28",
  UI_SCALE: 1.0
};


console.log(ipcRenderer.sendSync("getPath", "app"));
function handleFileLoad(url, prev, done){
  let apppath = ipcRenderer.sendSync("getPath", "app");
  let filepath = path.join(apppath, SASS_BASE_PATH, url + ".scss");
  console.log("Attempting to load ", filepath);
  fs.readFile(filepath, 'utf-8', (err, data) => {
    if (err){
      done(err);
    } else {
      done({contents: data.toString()});
    }
  });
}

function buildSASSVars(){
  let res = "";
  Object.keys(VARS).forEach((key)=>{
    res = res + "$" + key + ": " + VARS[key] + ";\n";
  });
  return res;
}

function render(entryfile){
  return new Promise((res, rej) => {
    let entry = buildSASSVars() + "@import '" + entryfile + "';\n";
    sass.render({data: entry, importer:handleFileLoad}, (err, data) => {
      if (err){rej(err);}
      res(data);
    });
  });
}


module.exports = {
  render
};