Vite theme create (#1253)

Replaces #1244. Alters how create:theme [name] tailwind works to generate the default asset configs via the vite:* commands, it also runs an initial compile to ensure styles are generated before first load.

modules/cms/console/CreateTheme.php

@@ -35,6 +35,11 @@ class CreateTheme extends GeneratorCommand
      */
     protected $nameFrom = 'theme';
 
+    /**
+     * @var string The scaffold that we are building
+     */
+    protected string $scaffold;
+
     /**
      * @var array Available theme scaffolds and their types
      */
@@ -68,12 +73,9 @@ class CreateTheme extends GeneratorCommand
             'scaffold/theme/tailwind/partials/site/header.stub' => 'partials/site/header.htm',
             'scaffold/theme/tailwind/partials/site/footer.stub' => 'partials/site/footer.htm',
             'scaffold/theme/tailwind/.gitignore.stub' => '.gitignore',
-            'scaffold/theme/tailwind/package.stub' => 'package.json',
             'scaffold/theme/tailwind/README.stub' => 'README.md',
-            'scaffold/theme/tailwind/tailwind.config.stub' => 'tailwind.config.js',
             'scaffold/theme/tailwind/theme.stub' => 'theme.yaml',
             'scaffold/theme/tailwind/version.stub' => 'version.yaml',
-            'scaffold/theme/tailwind/winter.mix.stub' => 'winter.mix.js',
         ],
     ];
 
@@ -90,12 +92,13 @@ protected function getNameInput(): string
      */
     protected function prepareVars(): array
     {
-        $scaffold = $this->argument('scaffold') ?? 'tailwind';
+        $this->scaffold = $this->argument('scaffold') ?? 'tailwind';
+
         $validOptions = $this->suggestScaffoldValues();
-        if (!in_array($scaffold, $validOptions)) {
-            throw new InvalidArgumentException("$scaffold is not an available theme scaffold type (Available types: " . implode(', ', $validOptions) . ')');
+        if (!in_array($this->scaffold, $validOptions)) {
+            throw new InvalidArgumentException("$this->scaffold is not an available theme scaffold type (Available types: " . implode(', ', $validOptions) . ')');
         }
-        $this->stubs = $this->themeScaffolds[$scaffold];
+        $this->stubs = $this->themeScaffolds[$this->scaffold];
 
         return [
             'code' => $this->getNameInput(),
@@ -146,4 +149,39 @@ public function makeStub($stubName)
 
         $this->files->put($destinationFile, $destinationContent);
     }
+
+    public function makeStubs(): void
+    {
+        parent::makeStubs();
+
+        if ($this->scaffold === 'tailwind') {
+            // Set up the vite config files
+            $this->call('vite:create', [
+                'packageName' => 'theme-' . $this->getNameInput(),
+                '--no-interaction' => true,
+                '--force' => true,
+                '--silent' => true,
+                '--tailwind' => true
+            ]);
+
+            $this->info('Installing NPM dependencies...');
+
+            // Ensure all require packages are available for the new theme and add the new theme to our npm workspaces
+            $this->call('vite:install', [
+                'assetPackage' => ['theme-' . $this->getNameInput()],
+                '--no-interaction' => true,
+                '--silent' => true,
+                '--disable-tty' => true
+            ]);
+
+            $this->info('Compiling your theme...');
+
+            // Run an initial compile to ensure styles are available for first load
+            $this->call('vite:compile', [
+                '--package' => ['theme-' . $this->getNameInput()],
+                '--no-interaction' => true,
+                '--silent' => true,
+            ]);
+        }
+    }
 }

modules/cms/console/scaffold/theme/tailwind/partials/meta/styles.stub

@@ -1,19 +1,5 @@
 ==
-<?php
-use Cms\Classes\Asset;
-use Cms\Classes\Theme;
-function onStart() {
-    // Cache bust the main styles file
-    $styles = (new Asset(Theme::getActiveTheme()))->find('dist/css/theme.css');
-    if ($styles) {
-        $this['lastmodified'] = $styles->mtime;
-    } else {
-        throw new \Exception("Asset files were not detected, try running artisan mix:install && artisan mix:compile -p theme-{{code}}");
-    }
-}
-?>
-==
-<link rel="stylesheet" href="{{ 'assets/dist/css/theme.css' | theme }}?v={{ lastmodified }}">
+{{ vite(['assets/src/css/theme-{{code}}.css'], 'theme-{{code}}') }}
 
 <style>
     :root {

modules/cms/console/scaffold/theme/tailwind/partials/site/footer.stub

@@ -7,8 +7,8 @@
             '@framework.extras',
         ] | theme }}"></script>
 
-        {# Mix extracted assets #}
-        <script src="{{ 'assets/dist/js/theme.js' | theme }}"></script>
+        {# Vite extracted assets #}
+        {{ vite(['assets/src/js/theme-{{code}}.js'], 'theme-{{code}}') }}
 
         {% scripts %}
 

modules/system/console/asset/AssetCompile.php

@@ -147,7 +147,10 @@ public function watchHandle(string $type): int
             return 1;
         }
 
-        $this->info(sprintf('Watching package "%s" for changes', $name));
+        if (!$this->option('silent')) {
+            $this->info(sprintf('Watching package "%s" for changes', $name));
+        }
+
         $this->watchingFilePath = $relativeConfigPath;
 
         if ($this->executeProcess(base_path($relativeConfigPath)) !== 0) {

modules/system/console/asset/AssetCreate.php

@@ -64,8 +64,12 @@ public function handle(): int
         $packages = $compilableAssets->getPackages($this->assetType, true);
 
         if (
+            // We have the package already
             isset($packages[$package])
-            && !$this->confirm('Package `' . $package . '` has already been configured, are you sure you wish to continue?')
+            // If the user has requested `force` & `no-interaction` then we do not ask for confirmation and continue
+            && !($this->option('force') && $this->option('no-interaction'))
+            // If the user has forced but with interaction, then we do not ask for confirmation, else we do
+            && !($this->option('force') || $this->confirm('Package `' . $package . '` has already been configured, are you sure you wish to continue?'))
         ) {
             return 0;
         }
@@ -87,8 +91,10 @@ public function handle(): int
         $verb = File::exists($packageJson->getPath()) ? 'updated' : 'generated';
         $packageJson->save();
 
-        $this->warn("File $verb: " . str_after($packageJson->getPath(), base_path()));
-        $this->info(ucfirst($this->assetType) . ' configuration complete.');
+        if (!$this->option('silent')) {
+            $this->warn("File $verb: " . str_after($packageJson->getPath(), base_path()));
+            $this->info(ucfirst($this->assetType) . ' configuration complete.');
+        }
 
         $this->afterExecution();
 
@@ -196,13 +202,24 @@ protected function installConfigs(
      */
     protected function writeFile(string $path, string $content): int
     {
-        if (File::exists($path) && !$this->confirm(sprintf('%s already exists, overwrite?', basename($path)))) {
+        if (
+            // If forced, ignore file existing and overwrite
+            (!$this->option('force') && File::exists($path))
+            && (
+                // If no interaction requested, then skip the confirm check and return
+                $this->option('no-interaction')
+                // else ask the user if they want overwriting
+                || !$this->confirm(sprintf('%s already exists, overwrite?', basename($path)))
+            )
+        ) {
             return 0;
         }
 
         $result = File::put($path, $content);
 
-        $this->warn('File generated: ' . str_after($path, base_path()));
+        if (!$this->option('silent')) {
+            $this->warn('File generated: ' . str_after($path, base_path()));
+        }
 
         return $result;
     }

modules/system/console/asset/AssetInstall.php

@@ -369,7 +369,9 @@ protected function runNpmInstall(): int
 
         try {
             return $process->run(function ($status, $stdout) {
-                $this->getOutput()->write($stdout);
+                if (!$this->option('silent')) {
+                    $this->getOutput()->write($stdout);
+                }
             });
         } catch (ProcessSignaledException $e) {
             if (extension_loaded('pcntl') && $e->getSignal() !== SIGINT) {

modules/system/console/asset/fixtures/config/tailwind/postcss.config.js.fixture

@@ -1,6 +1,5 @@
 export default {
     plugins: {
         tailwindcss: {},
-        autoprefixer: {},
     },
 };

modules/system/console/asset/mix/MixCompile.php

@@ -19,7 +19,7 @@ class MixCompile extends AssetCompile
     protected $signature = 'mix:compile
         {webpackArgs?* : Arguments to pass through to the Webpack CLI}
         {--f|production : Runs compilation in "production" mode}
-        {--s|silent : Silent mode}
+        {--s|silent : Enables silent mode, no output will be shown.}
         {--d|disable-tty : Disable tty mode}
         {--e|stop-on-error : Exit once an error is encountered}
         {--m|manifest= : Defines package.json to use for compile}

modules/system/console/asset/mix/MixCreate.php

@@ -14,7 +14,9 @@ class MixCreate extends AssetCreate
      */
     protected $signature = 'mix:create
         {packageName : The package name to add configuration for}
-        {--no-stubs : Disable stub file generation}';
+        {--no-stubs : Disable stub file generation}
+        {--s|silent : Enables silent mode, no output will be shown.}
+        {--f|force : Force file overwrites}';
 
     /**
      * @var array List of commands that this command replaces (aliases)

modules/system/console/asset/mix/MixInstall.php

@@ -17,6 +17,7 @@ class MixInstall extends AssetInstall
         {--no-install : Tells Winter not to run npm install after config update.}
         {--npm= : Defines a custom path to the "npm" binary.}
         {--d|disable-tty : Disable tty mode.}
+        {--s|silent : Enables silent mode, no output will be shown.}
         {--p|package-json= : Defines a custom path to "package.json" file. Must be above the workspace path.}';
 
     /**

modules/system/console/asset/mix/MixWatch.php

@@ -17,7 +17,7 @@ class MixWatch extends MixCompile
         {webpackArgs?* : Arguments to pass through to the Webpack CLI}
         {--f|production : Runs compilation in "production" mode}
         {--m|manifest= : Defines package.json to use for compile}
-        {--s|silent : Silent mode}
+        {--s|silent : Enables silent mode, no output will be shown.}
         {--d|disable-tty : Disable tty mode}
         {--no-progress : Do not show mix progress}';
 

modules/system/console/asset/vite/ViteCompile.php

@@ -18,7 +18,7 @@ class ViteCompile extends AssetCompile
     protected $signature = 'vite:compile
         {viteArgs?* : Arguments to pass through to the Vite CLI}
         {--f|production : Runs compilation in "production" mode}
-        {--s|silent : Silent mode}
+        {--s|silent : Enables silent mode, no output will be shown.}
         {--d|disable-tty : Disable tty mode}
         {--e|stop-on-error : Exit once an error is encountered}
         {--m|manifest= : Defines package.json to use for compile}

modules/system/console/asset/vite/ViteCreate.php

@@ -16,7 +16,9 @@ class ViteCreate extends AssetCreate
      */
     protected $signature = 'vite:create
         {packageName : The package name to add configuration for}
-        {--no-stubs : Disable stub file generation}';
+        {--no-stubs : Disable stub file generation}
+        {--s|silent : Enables silent mode, no output will be shown.}
+        {--f|force : Force file overwrites}';
 
     /**
      * @var array List of commands that this command replaces (aliases)
@@ -40,6 +42,10 @@ class ViteCreate extends AssetCreate
      */
     public function afterExecution(): void
     {
+        if ($this->option('silent')) {
+            return;
+        }
+
         $packageName = $this->makePackageName($this->argument('packageName'));
         $this->output->writeln('');
         $this->info('Add the following to your twig to enable asset loading:');

modules/system/console/asset/vite/ViteInstall.php

@@ -19,6 +19,7 @@ class ViteInstall extends AssetInstall
         {--no-install : Tells Winter not to run npm install after config update.}
         {--npm= : Defines a custom path to the "npm" binary.}
         {--d|disable-tty : Disable tty mode.}
+        {--s|silent : Enables silent mode, no output will be shown.}
         {--p|package-json= : Defines a custom path to "package.json" file. Must be above the workspace path.}';
 
     /**

modules/system/console/asset/vite/ViteWatch.php

@@ -19,7 +19,7 @@ class ViteWatch extends ViteCompile
         {viteArgs?* : Arguments to pass through to the Webpack CLI}
         {--f|production : Runs compilation in "production" mode}
         {--m|manifest= : Defines package.json to use for compile}
-        {--s|silent : Silent mode}
+        {--s|silent : Enables silent mode, no output will be shown.}
         {--d|disable-tty : Disable tty mode}
         {--no-progress : Do not show mix progress}';