fix(shoreline): avoid infinite loops on the dev script (#2023)

packages/shoreline/package.json

@@ -47,16 +47,13 @@
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.1",
+    "@parcel/watcher": "2.4.1",
     "@types/fs-extra": "11.0.4",
     "@types/node": "20.14.9",
     "@types/react-window": "1.8.8",
     "@vtex/shoreline-css": "workspace:*",
-    "browserslist": "4.23.1",
-    "chokidar": "3.6.0",
     "concurrently": "8.2.2",
-    "cssnano": "6.0.2",
     "fs-extra": "11.2.0",
-    "lightningcss": "1.25.1",
     "match-sorter": "6.3.4",
     "react-hook-form": "7.48.2",
     "react-window": "1.8.10",

packages/shoreline/src/scripts/dev-css.ts

@@ -1,22 +1,26 @@
-import { watch } from 'chokidar'
+import { subscribe } from '@parcel/watcher'
 import { build } from './build-css'
+import path from 'node:path'
 
-function main() {
-  console.log('Watching CSS files')
+console.log('👀 Watching CSS files')
 
-  build()
+/**
+ * We must trigger the first build to avoid errors
+ */
+build()
 
-  watch('**/*.css', {
-    ignored: [
-      'dist/themes/sunrise/styles.css',
-      'dist/themes/sunrise/styles-unlayered.css',
-    ],
-    ignoreInitial: false,
-  }).on('change', (path) => {
-    build()
+const themesPath = path.join(__dirname, '../themes/')
+
+subscribe(themesPath, (err, events) => {
+  if (err) {
+    console.error(err)
+  }
 
-    console.log(`File ${path} has been changed`)
-  })
-}
+  const shouldTriggerBuild = events.some(
+    ({ type }) => type === 'update' || type === 'create' || type === 'delete'
+  )
 
-main()
+  if (shouldTriggerBuild) {
+    build()
+  }
+})