More flexibility with combining styles

.npmignore

···
+*.js.map

.vscode/launch.json

···
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/distribution/src/build-shit.js",
+            "preLaunchTask": "tsc: build - tsconfig.json",
+            "sourceMaps": true,
+            "outFiles": [
+                "${workspaceFolder}/distribution/**/*.js"
+            ],
+            "cwd": "${workspaceFolder}"
+        }
+    ]
+}

src/build-shit.ts

···
 
 const STYLESDIR = 'styles';
 const SCRIPTSDIR = 'scripts';
-const IMAGESDIR = path.join(process.cwd(), 'assets', 'images', 'original');
+const IMAGESDIR = path.join('assets', 'images', 'original');
 const STYLEOUTDIR = process.env['STYLEOUTDIR'] || path.join('assets', 'css');
 const SCRIPTSOUTDIR = process.env['SCRIPTSOUTDIR'] || path.join('assets', 'js');
 const WEBPOUTDIR = process.env['IMAGESOUTDIR'] || path.join('assets', 'images', 'webp');
 const AVIFOUTDIR = process.env['IMAGESOUTDIR'] || path.join('assets', 'images', 'avif');
-const STYLEOUTFILE = process.env['STYLEOUTFILE'] || 'styles.css';
+const STYLEOUTFILE = process.env['STYLEOUTFILE'] || 'styles';
 
 function commandExists(cmd: string): Promise<boolean> {
     return new Promise((resolve, _) => {
···
         (async () => {
             try {
                 const watcher = fsp.watch(STYLESDIR);
-                for await (const _ of watcher)
-                    await doStyles();
-            } catch (err) {
+                for await (const _ of watcher) {
+                    try {
+                        await doStyles();
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                }
+            }
+            catch (err) {
                 if (isAbortError(err))
                     return;
                 throw err;
···
         (async () => {
             try {
                 const watcher = fsp.watch(SCRIPTSDIR);
-                for await (const _ of watcher)
-                    await doScripts();
-            } catch (err) {
+                for await (const _ of watcher) {
+                    try {
+                        await doScripts();
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                }
+            }
+            catch (err) {
                 if (isAbortError(err))
                     return;
                 throw err;
···
                 const watcher = fsp.watch(IMAGESDIR, {
                     recursive: true // no Linux ☹️
                 });
-                for await (const _ of watcher)
-                    await doImages();
-            } catch (err) {
+                for await (const _ of watcher) {
+                    try {
+                        await doImages();
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                }
+            }
+            catch (err) {
                 if (isAbortError(err))
                     return;
                 throw err;

src/index.ts

···
     input: string;
 }
 
+type StyleFilesMapping = Record<string, string[]>;
+
 async function emptyDir(dir: string) {
     await Promise.all((await fsp.readdir(dir, { withFileTypes: true })).map(f => path.join(dir, f.name)).map(p => fsp.rm(p, {
         recursive: true,
···
     });
 }
 
-// Process images
+/**
+ * Convert images to optimized webp and/or avif files
+ * @param options options for processing images
+ */
 export async function images(options: BatchImageProcessingOptions) {
     await mkdir(options.input);
     await mkdir(options.webpOut) && await emptyDir(options.webpOut);
···
     }
 }
 
-export async function processImage(parentDir: string, relativeFile: string, options: ImageProcessingOptions) {
+async function processImage(parentDir: string, relativeFile: string, options: ImageProcessingOptions) {
     const infile = path.join(parentDir, relativeFile);
     const dir = path.dirname(relativeFile);
     const outDirWebP = path.join(options.webpOut, dir);
···
     options.avif && await convertAvif(infile, outDirAvif);
 }
 
-// Process styles
-export async function styles(inputDir: string, outputDir: string, outputFile: string) {
+/**
+ * Process styles.
+ * Sass is "compiled" and numbered files (^[0-9]+-) are combined into one.
+ * Use subdirectories to group files that should be combined.
+ * @param inputDir parent directory of styles
+ * @param outputDir directory to put processed stylesheets
+ * @param outputFile filename for combined styles that are a direct child of inputDir
+ */
+export async function styles(inputDir: string, outputDir: string, outputFile: string = 'styles') {
     await mkdir([outputDir, inputDir]);
     await emptyDir(outputDir);
-    const styles: string[] = [];
-    const files = await fsp.readdir(inputDir);
-    await Promise.all(files.map(f => new Promise(async (res, _) => {
-        const p = path.join(inputDir, f);
-        console.log(`Processing style ${p}`);
-        const style = sass.compile(p).css;
-        if (f.charAt(0) !== '_') {
-            if (SQUASH.test(f)) {
-                styles.push(style);
-            }
-            else {
-                const o = path.join(outputDir, f.substring(0, f.lastIndexOf('.')) + '.css');
-                await fsp.writeFile(o, csso.minify(style).css);
-                console.log(`Wrote ${o}`);
-            }
-        }
-        res(0);
-    })));
-    const out = csso.minify(styles.join('\n')).css;
-    const outpath = path.join(outputDir, outputFile);
-    await fsp.writeFile(outpath, out);
-    console.log(`Wrote ${outpath}`);
+    const map = await generateStyleGameplan(inputDir, outputFile);
+    const promises: Promise<any>[] = [];
+    for (let key in map) {
+        const files = map[key]!;
+        const squashable: string[] = [];
+        const standalonable: string[] = [];
+        files.forEach(f => {
+            (SQUASH.test(path.basename(f)) ? squashable : standalonable).push(f);
+        });
+        promises.push(style(squashable, path.join(outputDir, `${key}.css`)));
+        const standalonePromises = standalonable.map(async f => {
+            const out = path.join(outputDir, `${f.substring(inputDir.length, f.lastIndexOf('.'))}.css`);
+            await mkdir(path.dirname(out));
+            await style([f], out);
+        });
+        promises.push(...standalonePromises);
+    }
+    await Promise.all(promises);
 }
 
-// Process scripts
+async function style(filenames: string[], output: string): Promise<void> {
+    const styles: string[] = filenames.map(f => {
+        console.log(`Processing style ${f}`);
+        return sass.compile(f).css;
+    });
+    await fsp.writeFile(output, csso.minify(styles.join('\n')).css);
+    console.log(`Wrote ${output}`);
+}
+
+/**
+ * Minify JS files
+ * @param inputDir directory containing js to be minified
+ * @param outputDir directory to place minified js
+ */
 export async function scripts(inputDir: string, outputDir: string) {
     await mkdir([outputDir, inputDir]);
     await emptyDir(outputDir);
···
     })));
 }
 
-async function getAllFiles(fullDir: string): Promise<string[]> {
+async function generateStyleGameplan(fullDir: string, rootName: string): Promise<StyleFilesMapping> {
+    const map: StyleFilesMapping = {};
+    (await getAllFiles(fullDir)).forEach(f => {
+        if (path.basename(f).charAt(0) === '_') {
+            return;
+        }
+        const dirname = path.dirname(f);
+        (map[dirname === '.' ? rootName : dirname] ||= []).push(path.join(fullDir, f));
+    });
+    return map;
+}
+
+async function getAllFiles(dir: string): Promise<string[]> {
+    const fullDir = path.resolve(dir);
     if (!path.isAbsolute(fullDir)) {
-        throw new Error('path must be absolute');
+        throw new Error(`path must be absolute. got ${fullDir}`);
     }
     const files: string[] = [];
     const dirs = [''];

tsconfig.json

···
     "esModuleInterop": true,
     "rootDir": "./",
     "types": ["node"],
+    "sourceMap": true
   },
   "include": [
     "src"