Support conditional classes in Blade directive and attribute macro

[jacksleight]

This PR adds support for conditional classes to the Blade directive and attribute macro, just like Blade's existing @class directive and $attrbutes->class() method support. Allowing you to do:

<div class="@twMerge([
    'h-4 h-6',
    'rounded-lg' => $someCondition,
])"></div>

Tests are included and I've added a couple of extra tests to ensure that multiple arguments all still work as expected.

[robsontenorio]

@gehrisandro that would be a nice feature !

[GoodM4ven]

Until the author merges this, here's a helper method me and ChatGPT came up with:

if (!function_exists('conditioned_classes')) {
    function conditioned_classes(array $classes)
    {
        $classString = '';

        foreach ($classes as $class => $condition) {
            if (is_int($class)) {
                // If the key is an integer, it means the class is unconditional
                $classString .= " $condition";
            } elseif ($condition) {
                // If the key is a string, and the condition is true, add the class
                $classString .= " $class";
            }
        }

        return $classString;
    }
}

{{
    $attributes
        ->twMerge(conditioned_classes([
            '-left-[2.8rem] translate-x-full' => $openFromTheRight,
            '-right-[2.8rem] -translate-x-full' => !$openFromTheRight,
            'grid h-10 w-10 rotate-45 items-center justify-center rounded-lg border-2 border-primary-light-500 shadow shadow-primary-light-500/30 transition-all dark:border-primary-dark-500 dark:shadow-primary-dark-500/30 ali-outline-to-ring bg-light dark:bg-dark',
        ]))
        ->merge();
}}

[chrillep]

Until the author merges this, here's a helper method me and ChatGPT came up with:

if (!function_exists('conditioned_classes')) {
    function conditioned_classes(array $classes)
    {
        $classString = '';

        foreach ($classes as $class => $condition) {
            if (is_int($class)) {
                // If the key is an integer, it means the class is unconditional
                $classString .= " $condition";
            } elseif ($condition) {
                // If the key is a string, and the condition is true, add the class
                $classString .= " $class";
            }
        }

        return $classString;
    }
}

{{
    $attributes
        ->twMerge(conditioned_classes([
            '-left-[2.8rem] translate-x-full' => $openFromTheRight,
            '-right-[2.8rem] -translate-x-full' => !$openFromTheRight,
            'grid h-10 w-10 rotate-45 items-center justify-center rounded-lg border-2 border-primary-light-500 shadow shadow-primary-light-500/30 transition-all dark:border-primary-dark-500 dark:shadow-primary-dark-500/30 ali-outline-to-ring bg-light dark:bg-dark',
        ]))
        ->merge();
}}

the Arr helper already has this ?

https://laravel.com/docs/10.x/helpers#method-array-to-css-classes

use Illuminate\Support\Arr;
 
$isActive = false;
$hasError = true;
 
$array = [
  'p-4', 
  'font-bold' => $isActive, 
  'bg-red' => $hasError
];
 
$classes = Arr::toCssClasses($array);
 
/*
    'p-4 bg-red'
*/

so pass the result of Arr::toCssClasses to twMerge ?

{{
    $attributes
        ->twMerge(Arr::toCssClasses([
            'grid h-10 w-10 rotate-45 items-center justify-center rounded-lg border-2 border-primary-light-500 shadow shadow-primary-light-500/30 transition-all dark:border-primary-dark-500 dark:shadow-primary-dark-500/30 ali-outline-to-ring bg-light dark:bg-dark',
            '-left-[2.8rem] translate-x-full' => $openFromTheRight,
            '-right-[2.8rem] -translate-x-full' => !$openFromTheRight,
        ]))
        ->merge();
}}

[clarkewing]

Hi @gehrisandro, any chance of getting this merged?