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`.
This commit is contained in:
Chauncey McAskill
2021-09-16 18:08:20 -04:00
parent 91109c5221
commit 6e50bc202d

View File

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