mirrors/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red synced 2024-11-21 23:48:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Migrate from node-sass to sass

Browse Source 
node-sass is deprecated and doesn't work on Node 16.
sass is actively maintained and considered the canonical sass
implementation.
This commit is contained in:
Nick O'Leary 2021-05-11 18:13:21 +01:00
parent 9cdec156dc
commit b77cd56a01
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 55 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -16,7 +16,7 @@
var path = require("path");
var fs = require("fs-extra");
var sass = require("node-sass");
var sass = require("sass");
module.exports = function(grunt) {

2
package.json
View File

@ -107,8 +107,8 @@
"minami": "1.2.3",
"mocha": "^5.2.0",
"node-red-node-test-helper": "^0.2.7",
"node-sass": "^5.0.0",
"nodemon": "2.0.7",
"sass": "1.32.12",
"should": "13.2.3",
"sinon": "1.17.7",
"stoppable": "^1.1.0",

4
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -255,11 +255,11 @@ g.red-ui-flow-node-selected {
}
}
@each $current-color in red green yellow blue grey gray {
.red-ui-flow-node-status-dot-#{$current-color} {
.red-ui-flow-node-status-dot-#{""+$current-color} {
fill: map-get($node-status-colors,$current-color);
stroke: map-get($node-status-colors,$current-color);
}
.red-ui-flow-node-status-ring-#{$current-color} {
.red-ui-flow-node-status-ring-#{""+$current-color} {
fill: $view-background;
stroke: map-get($node-status-colors,$current-color);
}

101
scripts/build-custom-theme.js
View File

@ -22,10 +22,11 @@
const os = require("os");
const nopt = require("nopt");
const path = require("path");
const fs = require("fs")
const sass = require("node-sass");
const fs = require("fs-extra");
const sass = require("sass");
const knownOpts = {
"help": Boolean,
@ -73,58 +74,58 @@ 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")
(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);
}
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 = [];
const nrPkg = require("../package.json");
const now = new Date().toISOString();
let inKeyFrameBlock = false;
const header = `/*
* Theme generated with Node-RED ${nrPkg.version} on ${now}
*/`;
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);
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 {
nonColorCSS.push(l);
console.log(header);
console.log(output.css.toString());
}
});
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());
}
await fs.remove(workingDir);
})()