Skip to content

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

Open
dipakmdhrm wants to merge 2 commits intomainfrom
concurrently
Open

Update Theme Watch Process to cover all of CSS, JS, images and fonts#1003
dipakmdhrm wants to merge 2 commits intomainfrom
concurrently

Conversation

@dipakmdhrm
Copy link
Collaborator

@dipakmdhrm dipakmdhrm commented Mar 12, 2026

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

@dipakmdhrm dipakmdhrm changed the title Update Theme Watch Process to include CSS & JS Update Theme Watch Process to cover all of CSS, JS, images and fonts Mar 12, 2026
Replace PHP-based Robo task compilation with npm scripts that handle CSS,
JS, fonts, and images. Use concurrently to watch all asset types in parallel
during development.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@AronNovak
Copy link
Member

@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
Copy link
Collaborator Author

@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
Copy link
Member

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

Copy link
Member

@AronNovak AronNovak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks promising for me!

@dipakmdhrm dipakmdhrm requested review from amitaibu and removed request for amitaibu March 13, 2026 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update Theme Watch Process to include CSS & JS

2 participants