node-red/scripts/build-custom-theme.js

#!/usr/bin/env node

// This script can be used to build custom colour-scheme css files.
//
// 1. Create a copy of packages/node_modules/@node-red/editor-client/src/sass/colors.scss
//    and change the values to the desired colours.
//
// 2. Run this script, providing the path to the custom file using the --in option
//
// 3. Save the output of the script to a file - either redirect its output,
//    or use the --out option.
//
// 4. Edit your settings file to set the theme:
//       editorTheme: {
//           page: {
//               css: "/path/to/file/generated/by/this/script"
//           }
//       }
//
// 5. Restart Node-RED
//



const os = require("os");
const nopt = require("nopt");
const path = require("path");
const fs = require("fs-extra");
const sass = require("sass");

const knownOpts = {
    "help": Boolean,
    "long": Boolean,
    "in": [path],
    "out": [path]
};
const shortHands = {
    "?":["--help"]
};
nopt.invalidHandler = function(k,v,t) {}

const parsedArgs = nopt(knownOpts,shortHands,process.argv,2)

if (parsedArgs.help) {
    console.log("Usage: build-custom-theme [-?] [--in FILE] [--out FILE]");
    console.log("");
    console.log("Options:");
    console.log("  --in  FILE  Custom colors sass file");
    console.log("  --out FILE  Where you write the result");
    console.log("  --long      Do not compress the output");
    console.log("  -?, --help  Show this help");
    console.log("");
    process.exit();
}


const ruleRegex = /(\$.*?) *: *(\S[\S\s]*?);/g;
var match;

const customColors = {};

if (parsedArgs.in && fs.existsSync(parsedArgs.in)) {
    let customColorsFile = fs.readFileSync(parsedArgs.in,"utf-8");
    while((match = ruleRegex.exec(customColorsFile)) !== null) {
        customColors[match[1]] = match[2];
    }
}

// Load base colours
let colorsFile = fs.readFileSync(path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/colors.scss"),"utf-8")
let updatedColors = [];

while((match = ruleRegex.exec(colorsFile)) !== null) {
    updatedColors.push(match[1]+": "+(customColors[match[1]]||match[2])+";")
}


(async function() {
    const tmpDir = os.tmpdir();
    const workingDir = await fs.mkdtemp(`${tmpDir}${path.sep}`);
    await fs.copy(path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/"),workingDir)
    await fs.writeFile(path.join(workingDir,"colors.scss"),updatedColors.join("\n"))

    const result = sass.renderSync({
        outputStyle: "expanded",
        file: path.join(workingDir,"style.scss"),
    });

    const css = result.css.toString()
    const lines = css.split("\n");
    const colorCSS = []
    const nonColorCSS = [];

    let inKeyFrameBlock = false;

    lines.forEach(l => {
        if (inKeyFrameBlock) {
            nonColorCSS.push(l);
            if (/^}/.test(l)) {
                inKeyFrameBlock = false;
            }
        } else if (/^@keyframes/.test(l)) {
            nonColorCSS.push(l);
            inKeyFrameBlock = true;
        } else if (!/^  /.test(l)) {
            colorCSS.push(l);
            nonColorCSS.push(l);
        } else if (/color|border|background|fill|stroke|outline|box-shadow/.test(l)) {
            colorCSS.push(l);
        } else {
            nonColorCSS.push(l);
        }
    });

    const nrPkg = require("../package.json");
    const now = new Date().toISOString();

    const header = `/*
    * Theme generated with Node-RED ${nrPkg.version} on ${now}
    */`;

    var output = sass.renderSync({outputStyle: parsedArgs.long?"expanded":"compressed",data:colorCSS.join("\n")});
    if (parsedArgs.out) {

        await fs.writeFile(parsedArgs.out,header+"\n"+output.css);
    } else {
        console.log(header);
        console.log(output.css.toString());
    }
    await fs.remove(workingDir);
})()