From b77cd56a01e174ba0090e03daaadaeb8ef5be945 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 11 May 2021 18:13:21 +0100
Subject: [PATCH] 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);
+})()