From 6e50bc202d8e3f3f099354f34c113bd8025fed8e Mon Sep 17 00:00:00 2001
From: Chauncey McAskill <chauncey@mcaskill.ca>
Date: Thu, 16 Sep 2021 18:08:20 -0400
Subject: [PATCH] Refactor styles.js

Changed:
- Replaced "fs" callback API with "fs/promises" promise API to centralize catching of errors and easier readability of file.
- Prefixed "fs/promises" with 'node:' URI scheme to target Node.js builtin modules.
- Promisified `sass.render`.
---
 build/styles.js | 110 +++++++++++++++++++++---------------------------
 1 file changed, 47 insertions(+), 63 deletions(-)

diff --git a/build/styles.js b/build/styles.js
index 9c9fe05..2eacb5c 100644
--- a/build/styles.js
+++ b/build/styles.js
@@ -1,9 +1,12 @@
-import fs from 'fs';
-import sass from 'node-sass';
 import paths from '../mconfig.json';
 import message from './utils/message.js';
 import postcss from './utils/postcss.js';
 import notification from './utils/notification.js';
+import { writeFile } from 'node:fs/promises';
+import { promisify } from 'node:util';
+import sass from 'node-sass';
+
+const sassRender = promisify(sass.render);
 
 /**
  * Compiles and minifies main Sass files to CSS.
@@ -12,34 +15,25 @@ export async function compileStyles() {
     [
         'critical',
         'main',
-    ].forEach((name) => {
+    ].forEach(async (name) => {
         const infile  = paths.styles.src  + name + '.scss';
         const outfile = paths.styles.dest + name + '.css';
 
         const timeLabel = `${name}.css compiled in`;
         console.time(timeLabel);
 
-        sass.render({
-            file: infile,
-            omitSourceMapUrl: true,
-            outFile: outfile,
-            outputStyle: 'compressed',
-            sourceMap: true,
-            sourceMapContents: true
-        }, (err, result) => {
-            if (err) {
-                message(`Error compiling ${name}.scss`, 'error');
-                message(err.formatted);
-
-                notification({
-                    title:   `${name}.scss compilation failed 🚨`,
-                    message: err.formatted
-                });
-                return;
-            }
+        try {
+            let result = await sassRender({
+                file: infile,
+                omitSourceMapUrl: true,
+                outFile: outfile,
+                outputStyle: 'compressed',
+                sourceMap: true,
+                sourceMapContents: true
+            });
 
             if (postcss) {
-                postcss.process(result.css, {
+                result = await postcss.process(result.css, {
                     from: outfile,
                     to: outfile,
                     map: {
@@ -47,7 +41,9 @@ export async function compileStyles() {
                         inline: false,
                         sourcesContent: true
                     }
-                }).then((result) => {
+                });
+
+                if (result.warnings) {
                     const warnings = result.warnings();
                     if (warnings.length) {
                         message(`Error processing ${name}.css`, 'warning');
@@ -55,30 +51,16 @@ export async function compileStyles() {
                             message(warn.toString());
                         });
                     }
-
-                    saveStylesheet(result, outfile, name, timeLabel);
-                });
-            } else {
-                saveStylesheet(result, outfile, name, timeLabel);
+                }
             }
-        });
-    });
-};
 
-/**
- * Writes the CSS file, and source map, to the disk.
- *
- * @param {object} result       - The compiler result.
- * @param {Buffer} result.css   - The compiled CSS.
- * @param {Buffer} [result.map] - The source map.
- * @param {string} outfile      - The output file path.
- * @param {string} name         - The Sass entry point identifier.
- * @param {string} [timeLabel]  - The console time identifier.
- */
-function saveStylesheet(result, outfile, name, timeLabel) {
-    if (result.css) {
-        fs.writeFile(outfile, result.css, (err) => {
-            if (err) {
+            writeFile(outfile, result.css).then(() => {
+                if (result.css) {
+                    message(`${name}.css compiled`, 'success', timeLabel);
+                } else {
+                    message(`${name}.css is empty`, 'notice', timeLabel);
+                }
+            }).catch((err) => {
                 message(`Error compiling ${name}.scss`, 'error');
                 message(err);
 
@@ -86,25 +68,27 @@ function saveStylesheet(result, outfile, name, timeLabel) {
                     title:   `${name}.scss compilation failed 🚨`,
                     message: `Could not save stylesheet to ${name}.css`
                 });
-                return;
-            }
+            });
 
-            message(`${name}.css compiled`, 'success', timeLabel);
-        });
-    }
+            if (result.map) {
+                writeFile(outfile + '.map', result.map.toString()).catch((err) => {
+                    message(`Error compiling ${name}.scss`, 'error');
+                    message(err);
 
-    if (result.map) {
-        fs.writeFile(outfile + '.map', result.map, (err) => {
-            if (err) {
-                message(`Error compiling ${name}.scss`, 'error');
-                message(err);
-
-                notification({
-                    title:   `${name}.scss compilation failed 🚨`,
-                    message: `Could not save sourcemap to ${name}.css.map`
+                    notification({
+                        title:   `${name}.scss compilation failed 🚨`,
+                        message: `Could not save sourcemap to ${name}.css.map`
+                    });
                 });
-                return;
             }
-        });
-    }
-}
+        } catch (err) {
+            message(`Error compiling ${name}.scss`, 'error');
+            message(err.formatted);
+
+            notification({
+                title:   `${name}.scss compilation failed 🚨`,
+                message: err.formatted
+            });
+        }
+    });
+};