Update build-custom-theme to handle keyframes properly

knolleary · knolleary · commit 8ea25bcd1cab · 2020-07-07T11:38:07.000+01:00
Fixes node-red#2636 Also adds a header to the generated CSS identifing the version of NR and date/time it was generated.
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
@@ -342,7 +342,10 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     stroke-dasharray: 10, 4;
 }
 
-@keyframes red-ui-flow-port-tooltip-fadeIn { from { opacity:0; } to { opacity:1; } }
+// @keyframes *must* be on multiple lines so build-custom-theme can filter them out
+@keyframes red-ui-flow-port-tooltip-fadeIn {
+    from { opacity:0; } to { opacity:1; }
+}
 
 .red-ui-flow-port-tooltip {
     opacity:0;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
@@ -71,38 +71,9 @@
 }
 
 .red-ui-notification-shake-horizontal {
-    -webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
-            animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
-}
-
-@-webkit-keyframes red-ui-notification-shake-horizontal {
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70% {
-        -webkit-transform: translateX(-1px);
-        transform: translateX(-1px);
-    }
-    20%,
-    40%,
-    60% {
-        -webkit-transform: translateX(1px);
-        transform: translateX(1px);
-    }
-    // 80% {
-    //     -webkit-transform: translateX(1px);
-    //     transform: translateX(1px);
-    // }
-    // 90% {
-    //     -webkit-transform: translateX(-1px);
-    //     transform: translateX(-1px);
-    // }
+    animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
 }
+// @keyframes *must* be on multiple lines so build-custom-theme can filter them out
 @keyframes red-ui-notification-shake-horizontal {
     0%,
     100% {
@@ -122,12 +93,4 @@
         -webkit-transform: translateX(1px);
         transform: translateX(1px);
     }
-    // 80% {
-    //     -webkit-transform: translateX(1px);
-    //     transform: translateX(1px);
-    // }
-    // 90% {
-    //     -webkit-transform: translateX(-1px);
-    //     transform: translateX(-1px);
-    // }
 }
diff --git a/scripts/build-custom-theme.js b/scripts/build-custom-theme.js
@@ -29,6 +29,7 @@ const sass = require("node-sass");
 
 const knownOpts = {
     "help": Boolean,
+    "long": Boolean,
     "in": [path],
     "out": [path]
 };
@@ -45,7 +46,8 @@ if (parsedArgs.help) {
     console.log("Options:");
     console.log("  --in  FILE  Custom colors sass file");
     console.log("  --out FILE  Where you write the result");
-    console.log("  -?, --help  show this help");
+    console.log("  --long      Do not compress the output");
+    console.log("  -?, --help  Show this help");
     console.log("");
     process.exit();
 }
@@ -64,7 +66,6 @@ if (parsedArgs.in && fs.existsSync(parsedArgs.in)) {
 }
 
 // Load base colours
-
 let colorsFile = fs.readFileSync(path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/colors.scss"),"utf-8")
 let updatedColors = [];
 
@@ -81,7 +82,7 @@ const result = sass.renderSync({
                 contents: updatedColors.join("\n")
             }
         }
-        return {file:"../packages/node_modules/@node-red/editor-client/src/sass/"+url+".scss"}
+        return {file:path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/"+url+".scss")}
     }
 });
 
@@ -90,8 +91,18 @@ const lines = css.split("\n");
 const colorCSS = []
 const nonColorCSS = [];
 
+let inKeyFrameBlock = false;
+
 lines.forEach(l => {
-    if (!/^  /.test(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)) {
@@ -101,9 +112,19 @@ lines.forEach(l => {
     }
 });
 
-var output = sass.renderSync({outputStyle: "compressed",data:colorCSS.join("\n")});
+
+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,output.css);
+
+    fs.writeFileSync(parsedArgs.out,header+"\n"+output.css);
 } else {
+    console.log(header);
     console.log(output.css.toString());
 }
