1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

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

Migrate to sass module from node-sass
This commit is contained in:
Nick O'Leary 2021-05-11 18:56:06 +01:00 committed by GitHub
commit d4096a9026
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 54 deletions

View File

@ -4,6 +4,9 @@ addons:
language: node_js language: node_js
matrix: matrix:
include: include:
- node_js: "16"
script:
- ./node_modules/.bin/grunt no-coverage
- node_js: "14" - node_js: "14"
script: script:
- ./node_modules/.bin/grunt && ( cat coverage/lcov.info | $(npm get prefix)/bin/coveralls || true ) && rm -rf coverage - ./node_modules/.bin/grunt && ( cat coverage/lcov.info | $(npm get prefix)/bin/coveralls || true ) && rm -rf coverage

View File

@ -16,7 +16,7 @@
var path = require("path"); var path = require("path");
var fs = require("fs-extra"); var fs = require("fs-extra");
var sass = require("node-sass"); var sass = require("sass");
module.exports = function(grunt) { module.exports = function(grunt) {

View File

@ -107,8 +107,8 @@
"minami": "1.2.3", "minami": "1.2.3",
"mocha": "^5.2.0", "mocha": "^5.2.0",
"node-red-node-test-helper": "^0.2.7", "node-red-node-test-helper": "^0.2.7",
"node-sass": "^5.0.0",
"nodemon": "2.0.7", "nodemon": "2.0.7",
"sass": "1.32.12",
"should": "13.2.3", "should": "13.2.3",
"sinon": "1.17.7", "sinon": "1.17.7",
"stoppable": "^1.1.0", "stoppable": "^1.1.0",

View File

@ -255,11 +255,11 @@ g.red-ui-flow-node-selected {
} }
} }
@each $current-color in red green yellow blue grey gray { @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); fill: map-get($node-status-colors,$current-color);
stroke: 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; fill: $view-background;
stroke: map-get($node-status-colors,$current-color); stroke: map-get($node-status-colors,$current-color);
} }

View File

@ -22,10 +22,11 @@
const os = require("os");
const nopt = require("nopt"); const nopt = require("nopt");
const path = require("path"); const path = require("path");
const fs = require("fs") const fs = require("fs-extra");
const sass = require("node-sass"); const sass = require("sass");
const knownOpts = { const knownOpts = {
"help": Boolean, "help": Boolean,
@ -73,58 +74,58 @@ while((match = ruleRegex.exec(colorsFile)) !== null) {
updatedColors.push(match[1]+": "+(customColors[match[1]]||match[2])+";") 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 { } 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());
}