From d9dc87f55d730b253c7ca07cc66567ac9da9c9f7 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 10 Jul 2023 21:29:58 +0100
Subject: [PATCH 1/2] Support conditional classes in Blade directive and
 attribute macro

---
 src/ServiceProvider.php              |  5 +++--
 tests/Arch.php                       |  1 +
 tests/Feature/BladeComponentTest.php | 21 ++++++++++++++++++++-
 tests/Feature/BladeDirectiveTest.php | 19 +++++++++++++++++++
 tests/Fixtures/Rectangle.php         | 15 +++++++++++++++
 tests/Fixtures/Square.php            | 23 +++++++++++++++++++++++
 6 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 tests/Fixtures/Rectangle.php
 create mode 100644 tests/Fixtures/Square.php

diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
index ce45352..feae891 100644
--- a/src/ServiceProvider.php
+++ b/src/ServiceProvider.php
@@ -4,6 +4,7 @@
 
 namespace TailwindMerge\Laravel;
 
+use Illuminate\Support\Arr;
 use Illuminate\Support\ServiceProvider as BaseServiceProvider;
 use Illuminate\View\Compilers\BladeCompiler;
 use Illuminate\View\ComponentAttributeBag;
@@ -46,14 +47,14 @@ protected function registerBladeDirectives(): void
                 return;
             }
 
-            $bladeCompiler->directive($name, fn (?string $expression) => "<?php echo twMerge($expression); ?>");
+            $bladeCompiler->directive($name, fn (?string $expression) => "<?php echo twMerge(\Illuminate\Support\Arr::map([$expression], fn (\$arg) => \Illuminate\Support\Arr::toCssClasses(\$arg))); ?>");
         });
     }
 
     protected function registerAttributesBagMacro(): void
     {
         ComponentAttributeBag::macro('twMerge', function (...$args): static {
-            $this->attributes['class'] = resolve(TailwindMergeContract::class)->merge($args, ($this->attributes['class'] ?? ''));
+            $this->attributes['class'] = resolve(TailwindMergeContract::class)->merge(Arr::map($args, fn ($arg) => Arr::toCssClasses($arg)), ($this->attributes['class'] ?? ''));
 
             return $this;
         });
diff --git a/tests/Arch.php b/tests/Arch.php
index dde081b..adc94c6 100644
--- a/tests/Arch.php
+++ b/tests/Arch.php
@@ -10,6 +10,7 @@
     ->expect('TailwindMerge\Laravel\ServiceProvider')
     ->toOnlyUse([
         'Illuminate\Contracts\Support\DeferrableProvider',
+        'Illuminate\Support\Arr',
         'Illuminate\Support\ServiceProvider',
         'Illuminate\View\Compilers\BladeCompiler',
         'Illuminate\View\ComponentAttributeBag',
diff --git a/tests/Feature/BladeComponentTest.php b/tests/Feature/BladeComponentTest.php
index d961e21..e1ac423 100644
--- a/tests/Feature/BladeComponentTest.php
+++ b/tests/Feature/BladeComponentTest.php
@@ -2,10 +2,29 @@
 
 use Illuminate\Support\Facades\Blade;
 use Tests\Fixtures\Circle;
+use Tests\Fixtures\Rectangle;
+use Tests\Fixtures\Square;
 
-it('provides a blade directive to merge tailwind classes', function () {
+it('provides a blade attribute macro to merge tailwind classes', function () {
     Blade::component('circle', Circle::class);
 
     $this->blade('<x-circle class="bg-blue-500" />')
         ->assertSee('<div class="w-10 h-10 rounded-full bg-blue-500"></div>', false);
 });
+
+test('blade attribute macro supports conditional classes', function () {
+    Blade::component('square', Square::class);
+
+    $this->blade('<x-square class="bg-blue-500" />')
+        ->assertSee('<div class="w-10 h-10 bg-blue-500"></div>', false);
+
+    $this->blade('<x-square class="bg-blue-500" rounded />')
+        ->assertSee('<div class="w-10 h-10 rounded bg-blue-500"></div>', false);
+});
+
+test('blade attribute macro supports multiple arguments', function () {
+    Blade::component('rectangle', Rectangle::class);
+
+    $this->blade('<x-rectangle />')
+        ->assertSee('<div class="h-6 rounded border pl-4"></div>', false);
+});
diff --git a/tests/Feature/BladeDirectiveTest.php b/tests/Feature/BladeDirectiveTest.php
index 12a1652..8603bdd 100644
--- a/tests/Feature/BladeDirectiveTest.php
+++ b/tests/Feature/BladeDirectiveTest.php
@@ -7,6 +7,25 @@
         ->assertSee('class="h-6"', false);
 });
 
+test('blade directive supports conditional classes', function () {
+    $this->blade('<div class="@twMerge([
+        "h-4 h-6",
+        "rounded" => false,
+    ])"></div>')
+        ->assertSee('class="h-6"', false);
+
+    $this->blade('<div class="@twMerge([
+        "h-4 h-6",
+        "rounded" => true,
+    ])"></div>')
+        ->assertSee('class="h-6 rounded"', false);
+});
+
+test('blade directive supports multiple arguments', function () {
+    $this->blade('<div class="@twMerge("h-4 h-6", "rounded border", ["pl-4", "rounded-full" => false])"></div>')
+        ->assertSee('class="h-6 rounded border pl-4"', false);
+});
+
 test('name ot the blade directive is configurable', function () {
     Config::set('tailwind-merge.blade_directive', 'myMerge');
 
diff --git a/tests/Fixtures/Rectangle.php b/tests/Fixtures/Rectangle.php
new file mode 100644
index 0000000..b697fe1
--- /dev/null
+++ b/tests/Fixtures/Rectangle.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace tests\Fixtures;
+
+use Illuminate\View\Component;
+
+class Rectangle extends Component
+{
+    public function render()
+    {
+        return <<<'blade'
+            <div {{ $attributes->twMerge("h-4 h-6", "rounded border", ["pl-4", "rounded-full" => false]) }}></div>
+        blade;
+    }
+}
diff --git a/tests/Fixtures/Square.php b/tests/Fixtures/Square.php
new file mode 100644
index 0000000..9e0cbcb
--- /dev/null
+++ b/tests/Fixtures/Square.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace tests\Fixtures;
+
+use Illuminate\View\Component;
+
+class Square extends Component
+{
+    public function __construct(
+        public bool $rounded = false,
+    ) {
+    }
+
+    public function render()
+    {
+        return <<<"blade"
+            <div {{ \$attributes->twMerge([
+                'w-10 h-10 bg-red-500',
+                'rounded' => '{$this->rounded}',
+            ]) }}></div>
+        blade;
+    }
+}

From f278180b8a5db39bcdb76f00f34872b1c84d1f51 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 10 Jul 2023 21:47:20 +0100
Subject: [PATCH 2/2] Tweak example class name

---
 tests/Feature/BladeComponentTest.php |  4 ++--
 tests/Feature/BladeDirectiveTest.php | 10 +++++-----
 tests/Fixtures/Rectangle.php         |  2 +-
 tests/Fixtures/Square.php            |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/tests/Feature/BladeComponentTest.php b/tests/Feature/BladeComponentTest.php
index e1ac423..8a37f9c 100644
--- a/tests/Feature/BladeComponentTest.php
+++ b/tests/Feature/BladeComponentTest.php
@@ -19,12 +19,12 @@
         ->assertSee('<div class="w-10 h-10 bg-blue-500"></div>', false);
 
     $this->blade('<x-square class="bg-blue-500" rounded />')
-        ->assertSee('<div class="w-10 h-10 rounded bg-blue-500"></div>', false);
+        ->assertSee('<div class="w-10 h-10 rounded-lg bg-blue-500"></div>', false);
 });
 
 test('blade attribute macro supports multiple arguments', function () {
     Blade::component('rectangle', Rectangle::class);
 
     $this->blade('<x-rectangle />')
-        ->assertSee('<div class="h-6 rounded border pl-4"></div>', false);
+        ->assertSee('<div class="h-6 rounded-lg border pl-4"></div>', false);
 });
diff --git a/tests/Feature/BladeDirectiveTest.php b/tests/Feature/BladeDirectiveTest.php
index 8603bdd..bd7c821 100644
--- a/tests/Feature/BladeDirectiveTest.php
+++ b/tests/Feature/BladeDirectiveTest.php
@@ -10,20 +10,20 @@
 test('blade directive supports conditional classes', function () {
     $this->blade('<div class="@twMerge([
         "h-4 h-6",
-        "rounded" => false,
+        "rounded-lg" => false,
     ])"></div>')
         ->assertSee('class="h-6"', false);
 
     $this->blade('<div class="@twMerge([
         "h-4 h-6",
-        "rounded" => true,
+        "rounded-lg" => true,
     ])"></div>')
-        ->assertSee('class="h-6 rounded"', false);
+        ->assertSee('class="h-6 rounded-lg"', false);
 });
 
 test('blade directive supports multiple arguments', function () {
-    $this->blade('<div class="@twMerge("h-4 h-6", "rounded border", ["pl-4", "rounded-full" => false])"></div>')
-        ->assertSee('class="h-6 rounded border pl-4"', false);
+    $this->blade('<div class="@twMerge("h-4 h-6", "rounded-lg border", ["pl-4", "rounded-full" => false])"></div>')
+        ->assertSee('class="h-6 rounded-lg border pl-4"', false);
 });
 
 test('name ot the blade directive is configurable', function () {
diff --git a/tests/Fixtures/Rectangle.php b/tests/Fixtures/Rectangle.php
index b697fe1..7bb42c7 100644
--- a/tests/Fixtures/Rectangle.php
+++ b/tests/Fixtures/Rectangle.php
@@ -9,7 +9,7 @@ class Rectangle extends Component
     public function render()
     {
         return <<<'blade'
-            <div {{ $attributes->twMerge("h-4 h-6", "rounded border", ["pl-4", "rounded-full" => false]) }}></div>
+            <div {{ $attributes->twMerge("h-4 h-6", "rounded-lg border", ["pl-4", "rounded-full" => false]) }}></div>
         blade;
     }
 }
diff --git a/tests/Fixtures/Square.php b/tests/Fixtures/Square.php
index 9e0cbcb..2017343 100644
--- a/tests/Fixtures/Square.php
+++ b/tests/Fixtures/Square.php
@@ -16,7 +16,7 @@ public function render()
         return <<<"blade"
             <div {{ \$attributes->twMerge([
                 'w-10 h-10 bg-red-500',
-                'rounded' => '{$this->rounded}',
+                'rounded-lg' => '{$this->rounded}',
             ]) }}></div>
         blade;
     }