From b77cd56a01e174ba0090e03daaadaeb8ef5be945 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 11 May 2021 18:13:21 +0100 Subject: [PATCH 1/2] Migrate from node-sass to sass node-sass is deprecated and doesn't work on Node 16. sass is actively maintained and considered the canonical sass implementation. --- Gruntfile.js | 2 +- package.json | 2 +- .../editor-client/src/sass/flow.scss | 4 +- scripts/build-custom-theme.js | 101 +++++++++--------- 4 files changed, 55 insertions(+), 54 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index f19432a18..c90f30d48 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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) { diff --git a/package.json b/package.json index e6162302c..39bbd2fe5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss index f63c26279..503bdf5bd 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss @@ -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); } diff --git a/scripts/build-custom-theme.js b/scripts/build-custom-theme.js index df3445c7d..e16b35e8b 100644 --- a/scripts/build-custom-theme.js +++ b/scripts/build-custom-theme.js @@ -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); +})() From b9e780cdcd6b3e4ca4cd4a53706a9d4c41128afd Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 11 May 2021 18:14:05 +0100 Subject: [PATCH 2/2] Add Node 16 with sass fixed --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.travis.yml b/.travis.yml index e281a978d..4110f170d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,6 +4,9 @@ addons: language: node_js matrix: include: + - node_js: "16" + script: + - ./node_modules/.bin/grunt no-coverage - node_js: "14" script: - ./node_modules/.bin/grunt && ( cat coverage/lcov.info | $(npm get prefix)/bin/coveralls || true ) && rm -rf coverage