fix(tasks): update styles watcher to support chokidar v4

package.json

@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.26.7",
     "autoprefixer": "^10.4.20",
     "babel-loader": "9.1.2",
-    "chokidar": "^5.0.0",
+    "chokidar": "^4.0.3",
     "core-js": "^3.40.0",
     "eslint": "^8.57.1",
     "eslint-webpack-plugin": "^4.2.0",

tasks/styles.js

@@ -1,52 +1,61 @@
 const path = require('path');
+const glob = require('fast-glob');
 const { log } = require('../utils/log');
 const generateEntries = require('../utils/generateEntries');
 const renderStyles = require('../utils/renderStyles');
 
 // extend log to proper say what file is running
-module.exports = (config) => {
-  return new Promise((resolve) => {
-    if (config && config.general && config.general.watch) {
-      try {
-        log(__filename, 'Watcher Sass / autoprefixer running...', '', 'info');
-
-        const chokidar = require('chokidar')
-        const sassPattern = path.join(config.general.sourcesPath, `**/*.${config.general.sourceKey}.scss`);
+module.exports = async (config) => {
+  if (config && config.general && config.general.watch) {
+    try {
+      log(__filename, 'Watcher Sass / autoprefixer running...', '', 'info');
+
+      const chokidar = require('chokidar');
+      const pattern = `**/*.${config.general.sourceKey}.scss`;
+
+      // Note: fast-glob resolves files once at startup, so newly created SCSS files
+      // won't be picked up by the watcher without a restart. This is an accepted
+      // tradeoff to avoid EMFILE errors with recursive directory watching.
+      const files = await glob(pattern, {
+        cwd: config.general.sourcesPath,
+        absolute: true
+      });
 
-        const watcher = chokidar.watch(sassPattern, {
-          ignoreInitial: true
-        })
+      if (!files.length) {
+        log(__filename, 'No SCSS sources found to watch', '', 'warning');
+        return;
+      }
 
-        watcher.on('all', (event, file) => {
-          const relativePath = path.relative(
-            config.general.sourcesPath,
-            path.dirname(file)
-          )
+      config.stylelint.failOnError = false;
 
-          const fileName = path
-            .basename(file)
-            .replace(config.general.sourceKey, config.general.bundleKey)
+      const watcher = chokidar.watch(files, {
+        ignoreInitial: true
+      });
 
-          const destFile = path.join(relativePath, fileName)
+      watcher.on('all', (event, file) => {
+        const relativePath = path.relative(
+          config.general.sourcesPath,
+          path.dirname(file)
+        );
 
-          config.stylelint.failOnError = false
+        const fileName = path
+          .basename(file)
+          .replace(config.general.sourceKey, config.general.bundleKey);
 
-          renderStyles(file, destFile, config)
-        });
+        const destFile = path.join(relativePath, fileName);
 
-      } catch (e) {
-        log(__filename, 'Something is missing, you need install dev dependencies for this.', e.message, 'error');
-      }
-    } else {
-      log(__filename, 'Sass / autoprefixer running...', '', 'info');
-
-      // checking all entries at this configuration
-      const entries = generateEntries(config, 'scss');
-      const promises = Object.keys(entries).map(file => renderStyles(entries[file], file, config));
-      Promise.allSettled(promises).then((results) => {
-        log(__filename, 'Styles done', '', 'info');
-        resolve();
+        renderStyles(file, destFile, config);
       });
+
+    } catch (e) {
+      log(__filename, 'Failed to start SCSS watcher', e.message, 'error');
     }
-  });
+  } else {
+    log(__filename, 'Sass / autoprefixer running...', '', 'info');
+
+    const entries = generateEntries(config, 'scss');
+    const promises = Object.keys(entries).map(file => renderStyles(entries[file], file, config));
+    await Promise.allSettled(promises);
+    log(__filename, 'Styles done', '', 'info');
+  }
 };