mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
8ea25bcd1c
Fixes #2636 Also adds a header to the generated CSS identifing the version of NR and date/time it was generated.
131 lines
3.5 KiB
JavaScript
131 lines
3.5 KiB
JavaScript
#!/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 nopt = require("nopt");
|
|
const path = require("path");
|
|
const fs = require("fs")
|
|
const sass = require("node-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])+";")
|
|
}
|
|
|
|
const result = sass.renderSync({
|
|
outputStyle: "expanded",
|
|
file: path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/style.scss"),
|
|
importer: function(url, prev, done){
|
|
if (url === 'colors') {
|
|
return {
|
|
contents: updatedColors.join("\n")
|
|
}
|
|
}
|
|
return {file:path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/"+url+".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) {
|
|
|
|
fs.writeFileSync(parsedArgs.out,header+"\n"+output.css);
|
|
} else {
|
|
console.log(header);
|
|
console.log(output.css.toString());
|
|
}
|