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:
110
build/styles.js
110
build/styles.js
@@ -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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user