[8.x] @class Blade directive

[danharrin]

Hey! 👋

Conditional class syntax for Blade component attribute bags has been available in Laravel since v8.27.0. It can be used to conditionally merge attributes into the bag based on Boolean expressions, like so:

<span {{ $attributes->class([
    'text-sm',
    'font-bold' => $active,
]) }}>
    Dashboard
</span>

In this example, the font-bold class would be merged into this class list when the component is $active.

I would like to expand the scope of this syntax one step further, and make it available in a @class Blade directive. Similar functionality can be found in many frontend frameworks, including Vue.js and Alpine.js. This will allow Blade developers to use conditional classes on any HTML element, not just when merging them into the attribute bag. For example:

<div>
    <span @class([
        'text-sm',
        'font-bold' => $active,
    ])>
        Dashboard
    </span>

    <svg @class([
        'w-6 h-6',
        'text-indigo-600' => $active,
    ])>
        <path />
        <path />
        <path />
    </svg>
</div>

To keep this new directive DRY, I extracted the class array compilation logic into a new array helper, Arr::toCssClasses(). Let me know if there is a better place to put this logic!

Alternative

Alternatively, I could remove the @class Blade directive and allow developers to use the raw Arr::toCssClasses() helper, like so:

<div>
    <span class="{{ Arr::toCssClasses([
        'text-sm',
        'font-bold' => $active,
    ]) }}">
        Dashboard
    </span>

    <svg class="{{ Arr::toCssClasses([
        'w-6 h-6',
        'text-indigo-600' => $active,
    ]) }}">
        <path />
        <path />
        <path />
    </svg>
</div>

[imliam]

If the method does stay here, it toCssClasses may be a better name so the context of what the method does is clear when the Arr class is used outside Blade.

[danharrin]

Yeah it was a bit of a struggle to find an appropriate name, toCssClasses sounds good but lets see what the Laravel team think 👍

[stancl]

Wouldn't toHtmlClasses be more appropriate? The point is that this is in the context of view templates, but it's not related to styling necessarily. You could have @class(['clickable' => $enabled])to control some JavaScript logic for instance.

[stancl]

@taylorotwell What do you think about the conversation above suggesting the use of toHtmlClasses instead of toCssClasses? Because the CSS assumption is kind of biased when classes are used for many many things outside of styling.

[danharrin]

I'll open a PR for the docs 🎉

Update: laravel/docs#7194