Merge pull request #2984 from node-red/migrate-sass

Migrate to sass module from node-sass

.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

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) {
 

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",

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);
     }

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 fs = require("fs-extra");
-const sass = require("node-sass");
+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",
+(async function() {
-    file: path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/style.scss"),
+    const tmpDir = os.tmpdir();
-    importer: function(url, prev, done){
+    const workingDir = await fs.mkdtemp(`${tmpDir}${path.sep}`);
-        if (url === 'colors') {
+    await fs.copy(path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/"),workingDir)
-            return {
+    await fs.writeFile(path.join(workingDir,"colors.scss"),updatedColors.join("\n"))
-                contents: 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 nrPkg = require("../package.json");
-const lines = css.split("\n");
+    const now = new Date().toISOString();
-const colorCSS = []
-const nonColorCSS = [];
 
-let inKeyFrameBlock = false;
+    const header = `/*
+    * Theme generated with Node-RED ${nrPkg.version} on ${now}
+    */`;
 
-lines.forEach(l => {
+    var output = sass.renderSync({outputStyle: parsedArgs.long?"expanded":"compressed",data:colorCSS.join("\n")});
-    if (inKeyFrameBlock) {
+    if (parsedArgs.out) {
-        nonColorCSS.push(l);
+
-        if (/^}/.test(l)) {
+        await fs.writeFile(parsedArgs.out,header+"\n"+output.css);
-            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);
+        console.log(header);
+        console.log(output.css.toString());
     }
-});
+    await fs.remove(workingDir);
-
+})()
-
-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());
-}