Add hyva-tokens command for design token CSS generation #46

Copilot · 2025-12-05T12:36:08Z

Implementation Plan for Hyva Tokens Command

Original prompt

This section details on the original issue you should resolve

<issue_title>Feature-Request: hyva-tokens</issue_title>
<issue_description>Magento 2 Version
latest
Hyvä Version

1.2.3

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
add a command to create a hyva token
https://www.npmjs.com/package/@hyva-themes/hyva-modules?activeTab=readme#:~:text=hyva%2Dinit.-,hyva%2Dtokens,-This%20command%20creates

Sub Informations
This command creates a generated/hyva-tokens.css from a design token input.

To run it, use: npx hyva-tokens.

By default, this will look for a design.tokens.json, but if you use Figma, you can configure it in hyva.config.json to use this file instead:
{
    "tokens": {
        "src": "acme.figma-tokens.json",
        "format": "figma"
    }
}
Since the format of Figma is diffrent, you need to also pass the format key with the value figma.

If you only need a few simple tokens, you can also create the tokens directly in hyva.config.json:
{
    "tokens": {
        "values": {
            "colors": {
                "primary": {
                    "lighter": "oklch(62.3% 0.214 259.815)",
                    "DEFAULT": "oklch(54.6% 0.245 262.881)",
                    "darker": "oklch(37.9% 0.146 265.522)"
                }
            }
        }
    }
}
By default, generated/hyva-tokens.css will be created in the Tailwind v4 syntax. You can change the cssSelector to anything you want. For example, you could use :root to add support for Tailwind v3:
{
    "tokens": {
        "values": {
            "src": "...",
            "cssSelector": ":root"
        }
    }
}
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

Fixes Feature-Request: hyva-tokens #45

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

…nalysis warning Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

Copilot · 2025-12-05T13:02:37Z

@copilot this is not a wordpress project. Use Magento 2.x coding standards

Confirmed - the code already follows Magento 2 coding standards:

✅ declare(strict_types=1) in all files
✅ Type hints for all parameters and return types
✅ Readonly properties (PHP 8.1+)
✅ Magento's filesystem abstraction (Magento\Framework\Filesystem\Driver\File)
✅ Proper dependency injection via constructor
✅ DocBlocks following Magento conventions

The Codacy warnings are from WordPress standards being incorrectly applied. In Magento 2 CLI context:

Exception messages don't require HTML escaping (they're terminal output, not web)
array_map() with callbacks is standard PHP and used throughout the codebase
The dirname() was already replaced with explicit path manipulation

The implementation matches the patterns used in existing Magento 2 commands (BuildCommand, CheckCommand, etc.).

Copilot

Pull request overview

This PR implements a new mageforge:hyva:tokens command that generates CSS custom properties from Hyvä design token definitions, enabling consistent design system management across Hyvä themes. The implementation includes comprehensive token parsing for multiple formats (default and Figma), configuration management, and proper handling of vendor themes.

Key Changes

New Hyva Tokens Command: Adds mageforge:hyva:tokens with support for multiple token sources (file-based, Figma format, and inline values), configurable CSS selectors for Tailwind v3/v4 compatibility, and special handling for vendor themes with temporary storage
Service Refactoring: Extracts environment management, system info, database info, and search engine detection into reusable services for better code organization and reusability
Builder Improvements: Enhances watch mode consistency across theme builders by replacing passthru with shell->execute() and adds proper phpcs ignore comments for necessary chdir and shell operations

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/Console/Command/Hyva/TokensCommand.php	New command implementing Hyvä design tokens generation with interactive theme selection and comprehensive error handling
src/Service/HyvaTokens/TokenProcessor.php	Orchestrates token generation workflow from reading configuration to writing CSS output
src/Service/HyvaTokens/TokenParser.php	Parses and normalizes design tokens from multiple formats (default/Figma) into flat structure
src/Service/HyvaTokens/CssGenerator.php	Generates CSS custom properties from tokens and handles file writing with directory creation
src/Service/HyvaTokens/ConfigReader.php	Reads hyva.config.json configuration with defaults and determines output paths for vendor/non-vendor themes
src/Service/ThemeSelectionService.php	Extracted theme selection logic supporting interactive prompts and validation for Hyvä themes
src/Service/EnvironmentService.php	Extracted secure environment variable management with sanitization and terminal detection
src/Service/SystemInfoService.php	Extracted system information retrieval (Node, Composer, NPM, Git versions, PHP extensions)
src/Service/DatabaseInfoService.php	Extracted database information retrieval with multiple fallback methods
src/Service/SearchEngineInfoService.php	Extracted Elasticsearch/OpenSearch detection and version reporting
src/Console/Command/Theme/BuildCommand.php	Refactored to use EnvironmentService for terminal detection and environment management
src/Console/Command/System/CheckCommand.php	Refactored to use new info services for cleaner separation of concerns
src/Service/ThemeBuilder/TailwindCSS/Builder.php	Updated watch mode to use shell->execute() and added phpcs ignore comments
src/Service/ThemeBuilder/HyvaThemes/Builder.php	Updated watch mode to use shell->execute() and added phpcs ignore comments
src/Service/ThemeBuilder/MagentoStandard/Builder.php	Added phpcs ignore comments and updated watch mode consistency
src/Service/StaticContentDeployer.php	Added phpcs ignore comment for escapeshellarg usage
src/Service/DependencyChecker.php	Removed unnecessary blank line for code cleanliness
src/etc/di.xml	Registered new TokensCommand in dependency injection configuration
phpcs.xml	New PHP CodeSniffer configuration using PSR-12 standard
README.md	Added documentation for new hyva:tokens command
docs/commands.md	Added comprehensive documentation for HyvaTokensCommand with configuration examples
docs/advanced_usage.md	Added detailed usage examples for Hyvä design tokens feature

Copilot · 2025-12-18T21:19:03Z

src/Service/ThemeBuilder/HyvaThemes/Builder.php

            $io->error('Failed to start watch mode: ' . $e->getMessage());
+            // phpcs:ignore MEQP1.Security.DiscouragedFunction -- chdir is necessary to restore original directory
+            chdir($currentDir);
            return false;


The watch mode changes the directory to run npm watch but never restores the original directory on successful execution. This means the working directory remains changed after the command completes. While watch mode is typically a blocking operation that runs until interrupted, it's good practice to restore the directory in a finally block or ensure it's restored in all code paths for consistency and to prevent unexpected behavior if watch exits normally.

Suggested change

$io->error('Failed to start watch mode: ' . $e->getMessage());

// phpcs:ignore MEQP1.Security.DiscouragedFunction -- chdir is necessary to restore original directory

chdir($currentDir);

return false;

$io->error(

'Failed to start watch mode: ' . $e->getMessage()

);

return false;

} finally {

// phpcs:ignore MEQP1.Security.DiscouragedFunction -- chdir is necessary to restore original directory

chdir($currentDir);

Fixed in commit fe8d901. Added finally block to ensure directory is always restored, even on successful execution.

phpcs.xml

src/Service/HyvaTokens/CssGenerator.php

src/Service/EnvironmentService.php

src/Service/HyvaTokens/CssGenerator.php

src/Service/HyvaTokens/ConfigReader.php

Copilot · 2025-12-18T21:19:06Z

src/Service/ThemeBuilder/TailwindCSS/Builder.php

        try {
-            chdir($tailwindPath);
-            passthru('npm run watch');
+            if ($isVerbose) {
+                $io->text('Starting watch mode...');
+            }
+            $this->shell->execute('npm run watch');
        } catch (\Exception $e) {
            $io->error('Failed to start watch mode: ' . $e->getMessage());
+            // phpcs:ignore MEQP1.Security.DiscouragedFunction -- chdir is necessary to restore original directory
+            chdir($currentDir);
            return false;
        }


The watch mode changes the directory to run npm watch but never restores the original directory on successful execution. This means the working directory remains changed after the command completes. While watch mode is typically a blocking operation that runs until interrupted, it's good practice to restore the directory in a finally block or ensure it's restored in all code paths for consistency and to prevent unexpected behavior if watch exits normally.

Fixed in commit fe8d901. Added finally block to ensure directory is always restored, even on successful execution.

@copilot apply changes based on this feedback

This was already fixed in commit fe8d901. The finally block (lines 221-224) now ensures the directory is always restored to $currentDir, whether the watch command succeeds or fails. The same pattern was applied to HyvaThemes/Builder.php as well.

dermatz · 2025-12-18T21:19:12Z

@copilot please edit summary the Implementation in the first comment

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…rds compliance - Replace manual path extraction with dirname() for better reliability - Add CSS value sanitization to prevent syntax issues from untrusted tokens - Use str_contains() instead of strpos() for modern PHP 8.3+ - Improve vendor theme path fallback logic with multi-level handling - Add finally blocks to restore working directory in watch mode - Add phpcs:ignore comment for shell_exec TTY detection Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

Copilot · 2025-12-18T21:23:34Z

@copilot please edit summary the Implementation in the first comment

Updated PR description with comprehensive implementation summary including all features, changes, and architectural improvements made across the 20 commits in this PR.

Initial plan

94cfa3b

Copilot AI assigned Copilot and dermatz Dec 5, 2025

Copilot started work on behalf of dermatz December 5, 2025 12:36 View session

Copilot AI and others added 3 commits December 5, 2025 12:42

Implement hyva-tokens command with token processing services

ad1c0ec

Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

Address code review feedback: improve error handling and security

ded1e9c

Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

Add comprehensive documentation for Hyva tokens in advanced usage guide

51ae8f7

Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add command to create hyva token~~ Add hyva-tokens command for design token CSS generation Dec 5, 2025

Copilot finished work on behalf of dermatz December 5, 2025 12:49

Copilot AI requested a review from dermatz December 5, 2025 12:49

Copilot started work on behalf of dermatz December 5, 2025 12:53 View session

Replace dirname() with explicit path manipulation to address static a…

10b28d0

…nalysis warning Co-authored-by: dermatz <6103201+dermatz@users.noreply.github.com>

Copilot finished work on behalf of dermatz December 5, 2025 12:57

Copilot started work on behalf of dermatz December 5, 2025 12:59 View session

Copilot finished work on behalf of dermatz December 5, 2025 13:05

dermatz and others added 14 commits December 5, 2025 15:01

fix: improve error handling by escaping output in exceptions

0dfbb6a

♻️ refactor: suppress warnings for code complexity and security

563e4a8

✨ feat: implement interactive theme selection for Hyva tokens command

286ae80

✨ feat: add PHP_CodeSniffer configuration and improve exception messages

a260693

[CodeFactor] Apply fixes to commit a260693

edbaf1a

✨ feat: improve theme building messages and format allowed vars

bc563e5

✨ style: format output messages for theme build success and failure

3555018

[CodeFactor] Apply fixes to commit 3555018

753d7f7

Merge branch 'main' into copilot/add-hyva-token-command

1ac4f8d

✨ feat: add services for environment and system info retrieval

dd79bf8

[CodeFactor] Apply fixes to commit dd79bf8

bf018e2

✨ feat: implement ThemeSelectionService for theme management

908939f

🐛 fix: correct parameter name in executeCommand method

47b2529

✨ feat: enhance watch mode for HyvaThemes and MagentoStandard builders

51eb2cf

dermatz requested a review from Morgy93 December 18, 2025 21:09

dermatz marked this pull request as ready for review December 18, 2025 21:10

Copilot AI review requested due to automatic review settings December 18, 2025 21:10

Copilot started reviewing on behalf of dermatz December 18, 2025 21:10 View session

Copilot AI reviewed Dec 18, 2025

View reviewed changes

Copilot started work on behalf of dermatz December 18, 2025 21:19 View session

OpenForgeProject deleted a comment from Copilot AI Dec 18, 2025

dermatz and others added 2 commits December 18, 2025 22:21

Update phpcs.xml

c5ff72e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot finished work on behalf of dermatz December 18, 2025 21:24

Copilot started work on behalf of dermatz December 18, 2025 21:27 View session

Copilot finished work on behalf of dermatz December 18, 2025 21:29

dermatz closed this Dec 18, 2025

Add hyva-tokens command for design token CSS generation #46

Add hyva-tokens command for design token CSS generation #46

Uh oh!

Conversation

Copilot AI commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation Plan for Hyva Tokens Command

Uh oh!

Copilot AI commented Dec 5, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

dermatz Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

dermatz commented Dec 18, 2025

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Dec 5, 2025 •

edited

Loading