fix: postCss searches folders recursively #68

scripts/build/postCss.mjs

@@ -2,62 +2,64 @@ import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
 import comments from 'postcss-discard-comments';
 import path from 'path';
-import fs from 'fs';
+import fs from 'fs/promises';
 
 const __dirname = new URL('.', import.meta.url).pathname;
-const directoryPath = path.join(__dirname, '../src');
+const directories = [
+  path.join(__dirname, '../src'),
+  path.join(__dirname, '../components')
+];
 
 /**
- * Default postCSS run
- * Locates all CSS files within the directory and loop
- * through the standardProcessor() function.
+ * Recursively process CSS files in a directory and its subdirectories
+ * @param {string} dir - Directory to process
  */
-fs.readdir(directoryPath, function (err, files) {
-  //handling error
-  if (err) {
-    return console.log('Unable to scan directory: ' + err);
-  }
-  //listing all files using forEach
-  files.forEach(function (file) {
-    if (file.includes(".css")) {
-      standardProcessor(file);
+async function processCssFiles(dir) {
+  try {
+    const files = await fs.readdir(dir, { withFileTypes: true });
+    for (const file of files) {
+      const fullPath = path.join(dir, file.name);
+      if (file.isDirectory()) {
+        await processCssFiles(fullPath);
+      } else if (path.extname(file.name).toLowerCase() === '.css') {
+        await processPostCss(fullPath);
+      }
     }
-  });
-});
+  } catch (err) {
+    console.error(`Processing failed for directory ${dir}:`, err);
+  }
+}
 
 /**
- * The standardProcessor function applies tokens for fallback selectors
- * and completes a post cleanup.
- * @param {string} file
+ * Process CSS file with PostCSS
+ * Applies autoprefixer and removes comments starting with '@'
+ * @param {string} filePath - Full path of CSS file to process
  */
-function standardProcessor(file) {
- fs.readFile(`src/${file}`, (err, css) => {
-   postcss([autoprefixer, comments])
-   .use(comments({
-     remove: function(comment) { return comment[0] == "@"; }
-   }))
-   .process(css, { from: `src/${file}`, to: `src/${file}` })
-   .then(result => {
-     fs.writeFile(`src/${file}`, result.css, () => true)
-   })
- });
+async function processPostCss(filePath) {
+  try {
+    const css = await fs.readFile(filePath, 'utf8');
+    const result = await postcss([
+      autoprefixer,
+      comments({
+        remove: comment => comment[0] === '@'
+      })
+    ]).process(css, { from: filePath, to: filePath });
+    await fs.writeFile(filePath, result.css);
+    console.log(`Processed: ${filePath}`);
+  } catch (err) {
+    console.error(`Error processing ${filePath}:`, err);
+  }
 }
 
-/**
- * ALTERNATE script:
- * The following is a static builder for rendering one
- * CSS file at a time if that is required.
- */
-// fs.readFile('src/style.css', (err, css) => {
-//   postcss([autoprefixer, comments])
-//     .use(comments({
-//       remove: function(comment) { return comment[0] == "@"; }
-//     }))
-//     .process(css, { from: 'src/style.css', to: 'src/style.css' })
-//     .then(result => {
-//       fs.writeFile('src/style.css', result.css, () => true)
-//       if ( result.map ) {
-//         fs.writeFile('src/style.map', result.map, () => true)
-//       }
-//     })
-// });
+// Main execution
+(async () => {
+  for (const dir of directories) {
+    try {
+      await fs.access(dir);
+      console.log(`Processing CSS files in: ${dir}`);
+      await processCssFiles(dir);
+    } catch (error) {
+      console.log(`Directory not found or not accessible: ${dir}`);
+    }
+  }
+})();