Introduce CVA to style TwigComponent

Author: WebMamba

src/TwigComponent/composer.json

@@ -27,6 +27,7 @@
     },
     "require": {
         "php": ">=8.1",
+        "gehrisandro/tailwind-merge-php": "dev-main",
         "symfony/dependency-injection": "^5.4|^6.0|^7.0",
         "symfony/deprecation-contracts": "^2.2|^3.0",
         "symfony/event-dispatcher": "^5.4|^6.0|^7.0",

src/TwigComponent/src/CVA.php

@@ -0,0 +1,94 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent;
+
+/**
+ * @author Mathéo Daninos <matheo.daninos@gmail.com>
+ */
+class CVA
+{
+    private ?string $base;
+
+    /**
+     * @var array<string, array<string, string>>
+     */
+    private ?array $variants;
+
+    /**
+     * @var array<array<string, string[]>>|null
+     */
+    private ?array $compounds;
+
+    public function __construct(?string $base = null, ?array $variants = null, ?array $compounds = null)
+    {
+        $this->base = $base;
+        $this->variants = $variants;
+        $this->compounds = $compounds;
+    }
+
+    public static function init(array $recipe): self
+    {
+        return new self(
+            $recipe['base'] ?? '',
+            $recipe['variants'] ?? null,
+            $recipe['compounds'] ?? null
+        );
+    }
+
+    public function resolve(array $recipes): string
+    {
+        $classes = '';
+
+        if (null !== $this->base) {
+            $classes .= $this->base;
+        }
+
+        foreach ($recipes as $recipeName => $recipeValue) {
+            if (!isset($this->variants[$recipeName])) {
+                continue;
+            }
+
+            if (!isset($this->variants[$recipeName][$recipeValue])) {
+                continue;
+            }
+
+            $classes .= ' '.$this->variants[$recipeName][$recipeValue];
+        }
+
+        if (null !== $this->compounds) {
+            foreach ($this->compounds as $compound) {
+                $isCompound = true;
+                foreach ($compound as $compoundName => $compoundValues) {
+                    if ('class' === $compoundName) {
+                        continue;
+                    }
+
+                    if (!isset($recipes[$compoundName])) {
+                        $isCompound = false;
+                        break;
+                    }
+
+                    if (!\in_array($recipes[$compoundName], $compoundValues)) {
+                        $isCompound = false;
+                        break;
+                    }
+                }
+
+                if ($isCompound) {
+                    $classes .= ' '.$compound['class'];
+                }
+            }
+        }
+
+        return trim($classes);
+    }
+}

src/TwigComponent/src/Twig/ComponentExtension.php

@@ -14,7 +14,9 @@
 use Psr\Container\ContainerInterface;
 use Symfony\Contracts\Service\ServiceSubscriberInterface;
 use Symfony\UX\TwigComponent\ComponentRenderer;
+use Symfony\UX\TwigComponent\CVA;
 use Symfony\UX\TwigComponent\Event\PreRenderEvent;
+use TailwindMerge\TailwindMerge;
 use Twig\Error\RuntimeError;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
@@ -41,6 +43,9 @@ public function getFunctions(): array
     {
         return [
             new TwigFunction('component', [$this, 'render'], ['is_safe' => ['all']]),
+            new TwigFunction('cva', [$this, 'cva'], ['needs_context' => true]),
+            new TwigFunction('twm', [$this, 'twm'], ['needs_context' => true]),
+            new TwigFunction('clm', [$this, 'clm'], ['needs_context' => true]),
         ];
     }
 
@@ -84,6 +89,43 @@ public function finishEmbeddedComponentRender(): void
         $this->container->get(ComponentRenderer::class)->finishEmbeddedComponentRender();
     }
 
+    public function cva(array &$context, string $recipeName, array $recipe): void
+    {
+        $key = '__recipe__'.$recipeName;
+
+        $context[$key] = CVA::init($recipe);
+    }
+
+    public function twm(array $context, string $recipeName, array $variants, string $custom = null): string
+    {
+        $key = '__recipe__'.$recipeName;
+
+        if (!isset($context[$key])) {
+            return '';
+        }
+
+        $tw = TailwindMerge::instance();
+
+        /** @var CVA $recipe */
+        $cva = $context[$key];
+
+        return $tw->merge($cva->resolve($variants).' '.$custom ?? '');
+    }
+
+    public function clm(array $context, string $recipeName, array $variants, string $custom = null): string
+    {
+        $key = '__recipe__'.$recipeName;
+
+        if (!isset($context[$key])) {
+            return '';
+        }
+
+        /** @var CVA $recipe */
+        $cva = $context[$key];
+
+        return $cva->resolve($variants).' '.$custom ?? '';
+    }
+
     private function throwRuntimeError(string $name, \Throwable $e): void
     {
         // if it's already a Twig RuntimeError, just rethrow it

src/TwigComponent/tests/Fixtures/templates/class_merge.html.twig

@@ -0,0 +1 @@
+<twig:Alert2 color='red' size='lg' class='dark:bg-gray-600'/>

src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig

@@ -0,0 +1,22 @@
+{% props color = 'blue', size = 'md', class = '' %}
+
+{{ cva('alert', {
+    'base': 'rounded-lg',
+    'variants': {
+        'color': {
+            'blue': 'text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400',
+            'red': 'text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400',
+            'green': 'text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400',
+            'yellow': 'text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400',
+        },
+        'size': {
+            'sm': 'px-4 py-3 text-sm',
+            'md': 'px-6 py-4 text-base',
+            'lg': 'px-8 py-5 text-lg',
+        }
+    }
+}) }}
+
+<div class="{{ twm('alert', {color, size}, class) }}">
+    ...
+</div>

src/TwigComponent/tests/Fixtures/templates/components/Alert2.html.twig

@@ -0,0 +1,22 @@
+{% props color = 'blue', size = 'md', class = '' %}
+
+{{ cva('alert', {
+    'base': 'alert',
+    'variants': {
+        'color': {
+            'blue': 'alert-blue',
+            'red': 'alert-red',
+            'green': 'alert-green',
+            'yellow': 'alert-yellow',
+        },
+        'size': {
+            'sm': 'alert-sm',
+            'md': 'alert-md',
+            'lg': 'alert-lg',
+        }
+    }
+}) }}
+
+<div class="{{ clm('alert', {color, size}, class) }}">
+    ...
+</div>

src/TwigComponent/tests/Fixtures/templates/tailwind_merge.html.twig

@@ -0,0 +1 @@
+<twig:Alert color='red' size='lg' class='dark:bg-gray-600'/>

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -216,6 +216,20 @@ public function testComponentPropsWithTrailingComma(): void
         $this->assertStringContainsString('Hello FOO, 123, and 456', $output);
     }
 
+    public function testComponentWithTailwindMerge(): void
+    {
+        $output = self::getContainer()->get(Environment::class)->render('tailwind_merge.html.twig');
+
+        $this->assertStringContainsString('class="rounded-lg text-red-800 bg-red-50 dark:text-red-400 px-8 py-5 text-lg dark:bg-gray-600"', $output);
+    }
+
+    public function testComponentWithClassMerge(): void
+    {
+        $output = self::getContainer()->get(Environment::class)->render('class_merge.html.twig');
+
+        $this->assertStringContainsString('class="alert alert-red alert-lg dark:bg-gray-600"', $output);
+    }
+
     private function renderComponent(string $name, array $data = []): string
     {
         return self::getContainer()->get(Environment::class)->render('render_component.html.twig', [