[INFRA] Simplify demo CSS watch configuration (#1753)

tailwindcss can now notify postcss to regenerate the css file when the index.html changes. This let us use the standard postcss watch mode and remove the hack we set up with chokidar.

docs/contributors/demo-page-css.md

@@ -4,10 +4,8 @@ The project demo page uses [tailwindcss](https://tailwindcss.com/docs).
 To process the CSS rules and get an output `tailwind.css` file, which is used in demo page:
 run: `npm run demo`
 
-Sub job `demo:css` does the trick, it uses postcss. Feel free to preview config files:
+The `demo:css` npm script does the trick, it uses postcss. Feel free to preview config files:
 - [postcss.config.js](postcss.config.js)
 - [tailwind.config.js](tailwind.config.js)
 
-The Rollup build is updated to handle livereload, there are 2 scripts in [package.json](../../package.json) that permits that: \
-1. Build the output tailwind.css file: `demo:css`
-2. Watch for the changes in html and styles.css. `watch:css`
+The Rollup build handles the livereload and the html/css resources watch.

package.json

@@ -61,7 +61,6 @@
     "docs:api": "typedoc --tsconfig ./tsconfig.typedoc.json src/bpmn-visualization.ts",
     "start": "rollup -c --silent --environment devMode:true",
     "watch": "rollup -cw --environment devLiveReloadMode:true",
-    "watch:css": "chokidar \"dev/public/static/css/styles.css\" \"dev/public/*.html\" --command \"npm run demo:css\" --verbose",
     "lint": "eslint \"*/**/*.{js,ts}\" NOTICE --max-warnings 0 --quiet --fix",
     "lint-check": "eslint \"*/**/*.{js,ts}\" NOTICE --max-warnings 0",
     "test": "run-s test:unit test:integration test:e2e",
@@ -106,7 +105,6 @@
     "@typescript-eslint/parser": "^5.9.1",
     "asciidoctor": "^2.2.5",
     "autoprefixer": "^10.4.2",
-    "chokidar-cli": "^3.0.0",
     "clipboardy": "^3.0.0",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.15",

rollup.config.js

@@ -150,7 +150,7 @@ function pluginsForDevelopment() {
   if (devMode || demoMode) {
     plugins.push(execute('npm run demo:css', true)); // sync to ensure the execution is linked to the main rollup process
     if (devLiveReloadMode) {
-      plugins.push(execute('npm run watch:css'));
+      plugins.push(execute('npm run demo:css -- --watch --verbose'));
     }
 
     const copyTargets = [];