diff --git a/modules/cms/console/CreateTheme.php b/modules/cms/console/CreateTheme.php index 29a5f91966..71a8036f66 100644 --- a/modules/cms/console/CreateTheme.php +++ b/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, + ]); + } + } } diff --git a/modules/cms/console/scaffold/theme/tailwind/package.stub b/modules/cms/console/scaffold/theme/tailwind/package.stub deleted file mode 100644 index 51ba79a043..0000000000 --- a/modules/cms/console/scaffold/theme/tailwind/package.stub +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "{{code}}", - "private": true, - "version": "1.0.0", - "devDependencies": { - "postcss": "~8.4.x", - "postcss-import": "~14.1.x", - "tailwindcss": "~3.0.x" - }, - "dependencies": { - } -} diff --git a/modules/cms/console/scaffold/theme/tailwind/partials/meta/styles.stub b/modules/cms/console/scaffold/theme/tailwind/partials/meta/styles.stub index fdcc745eab..154e01dcc7 100644 --- a/modules/cms/console/scaffold/theme/tailwind/partials/meta/styles.stub +++ b/modules/cms/console/scaffold/theme/tailwind/partials/meta/styles.stub @@ -1,19 +1,5 @@ == -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}}"); - } -} -?> -== - +{{ vite(['assets/src/css/theme-{{code}}.css'], 'theme-{{code}}') }}