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,17 +74,16 @@ while((match = ruleRegex.exec(colorsFile)) !== null) {
     updatedColors.push(match[1]+": "+(customColors[match[1]]||match[2])+";")
 }
 
+
+(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(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/style.scss"),
+        file: path.join(workingDir,"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()
@@ -112,7 +112,6 @@ lines.forEach(l => {
         }
     });
 
-
     const nrPkg = require("../package.json");
     const now = new Date().toISOString();
 
@@ -123,8 +122,10 @@ const header = `/*
     var output = sass.renderSync({outputStyle: parsedArgs.long?"expanded":"compressed",data:colorCSS.join("\n")});
     if (parsedArgs.out) {
 
-    fs.writeFileSync(parsedArgs.out,header+"\n"+output.css);
+        await fs.writeFile(parsedArgs.out,header+"\n"+output.css);
     } else {
         console.log(header);
         console.log(output.css.toString());
     }
+    await fs.remove(workingDir);
+})()