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

.ddev/commands/web/theme-compile

@@ -5,4 +5,4 @@
 ## Aliases: theme-compile
 ## Example: "ddev theme:compile"
 
-./vendor/bin/robo theme:compile
+cd ./web/themes/custom/server_theme && npm install && npm run build

.ddev/commands/web/theme-watch

@@ -5,4 +5,4 @@
 ## Aliases: theme-watch
 ## Example: "ddev theme:watch"
 
-cd ./web/themes/custom/server_theme && npx tailwindcss -i ./src/css/style.css -o ./dist/css/style.css --watch
+cd ./web/themes/custom/server_theme && npm run watch

.ddev/config.local.yaml.example

@@ -21,7 +21,7 @@ hooks:
 
     # Compile theme in debug, so we can develop with all Tailwinds' classes.
     # On deploy, we purge un-needed CSS.
-    - exec-host: ddev robo theme:compile-debug
+    - exec-host: ddev theme:compile
 
     # Install the default content.
     - exec: drush pm-enable default_content --no-interaction
@@ -59,7 +59,7 @@ hooks:
     - exec: drush sapi-c
     - exec: drush sapi-i
     # Compile theme.
-    - exec-host: ddev robo theme:compile
+    - exec-host: ddev theme:compile
      # Get rid of sensitive user data.
     - exec: drush sql:sanitize --yes
     # Login as admin.
@@ -75,7 +75,7 @@ hooks:
     - exec: drush sapi-c
     - exec: drush sapi-i
     # Compile theme.
-    - exec-host: ddev robo theme:compile
+    - exec-host: ddev theme:compile
      # Get rid of sensitive user data.
     - exec: drush sql:sanitize --yes
     # Login as admin.

README.md

@@ -85,7 +85,7 @@ Please refer to the [Default content documentation](https://www.drupal.org/docs/
 
 ## Theme Development
 
-By default, `ddev restart` compiles the theme using Robo (`ddev robo theme:compile-debug`)
+By default, `ddev restart` compiles the theme using Robo (`ddev theme:compile`)
 
 This is used only for watching Tailwind styles, it's not compiling js, images, etc.
 
@@ -97,7 +97,7 @@ ddev theme:watch
 
 This will compile Tailwind and keep watching for any changes.
 
-When running `ddev robo theme:compile` it will purge any TailWind's CSS class
+When running `ddev theme:compile` it will purge any TailWind's CSS class
 which is not found in the code, twig, or under `tailwind.config.js` `whitelist` property.
 
 The directory structure:
@@ -372,17 +372,17 @@ In order to deploy upon every merge automatically using GitHub Actions, you shal
 1. `git commit -m "Deployment secrets and configuration"`
 1. Add the public key in `pantheon-key.pub` to the newly created dummy [Pantheon user](https://pantheon.io/docs/ssh-keys)
 1. Set up the following in your GitHub repository settings:
-   
+
    **GitHub Secrets** (Settings → Secrets and variables → Actions → Secrets):
    - `TERMINUS_TOKEN`: Your Pantheon machine token
    - `PANTHEON_DEPLOY_KEY`: The SSH private key for deployment
    - `GH_TOKEN`: GitHub personal access token for posting deployment comments
-   
+
    **GitHub Variables** (Settings → Secrets and variables → Actions → Variables):
    - `PANTHEON_GIT_URL`: The Pantheon Git URL for your project
    - `ROLLBAR_SERVER_TOKEN`: Your Rollbar server token (optional)
    - `DEPLOY_EXCLUDE_WARNING`: Warnings to exclude from deployment notifications (optional)
-   
+
 1. Actualize `public static string $githubProject = 'Gizra/the-client';` in the `RoboFile.php`.
 
 Optionally you can specify which target branch you'd like to push on Pantheon, by default it's `master`, so the target is the DEV environment, but alternatively you can issue:

robo-components/ThemeTrait.php

@@ -2,9 +2,7 @@
 
 namespace RoboComponents;
 
-use Lurker\Event\FilesystemEvent;
 use Robo\ResultData;
-use Symfony\Component\Finder\Finder;
 
 /**
  * Compilation of theme source assets.
@@ -27,12 +25,12 @@ trait ThemeTrait {
 
   /**
    * Compile the theme.
-   *
-   * @param bool $optimize
-   *   Indicate whether to optimize during compilation.
    */
-  private function doThemeCompile(bool $optimize = FALSE): void {
+  public function themeCompile(): void {
+    $theme_dir = self::$themeBase;
     $directories = [
+      'css',
+      'fonts',
       'js',
       'images',
     ];
@@ -44,16 +42,13 @@ private function doThemeCompile(bool $optimize = FALSE): void {
       $this->_mkdir($directory);
     }
 
-    $theme_dir = self::$themeBase;
-
     // Make sure we have all the node packages.
     $this->_exec("cd $theme_dir && npm install");
 
-    // Use Tailwind CLI to compile CSS and always minify for consistent output.
-    $tailwind_command = "cd $theme_dir && npx tailwindcss -i ./src/css/style.css -o ./dist/css/style.css --minify";
-    $result = $this->_exec($tailwind_command);
+    // Compile all assets (CSS, JS, fonts, images) in parallel via npm scripts.
+    $result = $this->_exec("cd $theme_dir && npm run build");
 
-    // Safety check to verify theme was properly compiled before deployment.
+    // Safety check to verify CSS was properly compiled before deployment.
     if (!file_exists(sprintf('%s/dist/css/style.css', self::$themeBase))) {
       throw new \Exception('Theme compilation failed.');
     }
@@ -63,154 +58,9 @@ private function doThemeCompile(bool $optimize = FALSE): void {
       return;
     }
 
-    // Javascript.
-    if ($optimize) {
-      // Minify the JS files.
-      foreach (glob(self::$themeBase . '/src/js/*.js') as $js_file) {
-        // Make the path relative to the theme root.
-        $from = str_replace('web/themes/custom/server_theme/', '', $js_file);
-        $to = str_replace('src/', 'dist/', $from);
-        // Minify the js.
-        $this->_exec("cd $theme_dir && npx minify $from > $to");
-      }
-    }
-    else {
-      $this->_copyDir(self::$themeBase . '/src/js', self::$themeBase . '/dist/js');
-    }
-
-    // Fonts.
-    $this->_copyDir(self::$themeBase . '/src/fonts', self::$themeBase . '/dist/fonts');
-
-    // Images - Copy everything first.
-    $this->_copyDir(self::$themeBase . '/src/images', self::$themeBase . '/dist/images');
-
-    // Then for the formats that we can optimize, perform it.
-    if ($optimize) {
-      $input = [
-        self::$themeBase . '/src/images/*.jpg',
-        self::$themeBase . '/src/images/*.png',
-      ];
-
-      $this->taskImageMinify($input)
-        ->to(self::$themeBase . '/dist/images/')
-        ->run();
-
-      // Compress all SVGs.
-      $this->themeSvgCompress();
-    }
-
     $this->_exec('drush cache:rebuild');
   }
 
-  /**
-   * Compile the theme (optimized).
-   */
-  public function themeCompile(): void {
-    $this->say('Compiling (optimized).');
-    $this->doThemeCompile(TRUE);
-  }
-
-  /**
-   * Compile the theme.
-   *
-   * Non-optimized.
-   */
-  public function themeCompileDebug(): void {
-    $this->say('Compiling (non-optimized).');
-    $this->doThemeCompile();
-  }
-
-  /**
-   * Compress SVG files in the "dist" directories.
-   *
-   * This function is being called as part of `theme:compile`.
-   *
-   * @return \Robo\ResultData|null
-   *   If there was an error a result data object is returned. Or void if
-   *   successful.
-   *
-   * @see doThemeCompile()
-   */
-  public function themeSvgCompress(): ?ResultData {
-    $directories = [
-      './dist/images',
-    ];
-
-    $error_code = NULL;
-
-    foreach ($directories as $directory) {
-      // Check if SVG files exists in this directory.
-      $finder = new Finder();
-      $finder
-        ->in(self::$themeBase . '/' . $directory)
-        ->files()
-        ->name('*.svg');
-
-      if (!$finder->hasResults()) {
-        // No SVG files.
-        continue;
-      }
-
-      $result = $this->_exec("cd " . self::$themeBase . " && npx svgo $directory/*.svg");
-      if (empty($error_code) && !$result->wasSuccessful()) {
-        $error_code = $result->getExitCode();
-      }
-    }
-
-    if (!empty($error_code)) {
-      return new ResultData($error_code, '`svgo` failed to run.');
-    }
-    return NULL;
-  }
-
-  /**
-   * Directories that should be watched for the theme.
-   *
-   * @return array
-   *   List of directories.
-   */
-  protected function monitoredThemeDirectories(): array {
-    return [
-      self::$themeBase . '/src',
-    ];
-  }
-
-  /**
-   * Watch the theme and compile on change (optimized).
-   */
-  public function themeWatch(): void {
-    $this->say('Compiling and watching (optimized).');
-    $this->doThemeCompile(TRUE);
-    foreach ($this->monitoredThemeDirectories() as $directory) {
-      $this->taskWatch()
-        ->monitor(
-          $directory,
-          function () {
-            $this->doThemeCompile(TRUE);
-          },
-          FilesystemEvent::ALL
-        )->run();
-    }
-  }
-
-  /**
-   * Watch the theme path and compile on change (non-optimized).
-   */
-  public function themeWatchDebug(): void {
-    $this->say('Compiling and watching (non-optimized).');
-    $this->doThemeCompile();
-    foreach ($this->monitoredThemeDirectories() as $directory) {
-      $this->taskWatch()
-        ->monitor(
-          $directory,
-          function () {
-            $this->doThemeCompile();
-          },
-          FilesystemEvent::ALL
-        )->run();
-    }
-  }
-
   /**
    * Update the caniuse-lite browserslist db.
    *