Refactor postcss.js

Moved creation of Processor from utility file to styles.js to allow for future customization of `postcss` and `autoprefixer`.

build/tasks/styles.js

@@ -1,7 +1,7 @@
 import loconfig from '../../loconfig.json';
 import message from '../utils/message.js';
 import notification from '../utils/notification.js';
-import postcss from '../utils/postcss.js';
+import postcss, { autoprefixer } from '../utils/postcss.js';
 import template from '../utils/template.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
@@ -10,6 +10,9 @@ import sass from 'node-sass';
 
 const sassRender = promisify(sass.render);
 
+const isPostCSSAvailable = (postcss && autoprefixer);
+let postcssProcessor;
+
 /**
  * Compiles and minifies main Sass files to CSS.
  *
@@ -39,8 +42,14 @@ export default async function compileStyles() {
                 sourceMapContents: true
             });
 
-            if (postcss) {
-                result = await postcss.process(result.css, {
+            if (isPostCSSAvailable) {
+                if (typeof postcssProcessor === 'undefined') {
+                    postcssProcessor = postcss([
+                        autoprefixer,
+                    ]);
+                }
+
+                result = await postcssProcessor.process(result.css, {
                     from: outfile,
                     to: outfile,
                     map: {

build/utils/postcss.js

@@ -1,14 +1,25 @@
 /**
- * @file If available, returns the PostCSS processor with any plugins.
+ * @file If available, returns the PostCSS Processor creator and
+ * any the Autoprefixer PostCSS plugin.
  */
 
-try {
-    var { default: postcss } = await import('postcss');
-    let { default: autoprefixer } = await import('autoprefixer');
+let postcss, autoprefixer;
 
-    postcss = postcss([ autoprefixer ]);
+try {
+    postcss = await import('postcss');
+    postcss = postcss.default;
+
+    autoprefixer = await import('autoprefixer');
+    autoprefixer = autoprefixer.default;
 } catch (err) {
     postcss      = null;
+    autoprefixer = null;
 }
 
 export default postcss;
+export const plugins = [
+    autoprefixer,
+];
+export {
+    autoprefixer
+};