Update Theme Watch Process to cover all of CSS, JS, images and fonts

[dipakmdhrm]

Closes #324

Summary

Replaces the PHP/Robo-based theme compilation pipeline with npm scripts, simplifying the build
toolchain and enabling parallel asset watching.

Changes:

• package.json: Add build and watch npm scripts for CSS, JS, fonts, and images. Add
  concurrently, chokidar-cli, and imagemin-cli as dev dependencies
• ThemeTrait.php: Remove complex PHP-based asset handling (JS minification, image optimization, SVG
  compression, file watching). Delegate all of this to npm run build
• ddev theme:compile: Now runs npm install && npm run build directly instead of ddev robo theme:compile
• ddev theme:watch: Now runs npm run watch which uses concurrently to watch CSS, JS, fonts, and
  images in parallel
• config.local.yaml.example / README.md: Update references from ddev robo theme:compile[-debug]
  to ddev theme:compile

Test plan

• ddev theme:compile builds all assets to dist/ (CSS, JS, fonts, images)
• ddev theme:watch starts watchers for all asset types in parallel
• ddev restart triggers theme compilation via the updated hook
• ddev phpcs and ddev phpstan pass (verified by pre-push hook)
• Theme compilation during deployment (PHP robo leveraging npm) works properly

theme-2026-03-12_14.33.38.mp4

[AronNovak]

@dipakmdhrm This is nice!

I have #995, but I am happy to throw it away, the only thing I'd like to double-check that the process should exit with non-zero code if CSS or JS or any other asset has a failure, so the process has a glitch, like malformed SVG, broken JS, syntax error in the style, etc.

[dipakmdhrm]

@dipakmdhrm This is nice!

I have #995, but I am happy to throw it away, the only thing I'd like to double-check that the process should exit with non-zero code if CSS or JS or any other asset has a failure, so the process has a glitch, like malformed SVG, broken JS, syntax error in the style, etc.

CSS and SVGs had proper exit logic (compile fail on error), but it wasn't so for JS. I've replaced minify (which always gives exit code 0), with terser for proper exit logic.

[AronNovak]

@dipakmdhrm Thanks! Now minify has the proper exit code handling in the latest release, but terser has much bigger user base actually!

[AronNovak]

Looks promising for me!

[Copilot]

Pull request overview

This PR replaces the Robo/PHP-based theme asset compilation and watching workflow with npm scripts, so ddev theme:compile/ddev theme:watch can build and watch CSS, JS, fonts, and images via the theme’s package.json.

Changes:

• Add npm build/watch scripts (and dev dependencies) to compile/watch CSS, JS, fonts, and images.
• Simplify ThemeTrait compilation to delegate asset work to npm run build.
• Update DDEV commands and docs to use the new ddev theme:compile / ddev theme:watch flow.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
web/themes/custom/server_theme/package.json	Adds npm build/watch scripts and dev dependencies for asset compilation.
robo-components/ThemeTrait.php	Replaces custom Robo/PHP asset handling with npm install + npm run build.
.ddev/commands/web/theme-compile	Switches compile command to run npm build directly in the theme directory.
.ddev/commands/web/theme-watch	Switches watch command to run the npm watch script.
.ddev/config.local.yaml.example	Updates DDEV hooks to call the new compile command.
README.md	Updates theme development commands referenced in documentation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dipakmdhrm]

@amitaibu Copilot feedback has been addressed.

[dipakmdhrm]

Latest commit: Replace shell npm scripts with Node.js build and watch scripts

The inline shell commands in package.json have been replaced with two dedicated Node.js scripts:

scripts/build.js

Handles a one-shot build of JS, fonts, and images (CSS remains with the tailwindcss CLI). All three asset types run in parallel via Promise.all.

• JS — minified using the terser JS API directly
• Fonts — copied recursively using Node's fs module
• Images — copied recursively, then JPEG/PNG optimized via imagemin-cli (grouped per directory to preserve subdirectory structure), and SVG optimized via the svgo JS API using the project's existing svgo.config.js

scripts/watch.js

Sets up chokidar file watchers (Node API, replacing chokidar-cli) for JS, fonts, and images.

• Handles addDir events explicitly so new subdirectories are immediately mirrored in dist/
• Uses the same optimization logic as build.js for each file type
• Errors in individual files are caught and logged without crashing the watcher process

package.json

• Removed all individual build:js, build:fonts, build:images, watch:js, watch:fonts, watch:images shell scripts
• Replaced chokidar-cli with chokidar (direct Node API usage)
• New scripts: build:assets / watch:assets invoke the Node scripts; build / watch run these alongside tailwindcss via concurrently