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,27 +74,26 @@ while((match = ruleRegex.exec(colorsFile)) !== null) {
     updatedColors.push(match[1]+": "+(customColors[match[1]]||match[2])+";")
 }
 
-const result = sass.renderSync({
+
+(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()
+    const css = result.css.toString()
-const lines = css.split("\n");
+    const lines = css.split("\n");
-const colorCSS = []
+    const colorCSS = []
-const nonColorCSS = [];
+    const nonColorCSS = [];
 
-let inKeyFrameBlock = false;
+    let inKeyFrameBlock = false;
 
-lines.forEach(l => {
+    lines.forEach(l => {
         if (inKeyFrameBlock) {
             nonColorCSS.push(l);
             if (/^}/.test(l)) {
@@ -110,21 +110,22 @@ lines.forEach(l => {
         } else {
             nonColorCSS.push(l);
         }
-});
+    });
 
+    const nrPkg = require("../package.json");
+    const now = new Date().toISOString();
 
-const nrPkg = require("../package.json");
+    const header = `/*
-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")});
+    var output = sass.renderSync({outputStyle: parsedArgs.long?"expanded":"compressed",data:colorCSS.join("\n")});
-if (parsedArgs.out) {
+    if (parsedArgs.out) {
 
-    fs.writeFileSync(parsedArgs.out,header+"\n"+output.css);
+        await fs.writeFile(parsedArgs.out,header+"\n"+output.css);
-} else {
+    } else {
         console.log(header);
         console.log(output.css.toString());
-}
+    }
+    await fs.remove(workingDir);
+})()